Napoleon's Pixelated Mugshot

    psk-buttonmenu

    0.2.2 • Public • Published

    psk-buttonmenu

    Vue component to display a button menu and return the button the user clicked.

    Install

    Create a new vue project:

    vue create

    Install component and dependencies:

    npm install --save bootstrap bootstrap-vue psk-buttonmenu

    Environment setting

    Make a src/resources folder at the root:

    mkdir src/resources

    Configure the bootstrap

    Create the src/resources/bootstrap-vue.js:

    import Vue from "vue";
    import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
    
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    
    Vue.use(BootstrapVue);
    Vue.use(BootstrapVueIcons);

    Configure the psk-buttonmenu

    Create the src/resources/psk-buttonmenu.js:

    import Vue from "vue";
    import ButtonMenu from "psk-buttonmenu";
    
    Vue.use(ButtonMenu, { ButtonMenuName: "MyButtonMenu" });

    Import psk-buttonmenu and dependencies

    The "src/main.js" file should look like this:

    import Vue from "vue";
    import App from "./App.vue";
    
    import "./resources/bootstrap-vue";
    import "./resources/psk-buttonmenu";
    
    Vue.config.productionTip = false;
    
    new Vue({
        render: h => h(App),
    }).$mount("#app");

    How to use (example in App.vue)

    <template>
        <div>
            <my-button-menu @click="active = true" />
    
            <div v-if="active">
                <my-button-menu :buttons="myButtons" @click="select" />
                Clicked: {{ selected }}
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                active: false,
                myButtons: [
                    {
                        description: "Go!",
                        variant: "success",
                        icon: "check",
                        customData: "111",
                    },
                    {
                        description: "Stop?",
                        variant: "danger",
                        customData: "222",
                        myData: "333"
                    }
                ],
                selected: null
            }
        },
        methods: {
            select(button) {
                this.selected = button;
            }
        }
    }
    </script>

    Properties

    Property Description Required Default
    buttons Text to display yes (1)
    size Size of buttons (bootstrap template: sm, lg) no null
    autofocus Focus on the first button no false

    (1)

    { description: "Yes", variant: "primary", icon: "check2" },
    { description: "No", variant: "primary", icon: "x" },
    { description: "Cancel", variant: "secondary", icon: "x" }

    Events

    Event Description
    click Returns a clicked button object

    Add properties to the button object so that you can identify it.

    Using in the browser

    To use directly in the browser, import psk-buttonmenu:

    <script src="https://unpkg.com/vue-boostrap" />
    <script src="https://unpkg.com/psk-buttonmenu" />

    Install

    npm i psk-buttonmenu

    DownloadsWeekly Downloads

    2

    Version

    0.2.2

    License

    GPLv3

    Unpacked Size

    139 kB

    Total Files

    11

    Last publish

    Collaborators

    • pauloklaus