Supported leonardo-ui components
The following leonardo-ui components have ready-made code snippets that can be inserted from the Insert dialog in the Widget editor.
Supported components
| Name |
Code |
| LUI Button |
<lui-button>Default</lui-button>
|
| LUI Button (Success) |
<lui-button x-variant="success">Success</lui-button>
|
| LUI Button (Warning) |
<lui-button x-variant="warning">Warning</lui-button>
|
| LUI Button (Error) |
<lui-button x-variant="error">Error</lui-button>
|
| LUI Button group |
<div class="lui-buttongroup">
<button class="lui-button">
First button
</button>
<button class="lui-button">
Second button
</button>
<button class="lui-button">
Third button
</button>
</div>
|
| LUI Checkbox |
<label class="lui-checkbox">
<input class="lui-checkbox__input" type="checkbox" />
<div class="lui-checkbox__check-wrap">
<span class="lui-checkbox__check"></span>
<span class="lui-checkbox__check-text">Label</span>
</div>
</label>
|
| LUI Input field |
<input class="lui-input"/>
|
| LUI Input group |
<div class="lui-input-group">
<button class="lui-input-group__item lui-input-group__button lui-button">
<span class="lui-button__icon lui-icon lui-icon--expression"></span>
</button>
<input class="lui-input-group__item lui-input-group__input lui-input"/>
<button class="lui-input-group__item lui-input-group__button lui-button">
<span class="lui-button__icon lui-icon lui-icon--expression"></span>
</button>
</div>
|
| LUI Radio button |
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" name="myradio" value="1" checked>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">First button</span>
</div>
</label>
|
| LUI Select |
<lui-select x-model="value">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</lui-select>
|
| LUI Switch |
<div class="lui-switch">
<label class="lui-switch__label" >
<input type="checkbox" class="lui-switch__checkbox">
<span class="lui-switch__span">
<div class="lui-switch__inner"></div>
<div class="lui-switch__switch" ></div>
</span>
</label>
</div>
|
Example
The following example will insert all leonardo-ui components in a widget. Add the code directly into the HTML editor.
<h2>Single Buttons:</h2>
<lui-button>Default</lui-button>
<lui-button x-variant="success">Success</lui-button>
<lui-button x-variant="warning">Warning</lui-button>
<lui-button x-variant="error">Error</lui-button>
<hr>
<h2>Button Group</h2>
<div class="lui-buttongroup">
<button class="lui-button">
First button
</button>
<button class="lui-button">
Second button
</button>
<button class="lui-button">
Third button
</button>
</div>
<hr>
<h2>Input</h2>
<input class="lui-input">
<hr>
<h2>Input Group</h2>
<div class="lui-input-group">
<button class="lui-input-group__item lui-input-group__button lui-button">
<span class="lui-button__icon lui-icon lui-icon--expression"></span>
</button>
<input class="lui-input-group__item lui-input-group__input lui-input">
<button class="lui-input-group__item lui-input-group__button lui-button">
<span class="lui-button__icon lui-icon lui-icon--expression"></span>
</button>
</div>
<hr>
<h2>Checkbox</h2>
<label class="lui-checkbox">
<input class="lui-checkbox__input" type="checkbox">
<div class="lui-checkbox__check-wrap">
<span class="lui-checkbox__check"></span>
<span class="lui-checkbox__check-text">Label</span>
</div>
</label>
<hr>
<h2>Radio Button</h2>
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" name="myradio" value="1" checked="">
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">First button</span>
</div>
</label>
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" name="myradio" value="2" checked="">
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Second button</span>
</div>
</label>
<hr>
<h2>Select</h2>
<lui-select x-model="value">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</lui-select>
<hr>
<h2>Switch</h2>
<div class="lui-switch">
<label class="lui-switch__label">
<input type="checkbox" class="lui-switch__checkbox">
<span class="lui-switch__span">
<div class="lui-switch__inner"></div>
<div class="lui-switch__switch"></div>
</span>
</label>
</div>
Result:
