Class Toggle
This component generates a button that when clicked toggle class on a target element anywhere in the DOM.
| Example | Code |
|---|---|
Lorem ipsum |
<as-class-toggle button-class="btn btn-outline" button-text="Toggle" target-element=".test" target-class="open" target-state="true" icon-name="pen" icon-rotate="1turn"></as-class-toggle> |
I will pop |
<as-class-toggle button-class="btn btn-warning" button-text="Make it pop" target-element=".test2" target-class="open2" icon-name="plus" icon-rotate="0.125turn"></as-class-toggle> |
I will pop first! No, I will pop first! |
<as-class-toggle button-class="btn btn-error" button-text="Make it pop twice" target-element=".test5|.test6" target-class="open5|open5" icon-name="--as-icon-pie-chart" icon-rotate="1turn"></as-class-toggle> |
C'mon baby! |
<as-class-toggle button-class="btn btn-success" button-text="I'm a lonely button" target-element=".test3" target-class="open3"></as-class-toggle> |
I'm a star!!! |
<as-class-toggle button-class="btn btn-transparent" target-element=".test4" target-class=".open4" icon-name="--as-icon-star" icon-rotate="3turn"></as-class-toggle> |
| Property name | Description | Type |
|---|---|---|
| target-element | Required: Pipe '|' separated element list to toggle classes on. Accept any proper CSS selector. | string |
| target-class | Required: Pipe '|' separated class names (with or without leading dot) to be toggled on target-element elements. | string |
| target-state | Optional: when true target-element initiates with target-class applied. | boolean |
| button-text | Optional: text for the button | string |
| button-class | Optional: Space separated class names list to be used on the generated button | string |
| icon-name | Optional: icon name, when present generated button will contain trailing <as-icon> element displaying icon passed as attribute value. See icons here. | string |
| icon-rotate | Optional: when present it will rotate icon when target-element has target-class applied. | string |