Truchastic UI

CSS Library based on WebComponents | Inspired on Elastic UI and Chakra UI

Components

Buttons

<tui-button>btn</tui-button>
Attribute Type Values
variant string primary danger success warning

Primary Filled Empty
Danger Filled Empty
Success Filled Empty
Warning Filled Empty

Modal


Attribute Type Values
size string default: md sm md xl

<tui-button variant="primary" onclick="togglemodal('open')"> Open </tui-button>

<tui-modal id="modal" >
<tui-modal-header>
<tui-modal-title> Modal Title </tui-modal-title>
<span style="cursor:pointer" onclick="togglemodal('close')" > x </span>
</tui-modal-header>
<tui-modal-body>
Body
</tui-modal-body>
<tui-modal-footer>
<tui-hstack justifyContent="flex-end" >
<tui-button variant="danger" onclick="togglemodal('close')">
Cancel
</tui-button>
<tui-button variant="primary" onclick="togglemodal('close')" >
Ok
</tui-button>
</tui-hstack>
</tui-modal-footer>
</tui-modal>

<script>
function togglemodal(action) {
if (action === 'open') {
let modal = document.getElementById('modal'); modal.setAttribute('show', 'true');
} else if (action === 'close') {
let modal = document.getElementById('modal'); modal.removeAttribute('show', 'false');
}
</script>

Open Modal xl Modal Title
x
Body Cancel
Ok Open Modal md Medium Modal Title
x
Body Cancel
Ok Open Modal sm Small Modal Title
x
Body Cancel
Ok

Cards

⚠️ Docs under construction ⚠️

Card header

Aenean malesuada nibh sed diam facilisis fringilla. Curabitur efficitur risus ac gravida volutpat. Quisque in ultrices libero. Fusce congue enim in lacus posuere finibus. Quisque eu imperdiet lectus. Mauris hendrerit congue libero, congue condimentum urna varius ac. Nulla scelerisque libero sed pretium gravida.

Card header

Aenean malesuada nibh sed diam facilisis fringilla. Curabitur efficitur risus ac gravida volutpat. Quisque in ultrices libero. Fusce congue enim in lacus posuere finibus. Quisque eu imperdiet lectus. Mauris hendrerit congue libero, congue condimentum urna varius ac. Nulla scelerisque libero sed pretium gravida.

Form Control

⚠️ Docs under Construction ⚠️

String Number

Variants

Default Info Warning Danger Success