1.0.2 • Published 3 years ago
tb-modal-vue3 v1.0.2
A Customisable Modal For Vue3 Works With Laravel
move the CSS :root to an external style sheet
Edit my css styles to your needs
ADD the below to below your div #app or what id you have used
<div id="app"></div>
<div id="tb_modals"></div>
Example:
<template>
<teleport to="#tb_modals">
<TbModal @tb-modal-close="tbModalClose" :buttonText="'Open Modal'">
<template #header>header</template>
<template #body>
body
</template>
<template #footer>footer</template>
</TbModal>
</teleport>
</template>
<script>
import TbModal from 'tb-modal-vue3';
export default {
components: {
TbModal
},
setup() {
function tbModalClose() {
console.log('modal was closed')
}
return { TbModal, tbModalClose }
}
}
</script>
<style>
:root {
--tb-modal-overlay-color: #486997;
--tb-modal-overlay-opacity: 0.5;
--tb-modal-header-font-size: 16px;
--tb-modal-header-font-weight: bolder;
--tb-modal-body-font-size: 12px;
--tb-modal-footer-font-size: 10px;
--tb-modal-width: 700px;
--tb-modal-background-color: #fff;
--tb-modal-border-radius: 10px;
--tb-modal-top-position: 150px;
--tb-modal-button-color: #fff;
--tb-modal-button-background-color: #FF0000;
--tb-modal-button-hover-color: black;
--tb-modal-button-hover-background-color: #FFA07A;
--tb-modal-button-padding: 5px;
--tb-modal-button-radius: 5px;
--tb-modal-button-border: solid;
--tb-modal-button-border-width: 1px;
--tb-modal-button-border-color: black;
}
</style>