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.

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.

Result: