Modal — Component Storybook

LIVE PREVIEW 3

modal(id=gallery-modal-sm, title=Modal (sm), size=sm)

modal(id=gallery-modal-md, title=Modal (md), size=md)

modal(id=gallery-modal-lg, title=Modal (lg), size=lg)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 1

Name	Type	Default
`id`	`str`	—

PROPS — OPTIONAL 8

Name	Type	Default
`title`	`Optional[str]`	—
`size`	`str`	md
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_header`	`str`	—
`slot_body`	`str`	—
`slot_footer`	`str`	—
`slot_close`	`str`	—

ACCESSIBILITY 2

Requirement	Element	Attribute	Value
Modal must have role=dialog	`div`	`role`	dialog
Modal must have aria-modal=true	`div`	`aria-modal`	true

AVAILABLE SLOTS 4

slot_header slot_body slot_footer slot_close

CSS VARIABLES 24

--border --card --card-foreground --color-bg-card --color-bg-subtle --color-border --color-border-subtle --color-text --color-text-muted --duration-fast --duration-normal --ease-out --font-semibold --foreground --radius --radius-md --radius-xl --shadow-xl --space-2 --space-3 --space-4 --space-5 --space-6 --text-lg

TEMPLATE SOURCE

modal.html

<div class="{{ css_prefix }}modal-backdrop" data-theme-modal="{{ id }}" style="display:none;">
    <div class="{{ css_prefix }}modal {{ css_prefix }}modal-{{ size }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
         role="dialog"
         aria-modal="true"
         {% if title %}aria-labelledby="{{ id }}-title"{% endif %}
         {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
        {% if slot_close %}
        {{ slot_close|safe }}
        {% else %}
        <button class="{{ css_prefix }}modal-close" data-theme-modal-close aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>
        {% endif %}
        {% if slot_header %}
        <div class="{{ css_prefix }}modal-header">
            {{ slot_header|safe }}
        </div>
        {% elif title %}
        <div class="{{ css_prefix }}modal-header">
            <h2 class="{{ css_prefix }}modal-title" id="{{ id }}-title">{{ title }}</h2>
        </div>
        {% endif %}
        <div class="{{ css_prefix }}modal-body">
            {% if slot_body %}{{ slot_body|safe }}{% elif body %}{{ body }}{% endif %}
        </div>
        {% if slot_footer %}
        <div class="{{ css_prefix }}modal-footer">
            {{ slot_footer|safe }}
        </div>
        {% endif %}
    </div>
</div>