ExtJS LUX components design can be found at:
https://app.zeplin.io/project/5970b366bee38cf87b2de932
ExtJS LUX live components can be found at:
🧐 Specifications
Component | Class to use | 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) added automatically |  | {
xtype: 'combo',
store: ['item1', 'item2', 'item3'],
}
|
Dropdown/Menu | (as-combomenu) added automatically |  | {
xtype: 'combo',
showSplitter: false,
editable: false,
store: ['item1', 'item2', 'item3'],
}
|
Icon buttons | as-icon-btn |  | |
Toggle button | as-togglebutton |  | |
Date field | (as-date-field) added automatically |  | {
xtype: 'datefield'
}
|
Time field | (as-time-field) added automatically |  | {
xtype: 'timefield'
}
|
Number field | as-number-field |  | |
Split button | as-split-btn |  | |
Primary button | as-btn-primary |  | {
xtype: 'button',
text : 'Submit',
cls: 'as-btn-primary'
}
|
Info message box | as-msgbox and as-msgbox-info |  | |
Help message box | as-msgbox and as-msgbox-help | ||
Error message box | as-msgbox and as-msgbox-error |  | |
Warning message box | as-msgbox and as-msgbox-warning |  | |
Default message box | as-msgbox |  | |
Tooltips |   | ||
Error tooltip | as-tooltip-error |  | |
Warning tooltip | as-tooltip-warning |  | |
Info tooltip | as-tooltip-info |  | |
Help tooltip | as-tooltip-help |  | |
📐 Additional guidance
Content | |
|---|---|
Accessibility | |
Mobile | |
Best practices | |
Related |