Etat Pur Design System

Modals 

<div x-data="hyva.modal()">
    <button type="button" class="btn btn-solid btn-size-lg btn-dark" @click="show('modal', $event)">
        Show Modal
    </button>

    <div x-cloak x-bind="overlay('modal')" x-spread="overlay('modal')" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex md:items-center">
        <div class="fixed inset-x-0 max-md:h-full md:container grid-layout justify-center items-center text-left z-40">
            <div x-ref="modal" role="dialog" aria-modal="true" class="
                    relative inline-block bg-white shadow-32 max-h-screen overflow-auto overscroll-y-contain h-full
                    col-span-4 sm:col-span-12 md:col-span-8 md:col-start-3
                ">
                <button type="button" @click="hide('modal')" aria-label="Label text" class="absolute top-4 right-4 z-10  btn  btn-neutral  btn-outline  btn-size-sm btn-only-icon">
                    <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>

                </button>
                Content Here
            </div>
        </div>
    </div>
</div>
 
<div x-data="hyva.modal()">
    <button type="button"
            class="btn btn-solid btn-size-lg btn-dark"
            @click="show('modal', $event)">
        Show Modal
    </button>

    <div x-cloak
        x-bind="overlay('modal')"
        x-spread="overlay('modal')"
        class="fixed inset-0 bg-black bg-opacity-50 z-50 flex md:items-center">
        <div class="fixed inset-x-0 max-md:h-full md:container grid-layout justify-center items-center text-left z-40">
            <div x-ref="modal" role="dialog" aria-modal="true"
                class="
                    relative inline-block bg-white shadow-32 max-h-screen overflow-auto overscroll-y-contain h-full
                    col-span-4 sm:col-span-12 md:col-span-8 md:col-start-3
                ">
                {% render "@template-button" with {
                    color: "neutral",
                    type: 'outline',
                    size: "sm",
                    icon_type: 'only-icon',
                    icon: {name:'heroicons--x-mark-outline'},
                    button_class: "absolute top-4 right-4 z-10",
                    custom_button_attrs:
                    [
                        {
                            'name': '@click',
                            'value': "hide('modal')"
                        },
                    ]
                } %}
                {% block content '' %}
                {{ preview_content }}
            </div>
        </div>
    </div>
</div>
 
{
  "preview_content": "Content Here"
}

No notes defined.