ptcs-behavior-binary¶
Overview¶
A binary visual representation can be in an on or off state. When the binary UI element is activated, it sets the element to a state.
Usage Examples¶
This component is used in ptcs-checkbox and ptc-toggle-button.
The following example are for the ptcs-checkbox component:
Basic Usage¶
<ptcs-checkbox variable="{{show}}">Show</ptcs-checkbox>
Assigns the show variable to true when the checkbox state is on, and to false when the state is off.
Start in on state (checked)¶
<ptcs-checkbox variable="{{show}}" checked>Show</ptcs-checkbox>
Explicit variable values¶
<ptcs-checkbox variable="{{tool}}" value-on="knife" value-off="fork">Use tool</ptcs-checkbox>
Assigns the variable tool to "knife" whenever the checkbox is on and to "fork" when it is off.
Component API¶
Properties¶
| Property | Type | Description | Triggers a changed event |
|---|---|---|---|
| checked | Boolean | The state of the current element (on = true, off = false) | Yes |
| disabled | Boolean | Disables the element | No |
| state | Boolean | This property is similar to checked, but is not reflected in the attribute. | No |
| valueOff | any | The value that the element assigns to variable when the element is turned off. Default: false | No |
| valueOn | any | The value that the element assigns to variable when the element is turned on. Default: true | No |
| variable | any | The variable that the element monitors and assigns | Yes |
Methods¶
No methods
State attributes¶
| Attribute | Description | Part |
|---|---|---|
| checked | The element state (on = true, off = false) | :host |
| disabled | Is the element disabled? | :host |