Components for your Toddle projects
Kvalifik Toddle UI Components
Button
One button component to rule them all. Use the 4 attributes and 2 slots to create a total of 360 button layout variations.
Attributes:
- Text
- is-secondary (yes/no, true/false)
- Color (blue, purple, pink, red, yellow, lime, green, teal, grey)
- Stretch (yes/no, true/false)
- Size (xs, sm, base(default), lg, xl)
Icons:
- Insert icons in the default slot (right) or 'left-icon' slot for left
- 24px .svg with fill or stroke color set to 'currentColor')
- Recommended icon set Tabler Icons set to size = 24px, stroke = 2px, color = currentColor
Examples
Color options
Secondary
Size options
Modal
Click the button below to open the modal component. This component.
Use attributes to:
- define header and body text,
- Set close icon visibility
- Show or hide action button
- Set button styling
The 'show' formula is used to open and close the modal.
Modal has the following events:
- closeModal (triggered when clicking the close icon or the background behind the modal)
- clickAccept (triggered when accept button is clicked)
- clickDecline (triggered when decline button is clicked)
Inputs (text based)
Native input and textarea elements with hover and focused states.
Inputs (checkbox)
Native checkbox element.
Select
Native select element.
You can add options inside either by inserting comma-separated text in the options attribute e.g. "Cheesecake,Chocolate Brownie,Apple Pie,Ice Cream,Strawberry Pudding"
or by inserting <option> elements in the component slot manually or using a repeat function.
List with avatar and status
List compact
Tabs
Cards
Square card element with photo, title, subtitle, and label as attribute options.
Use comma-separated text to add multiple labels.
Card-base
A simple card wrapper with a slot to insert anything.