@kit-ng-ui/segmented

Segmented control for Kit UI. Mirrors ant-design's <Segmented>.

Install

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

Styles

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

Use

import { KitSegmentedComponent } from '@kit-ng-ui/segmented';

@Component({
  standalone: true,
  imports: [KitSegmentedComponent],
  template: `
    <kit-segmented [options]="['Day', 'Week', 'Month']" [(value)]="period" />

    <kit-segmented
      size="large"
      [options]="[
        { label: 'List',  value: 'list',  icon: '☰' },
        { label: 'Grid',  value: 'grid',  icon: '▦' },
        { label: 'Cards', value: 'cards', disabled: true },
      ]"
      [(value)]="layout"
    />
  `,
})
export class Demo {
  period = signal<string>('Day');
  layout = signal<string>('list');
}

API

| Input | Type | Default | Description | | ---------- | ------------------------------------------------------------- | ----------- | ----------------------------------------------------------------- | | options | Array<string \| number \| { label, value, icon?, disabled? }> | required | Buttons to render. | | value | string \| number \| null | null | Two-way bound via [(value)]. Also a ControlValueAccessor. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Control height + padding. | | block | boolean | false | Stretch to fill the container; items share width equally. | | disabled | boolean | false | Disable all items. |

Outputs

| Output | Type | Description | | ------------- | -------------------------- | ------------------------------------ | | valueChange | string \| number | Fires when the user picks a new item. |

Also implements ControlValueAccessor so it works with [formControl] and [(ngModel)].