{% load theme_tags theme_components static %} Theme Gallery {% theme_head include_js=True %}

Theme Gallery

{# ---- Button ---- #}

Button

Variants

{% theme_button "Primary" variant="primary" %} {% theme_button "Secondary" variant="secondary" %} {% theme_button "Destructive" variant="destructive" %} {% theme_button "Ghost" variant="ghost" %} {% theme_button "Link" variant="link" %}

Sizes

{% theme_button "Small (sm)" variant="primary" size="sm" %} {% theme_button "Medium (md)" variant="primary" size="md" %} {% theme_button "Large (lg)" variant="primary" size="lg" %}
{# ---- Card ---- #}

Card

{% theme_card title="Card Title" footer="Card footer" %} {% theme_card title="No Footer" %}
{# ---- Alert ---- #}

Alert

{% theme_alert "This is a default alert." variant="default" title="Default" %} {% theme_alert "Operation successful!" variant="success" title="Success" %} {% theme_alert "Please be careful." variant="warning" title="Warning" %} {% theme_alert "Something went wrong." variant="destructive" title="Destructive" %} {% theme_alert "This alert can be dismissed." variant="default" dismissible=True %}
{# ---- Badge ---- #}

Badge

{% theme_badge "Default" variant="default" %} {% theme_badge "Secondary" variant="secondary" %} {% theme_badge "Success" variant="success" %} {% theme_badge "Warning" variant="warning" %} {% theme_badge "Destructive" variant="destructive" %}
{# ---- Input ---- #}

Input

{% theme_input "gallery_text" label="Text Input" placeholder="Enter text..." type="text" %} {% theme_input "gallery_email" label="Email" placeholder="you@example.com" type="email" %} {% theme_input "gallery_password" label="Password" placeholder="Enter password" type="password" %}
{# ---- Modal ---- #}

Modal

sm {% theme_modal id="gallery-modal-sm" title="Small Modal" size="sm" %}
md {% theme_modal id="gallery-modal-md" title="Medium Modal" size="md" %}
lg {% theme_modal id="gallery-modal-lg" title="Large Modal" size="lg" %}
{# ---- Dropdown ---- #}

Dropdown

{% theme_dropdown id="gallery-dd-left" label="Dropdown (left)" align="left" %} {% theme_dropdown id="gallery-dd-right" label="Dropdown (right)" align="right" %}
{# ---- Tabs ---- #}

Tabs

{% theme_tabs id="gallery-tabs" tabs=tab_data active=0 %}
{# ---- Table ---- #}

Table

{% theme_table headers=table_headers rows=table_rows variant="default" caption="Default Table" %} {% theme_table headers=table_headers rows=table_rows variant="striped" caption="Striped Table" %} {% theme_table headers=table_headers rows=table_rows variant="hover" caption="Hover Table" %}
{# ---- Pagination ---- #}

Pagination

{% theme_pagination current_page=3 total_pages=10 url_pattern="?page={}" %}
{# ---- Select ---- #}

Select

{% theme_select "gallery_select" label="Select Field" options=select_options placeholder="Choose..." %}
{# ---- Textarea ---- #}

Textarea

{% theme_textarea "gallery_textarea" label="Textarea" placeholder="Write something..." rows=4 %}
{# ---- Checkbox ---- #}

Checkbox

{% theme_checkbox "gallery_cb1" label="Accept terms" description="You agree to our terms." %} {% theme_checkbox "gallery_cb2" label="Subscribe to newsletter" %}
{# ---- Radio ---- #}

Radio

{% theme_radio "gallery_radio" label="Choose a size" options=radio_options selected="md" %}
{# ---- Breadcrumb ---- #}

Breadcrumb

{% theme_breadcrumb items=breadcrumb_items separator="/" %} {% theme_breadcrumb items=breadcrumb_items separator=">" %}
{# ---- Avatar ---- #}

Avatar

{% theme_avatar name="Jane Doe" size="sm" %} {% theme_avatar name="Jane Doe" size="md" %} {% theme_avatar name="Jane Doe" size="lg" %}
{# ---- Toast ---- #}

Toast

{% theme_toast "Success toast" variant="success" %} {% theme_toast "Warning toast" variant="warning" %} {% theme_toast "Error toast" variant="error" %} {% theme_toast "Info toast" variant="info" %}
{# ---- Progress ---- #}

Progress

{% theme_progress value=25 max=100 label="25%" %} {% theme_progress value=50 max=100 label="50%" %} {% theme_progress value=75 max=100 label="75%" %} {% theme_progress value=100 max=100 label="100%" %} {% theme_progress label="Indeterminate" %}
{# ---- Skeleton ---- #}

Skeleton

{% theme_skeleton variant="text" width="200px" height="1rem" %} {% theme_skeleton variant="circle" width="3rem" height="3rem" %} {% theme_skeleton variant="rect" width="100%" height="6rem" %}
{# ---- Tooltip ---- #}

Tooltip

{% theme_tooltip "Top tooltip" position="top" slot_content="" %} {% theme_tooltip "Bottom tooltip" position="bottom" slot_content="" %} {% theme_tooltip "Left tooltip" position="left" slot_content="" %} {% theme_tooltip "Right tooltip" position="right" slot_content="" %}
{# ---- Nav Item ---- #}

Nav Item

{% theme_nav_item "Home" "/" active=True %} {% theme_nav_item "About" "/about/" active=False %} {% theme_nav_item "Inbox" "/inbox/" badge="5" %}
{# ---- Nav Group ---- #}

Nav Group

{% theme_nav_group "Admin" items=nav_group_items expanded=True %} {% theme_nav_group "Collapsed" items=nav_group_items expanded=False %}
{# ---- Nav ---- #}

Nav

{% theme_nav brand="MyApp" items=nav_items %}
{# ---- Sidebar Nav ---- #}

Sidebar Nav

{% theme_sidebar_nav sections=sidebar_sections %}