Skip to content

Latest commit

 

History

History
412 lines (372 loc) · 16.1 KB

modal.md

File metadata and controls

412 lines (372 loc) · 16.1 KB
Raw

Modal

Modals are dialogs that can be used for lightboxes, user notifications, or completely custom content.{.lead}

Example

To create a modal, create an element (such as an <i-button>) as a trigger and the v-model on an <i-modal> component to control its visibility. Everything inside the <i-modal> is rendered as the modal body. Optionally, you can provide a modal header and footer using slot="header" and slot="footer".

Modal Modal Header This is the modal body. Useful information goes here. Modal Footer 
<i-button @click="visible = true">Modal</i-button>
<i-modal v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
export default {
  data () {
    return {
      visible: false
    };
  }
}

Sizes

You're able to use the size modifier to control the size of your modals, using one of the available sizes: sm, md, and lg. The default size is set to md.

Small Modal  Medium Modal  Large Modal
Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer 
<i-button @click="visible = true">Small Modal</i-button>
<i-modal v-model="visible" size="sm">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button @click="visible = true">Medium Modal</i-button>
<i-modal v-model="visible" size="md">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button @click="visible = true">Large Modal</i-button>
<i-modal v-model="visible" size="lg">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
export default {
  data () {
    return {
      visible: false
    };
  }
}

Variants

Inkline includes two predefined modal styles, each serving its own semantic purpose. You can set the style of a <i-modal> using the variant property. By default, modals use the light variant.

Primary Modal  Secondary Modal  Light Modal  Dark Modal  Info Modal  Success Modal  Warning Modal  Danger Modal
Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer Modal Header This is the modal body. Useful information goes here. Modal Footer 
<i-button variant="primary" @click="visible = true">Primary Modal</i-button>
<i-modal variant="primary" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="secondary" @click="visible = true">Secondary Modal</i-button>
<i-modal variant="secondary" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="light" @click="visible = true">Light Modal</i-button>
<i-modal variant="light" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="dark" @click="visible = true">Dark Modal</i-button>
<i-modal variant="dark" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="info" @click="visible = true">Info Modal</i-button>
<i-modal variant="info" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="success" @click="visible = true">Success Modal</i-button>
<i-modal variant="success" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="warning" @click="visible = true">Warning Modal</i-button>
<i-modal variant="warning" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
<i-button variant="danger" @click="visible = true">Danger Modal</i-button>
<i-modal variant="danger" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>
export default {
  data () {
    return {
      visible: false
    };
  }
}

Component API

Here you can find a list of the various customization options you can use for the modal component as props, as well as available slots and events.

close-on-press-escape Sets whether to hide the modal component when pressing escape. Boolean true, false true value Sets the visibility of the modal component. Boolean true, false false transition Sets the transition of the modal component. String fade-in-transition, fade-in-linear-transition, zoom-in-top-transition, zoom-in-bottom-transition, zoom-in-center-transition, zoom-in-left-transition, zoom-in-right-transition zoom-in-center-transition default Slot for modal default content. header Slot for modal header content. footer Slot for modal footer content. input Emitted when visibility changes. (visible: Boolean) => {} show Emitted when modal is shown. (instance: VueComponent) => {} hide Emitted when modal is hidden. (instance: VueComponent) => {}

Sass Variables

Here you can find a list of the Sass variables you can use for the modal components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$modal-font-size $font-size $modal-font-weight $font-weight-normal $modal-line-height $line-height $modal-margin $spacer $modal-width-base 480px $modal-width size-map($modal-width-base, $sizes, $size-multipliers) $modal-border-width $border-width $modal-border-radius $border-radius $modal-border-color-light $border-color-light $modal-background-light $color-white $modal-border-color-dark $border-color-dark $modal-background-dark $color-dark $modal-overlay-background rgba(0, 0, 0, 0.75) $modal-padding-base $spacer $modal-padding size-map($modal-padding-base, $sizes, $size-multipliers) $modal-variants ('brand', 'monochrome', 'state')