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:

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?