advanced

Segmented

iOS-style segmented control buttons.

Preview

A preview of the Segmented component with interactive controls.

Preview Code
Interactive

Installation

Add the Segmented component to your project.

Bash
ng g @ng-cn/core:c segmented

Usage

Import and use the Segmented component in your Angular application.

Template TypeScript
template.html
<Segmented [(ngModel)]="value">
  <SegmentedItem value="all">All</SegmentedItem>
  <SegmentedItem value="active">Active</SegmentedItem>
  <SegmentedItem value="draft">Draft</SegmentedItem>
  <SegmentedItem value="archived">Archived</SegmentedItem>
</Segmented>

Examples

Explore different variations and use cases for the Segmented component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
defaultValue string — The default selected value.
value string — The controlled value.