A basic toggle
The example below shows a couple of simple Toggle component instances.
Please note that the Toggle component reserves the label pattern id for setting the toggle's label. It's not obligatory to use this pattern id in your toggle skin template composition.
OUTPUT
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="toggleFill" type="solid">
<color>0x555555</color>
</fill>
<fill style="toggleDefault" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xdddddd</color>
</fill>
<fill style="toggleFocused" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xcc9944</color>
</fill>
<textformat style="toggleText">
<align>left</align>
<autosize>0</autosize>
<color>0x555555</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
<textformat style="toggleTextOver">
<color>0x777777</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer template="toggleSkinOff" width="100%" height="100%">
<box width="16" height="16" fill="toggleDefault" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleText">___label___</textblock>
</composer>
<composer template="toggleSkinOffOver" width="100%" height="100%">
<box width="16" height="16" fill="toggleFocused" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleTextOver">___label___</textblock>
</composer>
<composer template="toggleSkinOn" width="100%" height="100%">
<box width="16" height="16" fill="toggleDefault" rounded="4"/>
<box x="2" y="2" width="12" height="12" fill="toggleFill" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleText">___label___</textblock>
</composer>
<composer template="toggleSkinOnOver" width="100%" height="100%">
<box width="16" height="16" fill="toggleFocused" rounded="4"/>
<box x="2" y="2" width="12" height="12" fill="toggleFill" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleTextOver">___label___</textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<toggle x="148" y="70" width="144" height="20" skinon="toggleSkinOn" skinonover="toggleSkinOnOver" skinoff="toggleSkinOff" skinoffover="toggleSkinOffOver" interactive="1">sample toggle</toggle>
<toggle x="348" y="70" width="140" height="20" skinon="toggleSkinOn" skinonover="toggleSkinOnOver" skinoff="toggleSkinOff" skinoffover="toggleSkinOffOver" interactive="1">I like this.</toggle>
</composer>
<composer>
<style>
<fill style="toggleFill" type="solid">
<color>0x555555</color>
</fill>
<fill style="toggleDefault" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xdddddd</color>
</fill>
<fill style="toggleFocused" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xcc9944</color>
</fill>
<textformat style="toggleText">
<align>left</align>
<autosize>0</autosize>
<color>0x555555</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
<textformat style="toggleTextOver">
<color>0x777777</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer template="toggleSkinOff" width="100%" height="100%">
<box width="16" height="16" fill="toggleDefault" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleText">___label___</textblock>
</composer>
<composer template="toggleSkinOffOver" width="100%" height="100%">
<box width="16" height="16" fill="toggleFocused" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleTextOver">___label___</textblock>
</composer>
<composer template="toggleSkinOn" width="100%" height="100%">
<box width="16" height="16" fill="toggleDefault" rounded="4"/>
<box x="2" y="2" width="12" height="12" fill="toggleFill" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleText">___label___</textblock>
</composer>
<composer template="toggleSkinOnOver" width="100%" height="100%">
<box width="16" height="16" fill="toggleFocused" rounded="4"/>
<box x="2" y="2" width="12" height="12" fill="toggleFill" rounded="4"/>
<textblock x="20" width="100%" height="100%" textformat="toggleTextOver">___label___</textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<toggle x="148" y="70" width="144" height="20" skinon="toggleSkinOn" skinonover="toggleSkinOnOver" skinoff="toggleSkinOff" skinoffover="toggleSkinOffOver" interactive="1">sample toggle</toggle>
<toggle x="348" y="70" width="140" height="20" skinon="toggleSkinOn" skinonover="toggleSkinOnOver" skinoff="toggleSkinOff" skinoffover="toggleSkinOffOver" interactive="1">I like this.</toggle>
</composer>
Skin Attributes
Skin attributes that can be set on a Toggle component.
| Attribute name | Description |
|---|---|
| skinoff | The default skin template for the off state of Toggle. |
| skinoffover | The rollover state skin template for the off state of Toggle. |
| skinon | The default skin template for the on state of Toggle. |
| skinonover | The rollover state skin template for the on state of Toggle. |
Reserved Pattern IDs
Reserved pattern IDs used in Toggle template composition.
| Pattern ID | Description |
|---|---|
| label | The label of the Toggle. |
Applying Styles
Like most input components, the only style attribute supported for Toggle is filter.
| Style type | Attribute name | Description |
|---|---|---|
| filter | filter or filters | The filter(s) applied on the Toggle. |
See the SMAF reference for more information on the Toggle component.
There are no comments on this page. [Add comment]