@innofake/b0t-switch NPM

b0t-switch

A control that allows a user to switch a value on or off.

Installation

npm install @innofake/b0t-switch

Example

<b0t-switch
  label="My Switch Value"
  data="{'id': 12345, 'name': 'Test'}"
  hint="Required"
  error="Field level error message"
  checked>
</b0t-switch>

Properties

Property	Attribute	Modifiers	Type	Default	Description
`checked`	`checked`		`boolean`	false	Indicator if the component is checked or not.
`data`	`data`		`Object`		Data associated with the component.
`disabled`	`disabled`		`boolean`	false	Indicator if the component is disabled.
`error`	`error`		`string`		An error message to guide users to correct a mistake.
`hint`	`hint`		`string`		A hint message to assist the user.
`label`	`label`		`string`		The switch label text.
`override`					The element style template.
`styles`		readonly	`CSSResult[]`

Methods

Method	Type
`focus`	`(): void`

Events

Event	Type	Description
`value-change`	`CustomEvent<{ old: Boolean; new: Boolean; }>`	Dispatched when the switch checked state is changed.
`value-changed`	`CustomEvent<{ old: Boolean; new: Boolean; }>`	Dispatched when the switch checked state is changed.

CSS Custom Properties

Property	Description
`--innofake-b0t-switch-checked-hover-knob-box-shadow`	Knob checked hover box shadow.
`--innofake-b0t-switch-checked-knob-background-color`	Knob checked background color.
`--innofake-b0t-switch-checked-track-background-color`	Track checked background color.
`--innofake-b0t-switch-disabled-knob-background-color`	Knob disabled background color.
`--innofake-b0t-switch-disabled-knob-box-shadow`	Knob disabled hover box shadow.
`--innofake-b0t-switch-disabled-track-background-color`	Track disabled background color.
`--innofake-b0t-switch-input-error-label-font-color`	Error text font color.
`--innofake-b0t-switch-input-error-label-font-family`	Error text font family.
`--innofake-b0t-switch-input-error-label-font-size`	Error text font size.
`--innofake-b0t-switch-input-error-label-font-weight`	Error text font weight.
`--innofake-b0t-switch-input-hint-label-font-color`	Hint text font color.
`--innofake-b0t-switch-input-hint-label-font-family`	Hint text font family.
`--innofake-b0t-switch-input-hint-label-font-size`	Hint text font size.
`--innofake-b0t-switch-input-hint-label-font-weight`	Hint text font weight.
`--innofake-b0t-switch-knob-background-color`	Knob background color.
`--innofake-b0t-switch-knob-box-shadow`	Knob box shadow.
`--innofake-b0t-switch-knob-height`	Knob height.
`--innofake-b0t-switch-knob-hover-box-shadow`	Knob hover box shadow.
`--innofake-b0t-switch-knob-width`	Knob width.
`--innofake-b0t-switch-label-font-color`	Label font color.
`--innofake-b0t-switch-label-font-family`	Label font family.
`--innofake-b0t-switch-label-font-size`	Label font size.
`--innofake-b0t-switch-label-font-weight`	Label font weight.
`--innofake-b0t-switch-label-spacing`	Label left margin spacing.
`--innofake-b0t-switch-track-background-color`	Track background color.
`--innofake-b0t-switch-track-border-radius`	Track border radius.
`--innofake-b0t-switch-track-height`	Track height.
`--innofake-b0t-switch-track-inset`	Track inset margins.
`--innofake-b0t-switch-track-width`	Track width.