LayoutGap Component synced with Web Awesome 3.0.0

provides layout gap functionality for Angular applications.

Preparing for Web Awesome 1.0.0. This wrapper will not target a version above 1.0.0 until it is released.

Overview

Import

Import the layoutGap directive from the angular-awesome package:

// Import the layoutGap directive
import { WaLayoutGapDirective } from 'angular-awesome/layout-gap';

Examples

Gap Directive Examples

This page shows how to use the [waGap] directive and the underlying wa-gap-* classes with Web Awesome layout utilities.

Standalone container gap

<div [waGap]="'m'">
  <div class="demo-box">A</div>
  <div class="demo-box">B</div>
  <div class="demo-box">C</div>
</div>

Cluster spacing

<div class="wa-cluster" [waGap]="'s'">
  <wa-button size="s">One</wa-button>
  <wa-button size="s" variant="outlined">Two</wa-button>
  <wa-button size="s" variant="filled">Three</wa-button>
</div>

Grid spacing

<div class="wa-grid" [waGap]="'xl'" style="--min-column-size: 16rem">
  <wa-card>Card 1</wa-card>
  <wa-card>Card 2</wa-card>
  <wa-card>Card 3</wa-card>
  <wa-card>Card 4</wa-card>
</div>

Using full class names

<div class="wa-stack" [waGap]="'wa-gap-2xs'">
  <div>Line 1</div>
  <div>Line 2</div>
  <div>Line 3</div>
</div>

API Reference

Styling