packages/eui/packages/components/eui-slide-toggle/eui-slide-toggle.component.ts
Slide toggle component that can be used as a standalone toggle or within reactive forms. Supports custom icons for on/off states and various size/variant options through BaseStatesDirective.
ControlValueAccessor
changeDetection | ChangeDetectionStrategy.OnPush |
HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiInfo euiWarning euiSuccess euiDanger euiAccent euiVariant euiSizeS euiSizeM euiSizeL euiSizeXL euiSizeVariant
|
selector | eui-slide-toggle |
imports |
ReactiveFormsModule
EUI_ICON
|
templateUrl | ./eui-slide-toggle.component.html |
styleUrl | ./eui-slide-toggle.scss |
Properties |
|
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
constructor()
|
disabled |
Type : boolean
|
Default value : false
|
Whether the toggle is disabled |
iconSvgFillColorOff |
Type : string
|
Default value : 'neutral'
|
Fill color for the OFF state icon |
iconSvgFillColorOn |
Type : string
|
Default value : 'neutral'
|
Fill color for the ON state icon |
iconSvgNameOff |
Type : string
|
Name of the icon to display when toggle is OFF |
iconSvgNameOn |
Type : string
|
Name of the icon to display when toggle is ON |
id |
Type : string
|
Default value : `eui-slide-toggle-${uniqueId()}`
|
Unique identifier for the toggle |
isChecked |
Type : boolean
|
Default value : false
|
Current checked state of the toggle |
slideToggleChange |
Type : EventEmitter
|
Event emitted when toggle state changes |
class |
Type : string
|
CSS classes applied to the host element |
Public onFocusOut |
onFocusOut()
|
Handles focus out event Notifies form control of touch event
Returns :
void
|
Public registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
Implements ControlValueAccessor Registers change handler
Parameters :
Returns :
void
|
Public registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
Implements ControlValueAccessor Registers touch handler
Parameters :
Returns :
void
|
Public setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
Implements ControlValueAccessor Updates the toggle's disabled state
Parameters :
Returns :
void
|
Public toggle |
toggle()
|
Toggles the current state if not disabled Emits the new state and notifies form control
Returns :
void
|
Public writeValue | ||||||
writeValue(value: boolean)
|
||||||
Implements ControlValueAccessor Updates the toggle's checked state
Parameters :
Returns :
void
|
Public checkboxControl |
Default value : new FormControl()
|
Form control for the toggle when used in reactive forms |
cssClasses |
getcssClasses()
|
CSS classes applied to the host element
Returns :
string
|