Toggle Group
A group of toggle buttons.
import { Component } from '@angular/core';
import {
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';
import { BrnToggleGroupItemDirective, BrnToggleGroupComponent } from '@spartan-ng/brain/toggle-group';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
@Component({
selector: 'spartan-toggle-group-preview',
standalone: true,
imports: [
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
HlmIconDirective,
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
NgIcon,
],
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
template: `
<brn-toggle-group hlm multiple="false" nullable="true">
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideBold" />
</button>
<button aria-label="Italic" value="italic" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
<button aria-label="Underline" value="underline" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
</brn-toggle-group>
`
})
export class ToggleGroupPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui toggle-group
ng g @spartan-ng/cli:ui toggle-group
Usage
import {
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
} from '@spartan-ng/brain/toggle-group';
import {
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';<brn-toggle-group hlm nullable="true">
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideBold" />
</button>
</brn-toggle-group>Examples
Default
import { Component } from '@angular/core';
import {
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';
import { BrnToggleGroupItemDirective, BrnToggleGroupComponent } from '@spartan-ng/brain/toggle-group';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
@Component({
selector: 'spartan-toggle-group-preview',
standalone: true,
imports: [
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
HlmIconDirective,
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
NgIcon,
],
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
template: `
<brn-toggle-group hlm multiple="false" nullable="true">
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideBold" />
</button>
<button aria-label="Italic" value="italic" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
<button aria-label="Underline" value="underline" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
</brn-toggle-group>
`
})
export class ToggleGroupPreviewComponent {}Outline
import { Component } from '@angular/core';
import {
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';
import { BrnToggleGroupItemDirective, BrnToggleGroupComponent } from '@spartan-ng/brain/toggle-group';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
@Component({
selector: 'spartan-toggle-group-outline',
standalone: true,
imports: [
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
HlmIconDirective,
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
NgIcon,
],
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
template: `
<brn-toggle-group hlm multiple="true" nullable="true" variant="outline">
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideBold" />
</button>
<button aria-label="Italic" value="italic" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
<button aria-label="Underline" value="underline" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
</brn-toggle-group>
`,
})
export class ToggleGroupOutlinePreviewComponent {}Small
import { Component } from '@angular/core';
import {
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';
import { BrnToggleGroupItemDirective, BrnToggleGroupComponent } from '@spartan-ng/brain/toggle-group';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
@Component({
selector: 'spartan-toggle-group-small',
standalone: true,
imports: [
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
HlmIconDirective,
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
NgIcon,
],
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
template: `
<brn-toggle-group hlm multiple="false" nullable="true" size="sm">
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideBold" />
</button>
<button aria-label="Italic" value="italic" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
<button aria-label="Underline" value="underline" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
</brn-toggle-group>
`,
})
export class ToggleGroupSmallPreviewComponent {}Large
import { Component } from '@angular/core';
import {
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';
import { BrnToggleGroupItemDirective, BrnToggleGroupComponent } from '@spartan-ng/brain/toggle-group';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
@Component({
selector: 'spartan-toggle-group-large',
standalone: true,
imports: [
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
HlmIconDirective,
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
NgIcon,
],
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
template: `
<brn-toggle-group hlm multiple="false" nullable="true" size="lg">
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="lg" name="lucideBold" />
</button>
<button aria-label="Italic" value="italic" hlmToggleGroupItem>
<ng-icon hlm size="lg" name="lucideItalic" />
</button>
<button aria-label="Underline" value="underline" hlmToggleGroupItem>
<ng-icon hlm size="lg" name="lucideUnderline" />
</button>
</brn-toggle-group>
`,
})
export class ToggleGroupLargePreviewComponent {}Disabled
import { Component } from '@angular/core';
import {
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
} from '@spartan-ng/ui-toggle-group-helm';
import { BrnToggleGroupItemDirective, BrnToggleGroupComponent } from '@spartan-ng/brain/toggle-group';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
@Component({
selector: 'spartan-toggle-group-disabled',
standalone: true,
imports: [
BrnToggleGroupItemDirective,
BrnToggleGroupComponent,
HlmIconDirective,
HlmToggleGroupItemDirective,
HlmToggleGroupDirective,
NgIcon,
],
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
template: `
<brn-toggle-group hlm multiple="false" nullable="true" size="sm" disabled>
<button aria-label="Bold" value="bold" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideBold" />
</button>
<button aria-label="Italic" value="italic" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
<button aria-label="Underline" value="underline" hlmToggleGroupItem>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
</brn-toggle-group>
`,
})
export class ToggleGroupDisabledPreviewComponent {}