ptcs-toggle-button¶
Visual¶
Overview¶
A toggle-button can be in an on or off state. When the toggle-button is engaged, it toggles a state. The toggle-button uses the ptcs-behavior-binary/ptcs-behavior-binary.html behavior.
Usage Examples¶
Basic Usage¶
<ptcs-toggle-button variable="{{show}}" label="Show"></ptcs-toggle-button>
Assigns the variable show to true when the toggle-button state is on, and to false when it is off.
Start in on state (checked)¶
<ptcs-toggle-button variable="{{show}}" label="Show" checked></ptcs-toggle-button>
Explicit variable values¶
<ptcs-toggle-button variable="{{tool}}" label="Use tool" value-on="knife" value-off="fork"></ptcs-toggle-button>
Assigns the variable tool to "knife" whenever the toggle-button is on and "fork" otherwise.
Component API¶
Properties¶
| Property | Type | Description | Default | Triggers a changed event |
|---|---|---|---|---|
| disabled | Boolean | Disables the toggle-button | false | No |
| label | String | The displayed label | "" | No |
| labelalign | String | Determines the position of the label relative to the toggle-button: left or right |
"left" | No |
| labelMaxWidth | String | The maximum width of the label | No | |
| state | Boolean | The current state. The state is on when set to true and off when set to false. | No | |
| tooltip | String | The tooltip that appears when hovering over the checkbox | "" | No |
| tooltipIcon | String | The icon for the tooltip | "" | No |
| valueOff | any | The value that the toggle-button assigns to variable when the toggle-button is turned off. |
false | No |
| valueOn | any | The value that the toggle-button assigns to variable when the toggle-button is turned on. |
true | No |
| variable | any | The variable that the toggle-button monitors and assigns | No |
Methods¶
No methods
Events¶
| Name | Data | Description |
|---|---|---|
| checked-changed | {checked} | Generated when the state of the toggle button changes |
Styling¶
The Parts of a Component¶
| Part | Description |
|---|---|
| label | The container that contains the label |
| rectangle | The rectangle element containing the movable switch |
| oval | The movable on/off switch of the toggle-button |
State attributes¶
| Attribute | Description | Part |
|---|---|---|
| checked | Current state (on: checked = true, off: checked = false) | :host |
| disabled | Is the checkbox disabled? | :host |
| label | The displayed label | :host, label |
| labelalign | The alignment of the button label. You can set it to left or right. The default is left. | :host |