On gists

TinyModal - usage

AW

tpl.latte Raw #

{* POUZITI MODALU  2 zpusoby, inline nebo pres store mimo modal *}
        <div n:if="false" class="mx-auto max-w-lg mb-10 space-y-4">

            <h2 class="text-h3 text-msp-red">@DEV</h2>
            <h2 class="text-h4">Modaly .. nejsou videt, open buttony jsou vyple</h2>
            <tiny-modal store-id="modal1" max-width="1000px">
                <template #default="{ close }">
                    <div class="p-8">
                        CONTENT MODAL 1
                    </div>
                </template>
            </tiny-modal>
    

            <tiny-modal store-id="modal2" max-width="1000px">
                <template #default="{ close }">
                    <div class="p-8">
                        CONTENT MODAL 2
                    </div>
                </template>
            </tiny-modal>

            <tiny-modal max-width="1000px">
                <template #button="{ open }">
                    <button @click="open">Otevřít modál na přímo 3</button>
                </template>
                <template #default="{ close }">
                    <div class="p-8">
                        CONTENT MODAL 3
                    </div>
                </template>
            </tiny-modal>
            <hr />
            <h2 class="text-h4">Buttony mimo modaly</h2>


            <button @click="$store.dispatch('tinyModal/open', { id: 'modal1' })">modal 1 open</button> |
            <button @click="$store.dispatch('tinyModal/open', { id: 'modal2' })">modal 2 open</button>

        </div>