Description
Available Buttons
Buttons are <a> with the class
tx-button. Furthermore there are 4 different types of buttons :
remove actions have the additional class:
tx-button-remove
modifying or editing buttons have the additional class:
tx-button-modify
create actions have the additional class:
tx-button-create
create actions have the additional class:
tx-button-generic
- Remove
- Create
- Modify
- Generic
e.g.
<a class="tx-button tx-button-remove" href="#" >remove</a>
Buttons have 2 visual states: inactive and active. Add the class
tx-inactive to make a button visually inactive.
- Remove
- Create
- Modify
- Generic
e.g.
<a class="tx-button tx-button-remove tx-inactive" href="#" >remove</a>
Icons
Icons are <a> with the class
tx-icon. e.g.There are 4 different type of icons. These icons have an active and inactive state (in case of toggles on/off)
active
- Delete
- Ok
- Search
- Edit
- Table
e.g.
<a class="tx-icon tx-icon-delete" href="#">Delete</a>
inactive
- Delete
- Ok
- Search
- Edit
- Table
e.g.
<a class="tx-icon tx-icon-delete tx-inactive" href="#">Delete</a>
The following paragraphs describes the available icons:
Remove
- Delete
<a class="tx-icon tx-icon-delete tx-inactive" href="#">delete</a>
Create
- Ok
<a class="tx-icon tx-icon-ok" href="#">ok</a>
- Plus
<a class="tx-icon tx-icon-plus" href="#">plus</a>
Modify
- Edit
<a class="tx-icon tx-icon-modify" href="#">modify</a>
Generic
- Search
<a class="tx-icon tx-icon-search" href="#">search</a>
- Site chooser
<a class="tx-icon tx-icon-sitechooser" href="#">sitechooser</a>
- User
<a class="tx-icon tx-icon-user" href="#">user</a>
- Close
<a class="tx-icon tx-icon-close" href="#">close</a>
- Forward
<a class="tx-icon tx-icon-forward" href="#">forward</a>
- Back
<a class="tx-icon tx-icon-back" href="#">back</a>
- Zoom in
<a class="tx-icon tx-icon-zoomin" href="#">zoomin</a>
- Zoom out
<a class="tx-icon tx-icon-zoomout" href="#">zoomout</a>
Available Toggle buttons
There are also
toggles available, which are <a>. These buttons are defined by using the class
tx-icon. Toggle buttons are switches between to states (on/off state). There are toggle buttons available for representing resources as lists, trees and thumbnails. Futhermore there are toggle buttons for choosing a size of a thumbnail.
On (clickable)
- Table
<a class="tx-icon tx-icon-list-on" href="#">list-on</a>
- Thumbnail
<a class="tx-icon tx-icon-thumbnail-on" href="#">thumbnail-on</a>
- Tree
<a class="tx-icon tx-icon-tree-on" href="#">tree-on</a>
- Size 1
<a class="tx-icon tx-icon-size1-on" href="#">size1-on</a>
- Size 2
<a class="tx-icon tx-icon-size2-on" href="#">size2-on</a>
- Size 3
<a class="tx-icon tx-icon-size3-on" href="#">size3-on</a>
Off (select)
- Table
<a class="tx-icon tx-toggle-list-off" href="#">list</a>
- Thumbnail
<a class="tx-icon tx-toggle-thumbnail-off" href="#">thumbnail</a>
- Tree
<a class="tx-icon tx-toggle-tree-off" href="#">tree</a>
- Size 1
<a class="tx-icon tx-toggle-size1-off" href="#">size1</a>
- Size 2
<a class="tx-icon tx-toggle-size2-off" href="#">size2</a>
- Size 3
<a class="tx-icon tx-toggle-size3-off" href="#">size3</a>
Various icons / buttons
- Alert
<a class="tx-icon tx-icon-alert" href="#">alert</a>
- Drag Icon
<a class="tx-icon tx-icon-drag" href="#">drag</a>
- Down
<a class="tx-icon tx-icon-down" href="#">down</a>
- Up
<a class="tx-icon tx-icon-up" href="#">up</a>
- Right
<a class="tx-icon tx-icon-right" href="#">right</a>
- Left
<a class="tx-icon tx-icon-left" href="#">left</a>
- Down
<a class="tx-icon tx-icon-down-inverse" href="#">downinverse</a>
- Up
<a class="tx-icon tx-icon-up-inverse" href="#">upinverse</a>
- Right
<a class="tx-icon tx-icon-right-inverse" href="#">rightinverse</a>
- Left
<a class="tx-icon tx-icon-left-inverse" href="#">leftinverse</a>