Toggle Group
A group of toggle buttons.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';
@Component({
selector: 'spartan-toggle-group-preview',
providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
imports: [BrnToggleGroup, BrnToggleGroupItem, HlmToggleGroup, HlmToggleGroupItem, HlmIcon, NgIcon],
template: `
<brn-toggle-group hlm multiple="true" 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 ToggleGroupPreview {}Installation
npx nx g @spartan-ng/cli:ui toggle-group
ng g @spartan-ng/cli:ui toggle-group
Usage
import {
BrnToggleGroupItem
BrnToggleGroup
} from '@spartan-ng/brain/toggle-group';
import {
HlmToggleGroupItem
HlmToggleGroup
} from '@spartan-ng/helm/toggle-group';<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
Outline
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';
@Component({
selector: 'spartan-toggle-group-outline',
imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, 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 ToggleGroupOutlinePreview {}Small
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';
@Component({
selector: 'spartan-toggle-group-small',
imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, 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 ToggleGroupSmallPreview {}Large
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';
@Component({
selector: 'spartan-toggle-group-large',
imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, 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="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 ToggleGroupLargePreview {}Disabled
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';
@Component({
selector: 'spartan-toggle-group-disabled',
imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, 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 ToggleGroupDisabledPreview {}