<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Standard Components - ClanLib SDK</title> <link rel="stylesheet" media="screen" type="text/css" href="clanlib.css"/> <link rel="icon" href="gfx/favicon.png" type="image/png"/> </head> <body> <div id="content"> <h1><a href="."><img src="gfx/clanlib.png" alt="ClanLib SDK" /></a></h1> <!-- <div style="float: right;"> <a href="download.html">Download</a> : <a href="docs.html">Documentation</a> : <a href="development.html">Development</a> : <a href="donations.html">Donations</a> : <a href="http://www.rtsoft.com/clanlib">Forum</a> : <a href="contributions.html">Contributions</a> </div> --> <h2> <img src="gfx/overview.png"/>Standard components </h2> <h3>Component</h3> <p> All components inherit from CL_GUIComponent, and therefore they all share the base css properties as defined below in CL_Component section. </p> <p> <a href="../reference/CL_GUIComponent.html">CL_Component API Reference</a> </p> <h4>Available CSS Properties</h4> <pre> <table> <thead> <tr><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>minimum-width</td><td>int</td><td>0</td><td></td><td></td></tr> <tr><td>minimum-height</td><td>int</td><td>0</td><td></td><td></td></tr> <tr><td>maximum-width</td><td>int</td><td>4026531839</td><td></td><td></td></tr> <tr><td>maximum-height</td><td>int</td><td>4026531839</td><td></td><td></td></tr> <tr><td>preferred-width</td><td>int</td><td>0</td><td></td><td></td></tr> <tr><td>preferred-height</td><td>int</td><td>0</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>bg-image</td><td>string</td><td><i>none</i></td><td></td><td>Resource name of image</tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>bg-image-sizing</td><td>[tile, center, repeat, stretch]</td><td>stretch</td><td>bg-image is set</td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>bg-image-sizing-left</td><td>int</td><td>0</td><td>bg-image-sizing is repeat or stretch</td><td></tr> <tr><td>bg-image-sizing-top</td><td>int</td><td>0</td><td>bg-image-sizing is repeat or stretch</td><td></tr> <tr><td>bg-image-sizing-right</td><td>int</td><td>0</td><td>bg-image-sizing is repeat or stretch</td><td></tr> <tr><td>bg-image-sizing-bottom</td><td>int</td><td>0</td><td>bg-image-sizing is repeat or stretch</td><td></tr> <tr><td>bg-image-sizing-center-width</td><td>int</td><td>0</td><td>bg-image-sizing is repeat or stretch</td><td></tr> <tr><td>bg-image-sizing-center-height</td><td>int</td><td>0</td><td>bg-image-sizing is repeat or stretch</td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>margin-top</td><td>int</td><td>0</td><td>bg-image is not set</td><td></tr> <tr><td>margin-left</td><td>int</td><td>0</td><td>bg-image is not set</td><td></tr> <tr><td>margin-right</td><td>int</td><td>0</td><td>bg-image is not set</td><td></tr> <tr><td>margin-bottom</td><td>int</td><td>0</td><td>bg-image is not set</td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>border-top</td><td>int</td><td>0</td><td></td><td></tr> <tr><td>border-left</td><td>int</td><td>0</td><td></td><td></tr> <tr><td>border-right</td><td>int</td><td>0</td><td></td><td></tr> <tr><td>border-bottom</td><td>int</td><td>0</td><td></td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>padding-top</td><td>int</td><td>0</td><td></td><td></tr> <tr><td>padding-left</td><td>int</td><td>0</td><td></td><td></tr> <tr><td>padding-right</td><td>int</td><td>0</td><td></td><td></tr> <tr><td>padding-bottom</td><td>int</td><td>0</td><td></td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td></tr> <tr><td>bg-color</td><td>color</td><td>transparent</td><td>bg-image is not set</td><td></tr> <tr><td>border-color</td><td>color</td><td>transparent</td><td>bg-image is not set</td><td></tr> </tbody> </table> </pre> <h3>Label</h3> <a href="../reference/CL_Label.html">CL_Label API Reference</a> <pre> <table> <thead> <tr><th>Part</th><th>States</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Label</td><td><i>Normal</i>, Hot, Disabled</td><td></td></tr> </tbody> </table> </pre> <pre> <table> <thead> <tr><th>Part</th><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Label</td><td>text-color</td><td>color</td><td>black</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Label</td><td>font-weight</td><td>int or [normal, bold, bolder, light, lighter]</td><td>normal</td><td></td><td></tr> <tr><td>Label</td><td>font-size</td><td>int</td><td>-11</td><td></td><td></tr> <tr><td>Label</td><td>font-style</td><td>[<i>none</i>, italic]</td><td><i>none</i></td><td></td><td></tr> <tr><td>Label</td><td>font-family</td><td>string</td><td>Tahoma</td><td></td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Label</td><td>align</td><td>[left, center, right, justify]</td><td>left</td><td></td><td></td></tr> <tr><td>Label</td><td>vertical-align</td><td>[top, center, bottom]</td><td>center</td><td></td><td></td></tr> </tbody> </table> </pre> <h3>LineEdit</h3> <a href="../reference/CL_LineEdit.html">CL_LineEdit API Reference</a> <pre> <table> <thead> <tr><th>Part</th><th>States</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>LineEdit</td><td><i>Normal</i>, Hot, Disabled</td><td></td></tr> <tr><td>Selection</td><td><i>Normal</i>, Disabled</td><td></td></tr> <tr><td>Cursor</td><td><i>Normal</i>, Disabled</td><td></td></tr> </tbody> </table> </pre> <pre> <table> <thead> <tr><th>Part</th><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>LineEdit</td><td>text-color</td><td>color</td><td>black</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>LineEdit</td><td>font-weight</td><td>int or [normal, bold, bolder, light, lighter]</td><td>normal</td><td></td><td></tr> <tr><td>LineEdit</td><td>font-size</td><td>int</td><td>-11</td><td></td><td></tr> <tr><td>LineEdit</td><td>font-style</td><td>[<i>none</i>, italic]</td><td><i>none</i></td><td></td><td></tr> <tr><td>LineEdit</td><td>font-family</td><td>string</td><td>Tahoma</td><td></td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Selection</td><td>text-color</td><td>color</td><td>white</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Selection</td><td>font-weight</td><td>int or [normal, bold, bolder, light, lighter]</td><td>normal</td><td></td><td></tr> <tr><td>Selection</td><td>font-size</td><td>int</td><td>-11</td><td></td><td></tr> <tr><td>Selection</td><td>font-style</td><td>[<i>none</i>, italic]</td><td><i>none</i></td><td></td><td></tr> <tr><td>Selection</td><td>font-family</td><td>string</td><td>Tahoma</td><td></td><td></tr> </tbody> </table> </pre> <h3>ScrollBar</h3> <a href="../reference/CL_ScrollBar.html">CL_ScrollBar API Reference</a> <pre> <table> <thead> <tr><th>Part</th><th>States</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>ScrollBar</td><td><i>Normal</i>, Hot, Disabled</td><td></td></tr> <tr><td> </td><td></td><td></td></tr> <tr><td>ScrollButton.Up</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for vertical scrollbars</td></tr> <tr><td>ScrollButton.Down</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for vertical scrollbars</td></tr> <tr><td>ScrollTrack.Up</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for vertical scrollbars</td></tr> <tr><td>ScrollTrack.Down</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for vertical scrollbars</td></tr> <tr><td>ScrollThumb.Vertical</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for vertical scrollbars</td></tr> <tr><td> </td><td></td><td></td></tr> <tr><td>ScrollButton.Left</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for horizontal scrollbars</td></tr> <tr><td>ScrollButton.Right</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for horizontal scrollbars</td></tr> <tr><td>ScrollTrack.Left</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for horizontal scrollbars</td></tr> <tr><td>ScrollTrack.Right</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for horizontal scrollbars</td></tr> <tr><td>ScrollThumb.Horizontal</td><td><i>Normal</i>, Hot, Disabled, Pressed</td><td>Only available for horizontal scrollbars</td></tr> </tbody> </table> </pre> <pre> <table> <thead> <tr><th>Part</th><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> </tbody> </table> </pre> <p>Note: ScrollButton parts use preferred size, and should be set.</p> <h3>PushButton</h3> <a href="../reference/CL_PushButton.html">CL_PushButton API Reference</a> <pre> <table> <thead> <tr><th>Part</th><th>States</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Button</td><td><i>Normal</i>, Hot, Pressed, Defaulted, Disabled, Flat</td><td></td></tr> <tr><td>Focus</td><td><i>Normal</i></td><td></td></tr> </tbody> </table> </pre> <pre> <table> <thead> <tr><th>Part</th><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Button</td><td>text-color</td><td>color</td><td>black</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Button</td><td>font-weight</td><td>int or [normal, bold, bolder, light, lighter]</td><td>normal</td><td></td><td></tr> <tr><td>Button</td><td>font-size</td><td>int</td><td>-11</td><td></td><td></tr> <tr><td>Button</td><td>font-style</td><td>[<i>none</i>, italic]</td><td><i>none</i></td><td></td><td></tr> <tr><td>Button</td><td>font-family</td><td>string</td><td>Tahoma</td><td></td><td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Button</td><td>align</td><td>[left, center, right, justify]</td><td>left</td><td></td><td></td></tr> <tr><td>Button</td><td>vertical-align</td><td>[top, center, bottom]</td><td>center</td><td></td><td></td></tr> </tbody> </table> </pre> <h3>ListView</h3> <a href="../reference/CL_ListView.html">CL_ListView API Reference</a> <pre> <table> <thead> <tr><th>Part</th><th>States</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>ListView</td><td><i>Normal</i></td><td></td></tr> <tr><td>Row</td><td><i>Normal</i>, Alternate</td><td><i></td></tr> <tr><td>Row_opener</td><td>Open, Closed</td><td></td></tr> <tr><td>Selection</td><td><i>Normal</i></td><td></td></tr> <tr><td>Columns_bg</td><td><i>Normal</i></td><td></td></tr> <tr><td>Column</td><td><i>Normal</i></td><td>This is only the background for the columns behind cells, not the header</td></tr> <tr><td>Cell</td><td><i>Normal</i>, Details, Icons</td><td>Details and Icons states are only available in their specific listviewmodes</td></tr> <tr><td>Icon_selection</td><td><i>Normal</i></td><td></td></tr> <tr><td>mouse_selection</td><td><i>Normal</i></td><td></td></tr> </tbody> </table> </pre> <pre> <table> <thead> <tr><th>Part</th><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Cell</td><td>font-weight</td><td>int or [normal, bold, bolder, light, lighter]</td><td>normal</td><td></td><td></td></tr> <tr><td>Cell</td><td>font-size</td><td>int</td><td>-11</td><td></td><td></td></tr> <tr><td>Cell</td><td>font-style</td><td>[<i>none</i>, italic]</td><td><i>none</i></td><td></td><td></td></tr> <tr><td>Cell</td><td>font-family</td><td>string</td><td>Tahoma</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Cell</td><td>text-color</td><td>color</td><td>black</td><td></td><td></td></tr> <tr><td>Cell</td><td>text-color-selected</td><td>color</td><td>white</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Cell</td><td>icon-color</td><td>color</td><td>white</td><td></td><td></td></tr> <tr><td>Cell</td><td>icon-color-selected</td><td>color</td><td>white</td><td></td><td></td></tr> <tr><td>Cell</td><td>icon-color-overlay</td><td>color</td><td>white</td><td></td><td></td></tr> <tr><td>Cell</td><td>icon-color-selected-overlay</td><td>color</td><td>white</td><td></td><td></td></tr> <tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Row_opener</td><td>offset-x</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details</td></tr> <tr><td>Row_opener</td><td>offset-y</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details</td></tr> <tr><td>Row</td><td>indent-width</td><td>int</td><td>20</td><td></td><td>Only in listview_mode_details</td></tr> <tr><td>Cell</td><td>opener-icon-gap</td><td>int</td><td>6</td><td></td><td>Only in listview_mode_details</td></tr> <tr><td>Cell</td><td>icon-text-gap</td><td>int</td><td>6</td><td></td><td>Only in listview_mode_details</td></tr> <tr><td>Cell</td><td>icon-offset-y</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details</td></tr> <tr><td>Cell</td><td>icon-width</td><td>int</td><td>16</td><td></td><td>Only in listview_mode_details and listview_mode_icons</td></tr> <tr><td>Cell</td><td>icon-height</td><td>int</td><td>16</td><td></td><td>Only in listview_mode_details and listview_mode_icons</td></tr> <tr><td>Cell</td><td>line-edit-offset-left</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details and listview_mode_icons</td></tr> <tr><td>Cell</td><td>line-edit-offset-top</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details and listview_mode_icons</td></tr> <tr><td>Cell</td><td>line-edit-offset-bottom</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details and listview_mode_icons</td></tr> <tr><td>Cell</td><td>line-edit-offset-right</td><td>int</td><td>0</td><td></td><td>Only in listview_mode_details and listview_mode_icons</td></tr> </tbody> </table> </pre> <p>Note: Cell and Part_opener use preferred size, and should be set.</p> <h3>ListView Header</h3> <a href="../reference/CL_ListViewHeader.html">CL_ListViewHeader API Reference</a> <pre> <table> <thead> <tr><th>Part</th><th>States</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Listview_header</td><td><i>Normal</i></td><td></td></tr> <tr><td>Columnheader</td><td><i>Normal</i>, Pressed, Hot</td><td></td></tr> </tbody> </table> </pre> <pre> <table> <thead> <tr><th>Part</th><th>Property</th><th>Type</th><th>Default</th><th>Condition</th><th>Explanation</th></tr> </thead> <tbody> <tr><td>Listview_header</td><td>text-color</td><td>color</td><td>black</td><td></td><td></tr> <tr><td>Listview_header</td><td>font-weight</td><td>int or [normal, bold, bolder, light, lighter]</td><td>normal</td><td></td><td></tr> <tr><td>Listview_header</td><td>font-size</td><td>int</td><td>-11</td><td></td><td></tr> <tr><td>Listview_header</td><td>font-style</td><td>[<i>none</i>, italic]</td><td><i>none</i></td><td></td><td></tr> <tr><td>Listview_header</td><td>font-family</td><td>string</td><td>Tahoma</td><td></td><td></tr> </tbody> </table> </pre> </div> </body> </html>
