Appearance
Modal
The FTModal component replaces the standard html button with a design theme and a multitude of options.
Usage
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTModal } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTModal } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTModal } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTModal
}
}
</script><script>
import { FTModal } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTModal
}
}
</script>Live demo
Buttons
vue
<template>
<FTModal v-if="showModal" title="Modal title" @close-modal="showModal = false">
Modal body text goes here.
<template #footer>
<FTButton @click="showModal = false" primary>OK!</FTButton>
</template>
</FTModal>
</template><template>
<FTModal v-if="showModal" title="Modal title" @close-modal="showModal = false">
Modal body text goes here.
<template #footer>
<FTButton @click="showModal = false" primary>OK!</FTButton>
</template>
</FTModal>
</template>Wider modal
Sometimes you want to be able to show content a bit wider than usual
Buttons
vue
<template>
<FTModal v-if="showModal" title="Modal title" @close-modal="showModal = false">
Modal body text goes here.
<template #footer>
<FTButton @click="showModal = false" primary>OK!</FTButton>
</template>
</FTModal>
</template><template>
<FTModal v-if="showModal" title="Modal title" @close-modal="showModal = false">
Modal body text goes here.
<template #footer>
<FTButton @click="showModal = false" primary>OK!</FTButton>
</template>
</FTModal>
</template>Static backdrop
When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
Buttons
vue
<template>
<FTModal v-if="showModal" :close-on-backdrop="false" title="Modal title" @close-modal="showModal = false">
Modal body text goes here.
<template #footer>
<FTButton @click="showModal = false" primary>OK!</FTButton>
</template>
</FTModal>
</template><template>
<FTModal v-if="showModal" :close-on-backdrop="false" title="Modal title" @close-modal="showModal = false">
Modal body text goes here.
<template #footer>
<FTButton @click="showModal = false" primary>OK!</FTButton>
</template>
</FTModal>
</template>Props
| Name | Default | Description |
|---|---|---|
title | empty | Modal title |
closeOnBackdrop | true | Close modal on click outside of modal |
disableClose | false | Whether to show the close button or not |
wide | false | Show a widder modal |
cssClass | empty | If you need pass additional classes to the modal |
showOverflow | false | Allow content to be shown outside of modal, needed for custom dropdowns |
Events
| Name | Description |
|---|---|
close-modal | Triggered when use closes modal either with Esc-key, the X button or click outside of modal (unless disabled) |
Slots
| Name | Description |
|---|---|
header | Sometimes the title props isn't enough, you can use the header slot to change the header entirely |
footer | Allow you to show additional data in a fixed footer |
CSS
Most of the default styles are setup using CSS variables for easy customization on a per project basis.
| CSS variable | Default Value |
|---|---|
--ft-modal-border-radius | 4px |
--ft-modal-background-color | #fff |
--ft-modal-padding | 40px |
--ft-modal-max-width | 420px |
--ft-modal-wide-max-width | 840px |
--ft-modal-box-shadow | 0 8px 16px rgba(0, 0, 0, 0.15) |
--ft-modal-footer-space-top | --ft-modal-padding |