@kit-ng-ui/space

Spacing primitive for Kit UI. Mirrors ant-design's <Space> API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/space @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/space/styles' as space;

Use

import { KitSpaceComponent } from '@kit-ng-ui/space';
import { KitButtonComponent } from '@kit-ng-ui/button';

@Component({
  standalone: true,
  imports: [KitSpaceComponent, KitButtonComponent],
  template: `
    <kit-space>
      <kit-button>Cancel</kit-button>
      <kit-button type="primary">Save</kit-button>
    </kit-space>

    <kit-space direction="vertical" size="large" align="start">
      <span>Top</span>
      <span>Middle</span>
      <span>Bottom</span>
    </kit-space>

    <kit-space [size]="[24, 8]" wrap>
      <kit-tag>red</kit-tag>
      <kit-tag>green</kit-tag>
      <kit-tag>blue</kit-tag>
    </kit-space>
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------ | | direction | 'horizontal' \| 'vertical' | 'horizontal' | Layout axis. | | size | 'small' \| 'middle' \| 'large' \| number \| [number \| preset, number \| preset] | 'small' | Gap between items. Tuple form sets horizontal and vertical gaps independently. | | align | 'start' \| 'end' \| 'center' \| 'baseline' \| null | null | Cross-axis alignment. Defaults to center for horizontal, stretch for vertical. | | wrap | boolean | false | Allow horizontal items to wrap to the next line. Ignored when direction === 'vertical'. |

Preset sizes map to design-token pixel values: small→8, middle→16, large→24.

Behavior notes

• <kit-space> is an inline-flex container — chain multiple instances inline without forcing block layout.
• For dense card grids, prefer <kit-flex> or <kit-row>.
• Space.Compact (merged borders for adjacent inputs/buttons) — // TODO(parity) planned for a future minor.