- style
ExtJS LUX Theme Guidelines
- dana lees kunik
ExtJS LUX components design can be found at:
https://app.zeplin.io/project/5970b366bee38cf87b2de932
ExtJS LUX live components can be found at:
Specifications
Component | CSS Class | Class added with component | Screenshot | Usage Example |
|---|---|---|---|---|
Text field |
|
| 
| {
xtype: 'textfield'
} |
Search field | as-searchfield |
|  | {
xtype: 'textfield',
emptyText: 'Find',
cls: 'as-searchfield',
triggers: {
searchTrigger: {
cls: Ext.baseCSSPrefix + 'form-search-trigger',
handler: function () {
alert('Search activated');
}
}
} |
Combo box | (as-combo)
| YES |
| {
xtype: 'combo',
store: ['item1', 'item2', 'item3'],
} |
Dropdown/Menu | (as-combomenu)
| YES |
| |
Icon buttons | as-icon-btn |
|
| |
Toggle button | as-togglebutton |
|
| |
Date field | (as-date-field)
| YES |
| |
Time field | (as-time-field)
| YES |
| |
Number field | (as-number-field)
| YES |
| |
Split button | (as-split-btn)
| YES |
| |
Primary button | as-btn-primary |
|
| |
Info message box | (as-msgbox and as-msgbox-info) | YES |
| |
Help message box | (as-msgbox and as-msgbox-help) | YES |
| |
Error message box | (as-msgbox and as-msgbox-error) | YES |
| |
Warning message box | (as-msgbox and as-msgbox-warning) | YES |
| |
Default message box | (as-msgbox) | YES | ||
Tooltips |
| YES |
| |
Error tooltip | (as-tooltip-error) | YES |
| |
arning tooltip | (as-tooltip-warning) | YES |
| |
Info tooltip | (as-tooltip-info) | YES |
| |
Help tooltip | (as-tooltip-help) | YES |
| |
Tabs | N/A |
|
| |
Treepanel | N/A |
|
| |
Excel grid (https://kanasoftware.jira.com/wiki/spaces/AR/pages/745406948 ) | as-excel-grid |
|
| |
Breadcrumbs |
|
|
| |
Popover | as-popover |
|
|
Additional guidance
Content | |
|---|---|
Accessibility | |
Mobile | |
Best practices | |
Related |