Modal

A full-screen modal.

Props

• modelValue boolean, v-model — whether the modal is currently shown

Slots

• default — body content
• header — header content
• footer — footer content

Methods

• show — show the modal
• hide — hide the modal

CSS Variables

• --jskos-vue-modal-bgColor — background color for header and body of the modal
• --jskos-vue-modal-minWidth — minimum width of the modal. Set this value to var(--jskos-vue-modal-maxWidth) to have a consistently sized full-screen modal.
• --jskos-vue-modal-maxWidth — maximum width of the modal
• --jskos-vue-modal-minHeight — minimum height of the modal. Set this value to var(--jskos-vue-modal-maxHeight) to have a consistently sized full-screen modal.
• --jskos-vue-modal-maxHeight — maximum height of the modal
• --jskos-vue-modal-zIndexBase — base value for z-index

Examples

Two different ways to show/hide modals

<template>
  <button v-on:click="modalShown = true">Show Modal via v-model value</button>
  <button v-on:click="showTestModal">Show Modal via method</button>
  <modal
    v-model="modalShown"
    ref="testModal">
    <template v-slot:header><h1>Test Header</h1></template>
    <template v-slot:footer>Test Footer</template>
    <!-- Note that by default, there is no padding or margins for the content div. -->
    <div style="padding: 10px;">Test Content</div>
  </modal>
</template>

<script setup>
import { Modal } from "jskos-vue"
import { ref } from "vue"

const modalShown = ref(false)
const testModal = ref()
const showTestModal = () => {
  testModal.value.show()
}
</script>

Modal with tabs and fixed size

<template>
  <button v-on:click="tabsModalShown = true">Show Modal</button>
  <modal
    v-model="tabsModalShown"
    style="--jskos-vue-modal-minWidth: var(--jskos-vue-modal-maxWidth); --jskos-vue-modal-minHeight: var(--jskos-vue-modal-maxHeight);">
    <template v-slot:header><h1>Test Header</h1></template>
    <template v-slot:footer>Test Footer</template>
    <tabs style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
      <tab title="Tab 1">
        <p>Because the "Tabs" component changes dimensions with the tab content, we fixate <code>minWidth</code> and <code>minHeight</code> via CSS variables.</p>
      </tab>
      <tab title="Tab 2 with long title">
        <p>Nothing to see here.</p>
      </tab>
      <tab title="Tab 3 with longer title and scrolling content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
      </tab>
    </tabs>
  </modal>
</template>

<script setup>
import { Modal } from "jskos-vue"
import { ref } from "vue"
// Include jskos-vue-tabs with necessary CSS
import { Tabs, Tab } from "jskos-vue-tabs"
import "jskos-vue-tabs/dist/style.css"

const tabsModalShown = ref(false)
</script>