Toggle

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-default',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="Default toggle">
      <z-icon zType="bold" />
    </z-toggle>
  `,
})
export class ZardDemoToggleDefaultComponent {}
 

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-with-forms',
  imports: [ZardToggleComponent, FormsModule, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="Turn on the light" [(ngModel)]="lightOn">
      @if (lightOn) {
        <z-icon zType="lightbulb" />
      } @else {
        <z-icon zType="lightbulb-off" />
      }
    </z-toggle>
  `,
})
export class ZardDemoToggleWithFormsComponent {
  protected lightOn = false;
}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-with-default',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="With default" [zDefault]="true">
      <z-icon zType="bold" />
    </z-toggle>
  `,
})
export class ZardDemoToggleWithDefaultComponent {}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-outline',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="Toggle outline" zType="outline">
      <z-icon zType="bold" />
    </z-toggle>
  `,
})
export class ZardDemoToggleOutlineComponent {}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-with-text',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle>
      <z-icon zType="italic" />
      Italic
    </z-toggle>
  `,
})
export class ZardDemoToggleWithTextComponent {}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-small',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="Toggle small" zSize="sm">
      <z-icon zType="bold" />
    </z-toggle>
  `,
})
export class ZardDemoToggleSmallComponent {}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-large',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="Toggle large" zSize="lg">
      <z-icon zType="bold" />
    </z-toggle>
  `,
})
export class ZardDemoToggleLargeComponent {}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardToggleComponent } from '../toggle.component';
 
@Component({
  selector: 'z-demo-toggle-disabled',
  imports: [ZardToggleComponent, ZardIconComponent],
  standalone: true,
  template: `
    <z-toggle aria-label="Toggle disabled" disabled>
      <z-icon zType="bold" />
    </z-toggle>
  `,
})
export class ZardDemoToggleDisabledComponent {}