<div class="bg-blue-900"></div>
<h1 class="font-black leading-10 text-[32px]"></h1>
<h2 class="font-black leading-[34px] text-[26px]"></h2>
<h3 class="font-black leading-[26px] text-[22px]"></h3>
<h4 class="font-bold leading-[26px] text-lg"></h4>
<h5 class="font-bold text-base"></h5>
{% from "tailwind/src/theme/button.html.twig" import button %}
Template modifiers:
{{ button({ template: "primary", textContent: "Button text" }) }}
{{ button({ template: "secondary", textContent: "Button text" }) }}
{{ button({ template: "tertiary", textContent: "Button text" }) }}
{{ button({ template: "loading" }) }}
{{ button({ template: "error", textContent: "Button text" }) }}
{{ button({ template: "success", textContent: "Button text" }) }}
Size modifiers:
{{ button({ size: "normal", textContent: "Button text" }) }}
{{ button({ size: "small", textContent: "Button text" }) }}
Props:
href?: string
name?: string
onClick?: string
overrides?: string
size?: "small" | "normal"
target?: "_blank"
template?: "primary" | "secondary" | "tertiary" | "loading" | "error" | "success"
textContent?: HTMLElement | string
type?: "button" | "submit" | "reset"
{% from "tailwind/src/theme/spinner.html.twig" import spinner %}
{{ spinner("h-10 w-10") }}
Props:
string (additional classes)
{% from "tailwind/src/theme/input.html.twig" import input %}
{{
input({
id: "inputId",
label: "Text input",
placeholder: "Napište něco"
})
}}
Error message
Error message
{{
input({
id: "inputId",
errors: ["Error message", "Error message"],
label: "Text input (error)",
placeholder: "Napište něco"
})
}}
{{
input({
id: "inputId",
label: "Text input (required)",
placeholder: "Napište něco",
required: true
})
}}
{{
input({
id: "inputId",
label: "Email input",
placeholder: "Napište něco",
type: "email"
})
}}
{{
input({
id: "inputId",
label: "Tel input",
placeholder: "+(999) 999 999 999",
type: "tel"
})
}}
{{
input({
id: "inputId",
label: "Password input",
placeholder: "Heslo",
type: "password"
})
}}
{{
input({
id: "inputId",
label: "Number input",
placeholder: "123",
type: "number",
value: "1"
})
}}
{{
input({
id: "inputId",
label: "Send input",
placeholder: "Odeslat zprávu",
type: "send"
})
}}
{{
input({
id: "inputId",
label: "Save input",
placeholder: "Ulozit",
type: "save"
})
}}
{{
input({
id: "textareaId",
label: "Textarea",
placeholder: "Napište něco",
type: "textarea"
})
}}
Props:
id: string
errors?: string[]
label?: string
name?: string
overrides?: string
placeholder?: string
readonly?: boolean
required?: boolean
size?: number
type?: "email" | "number" | "password" | "save" | "send" | "text" | "textarea" | "tel"
value?: string
{% from "tailwind/src/theme/checkbox.html.twig" import checkbox %}
{{
checkbox({
id: "checkboxInputId",
label: "Checkbox label"
})
}}
{{
checkbox({
checked: true,
id: "checkboxInputId",
label: "Checkbox checked label"
})
}}
Props:
checked?: boolean
label?: string
name?: string
onChange?: string
value?: string
{% from "tailwind/src/theme/dropdown.html.twig" import dropdown %}
<div
data-js-data="{
selectedOption: {
label: 'Default option',
value: 'option-0'
}
}"
>
{{
dropdown({
options: [
{
label: "Default option",
value "option-0",
},
{
label: "Option 1",
value: "option-1",
},
{
label: "Option 2",
value: "option-2",
},
],
selectedOption: "selectedOption"
})
}}
</div>
Props:
onChange: string (js handler name)
options: { label: string; value: string; }[]
selectedOption: string (js selected option key)
{% from "tailwind/src/theme/multiDropdown.html.twig" import multiDropdown %}
<div
data-js-data="{
selectedOptions: [],
}"
>
{{
multiDropdown({
options: [
{
label: "Option 1",
value: "option-1",
},
{
label: "Option 2",
value: "option-2",
},
],
placeholder: "Please select an option",
selectedOptions: "selectedOptions"
})
}}
</div>
Props:
onChange: string (js handler name)
options: { label: string; value: string; }[]
placeholder?: string
selectedOptions: { label: string; value: string; }[]
{% from "tailwind/src/theme/modal.html.twig" import modal %}
Modal content
<button @click="$store.modals.toggleModal('modalId')">
Trigger modal
</button>
{% set modalContent %}
Modal content
{% endset %}
{%
include "theme/modal.twig" with {
id: "modalId",
title: "Modal title"
}
%}
Props:
id: string (modal ID)
title: string
{% from "tailwind/src/theme/toast/toast.html.twig" import toast %}
<button @click="$store.toasts.showToast('error-toast')">
Trigger toast
</button>
{{
toast({
id: "error-toast",
template: "error",
timeout: 5000,
title: "Něco se nepovedlo"
})
}}
Props:
content?: HTMLElement | string
delay?: number
template?: "danger" | "success" | "warning" | "info"
timeout?: number
triggerOnMount?: boolean
{% from "tailwind/src/theme/accordion.html.twig" import accordion %}
{{
accordion([
{
answer: "Lorem ipsum dolor sit amet consectetur",
id: "sectionId1",
question: "Section 1 Question",
},
{
answer: "Lorem ipsum dolor sit amet consectetur",
id: "sectionId2",
question: "Section 2 Question",
},
{
answer: "Lorem ipsum dolor sit amet consectetur",
id: "sectionId3",
question: "Section 3 Question",
}
])
}}
Props:
sections array { answer: string; id: string; question: string; }[]
{% from "tailwind/src/theme/details.html.twig" import details %}
{{
details([
{
checked: true,
id: "details-item-1",
label: "Details item 1"
},
{
id: "details-item-2",
label: "Details item 2"
},
])
}}
Props:
items array { checked?: boolean; id: string; label: string; }[]
{% from "tailwind/src/theme/icon.html.twig" import icon %}
{{
icon({
id: "angleIcon",
overrides: "h-10 text-red-500 w-10",
})
}}
Props:
overrides?: string