tb-modal-vue3

1.0.2 • Public • Published

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>  

Readme

Keywords

Package Sidebar

Install

npm i tb-modal-vue3

Weekly Downloads

3

Version

1.0.2

License

(ISC)

Unpacked Size

19.8 kB

Total Files

5

Last publish

Collaborators

  • tuckbloor