@codedungeon/vue-toolbar-button NPM

vue-toolbar-button

Description

VueToolbarButton provides a clean button component which may include an icon and/or down arrow with built-in dropdown menu. Using the simple slot interface, you can choose to supply markup for a fontawesome aware icon prop, or using the simple slot interface, you can provide your own icons such as svg images. In addition, VueToolbarButton can be configured to show a down arrow, again using the built-in prop, or any other markup you wish to display in the arrow slot

Installation

Using npm

npm i @codedungeon/vue-toolbar-button

Using yarn

yarn @codedungeon/vue-toolbar-button

Usage

VueToolbarButton provides a series of props which control how the buttons are created (see prop list below)

Standard Buttons

The following examples outline the general interface for creating buttons. You can use the icon prop to provide a standard fontawesome icon

<!-- displays button with plus icon and down arrow, no slot value so no button text -->
<vue-toolbar-button @click="onToolbar('show popup')" icon="far fa-plus" :down-arrow="true" arrow-size="mini"></vue-toolbar-button>

The following examples outline the general interface for creating buttons. You can use the icon prop to provide a standard fontawesome icon

<!-- displays button with plus icon, button text of `New` and down arrow in default (normal) statue -->
<vue-toolbar-button name="new" @click="onToolbar" icon="far fa-plus" :down-arrow="true">
    New
</vue-toolbar-button>

The following examples creates a standard button without an icon, or downArrow, providing a standard button using custom style

<!-- displays button with no icon, button text and down arrow; in addition custom class has been applied -->
<vue-toolbar-button name="search" style="color: red;" @click="onToolbar">
    Use Custom Class
</vue-toolbar-button>

Dropdown Only

For example, the following demonstrates how to create a simple button which includes both icon and down arrow (but not button text) using the dropdownOnly prop

<vue-toolbar-button
    ref="new-icon-only"
    name="new-icon-only"
    title="New"
    icon="far fa-plus"
    :down-arrow="true"
    arrow-size="mini"
    :options="options"
    :dropdown-only="true"
    @buttonClick="onButtonClick"
></vue-toolbar-button>

Using `icon` and `arrow` Slots

The following example demonstrates how to create a button which uses icon and arrow slots, using svg icons for both parts

<!-- uses `icon` and `arrow` slots, using svg icons -->
<vue-toolbar-button title="Test" name="test" :down-arrow="true" :options="options" @buttonClick="onButtonClick">
    <template v-slot:icon>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M12 14l9-5-9-5-9 5 9 5z" />
            <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
            />
        </svg>
    </template>
    <template v-slot:arrow>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path
                fill-rule="evenodd"
                d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
            />
        </svg>
    </template>
    Test
</vue-toolbar-button>

Props

VueToolbarButton provides the following props

Prop	Type	Description
`name`	String	Unique name for component (similar to `ref` but ref can't be used as prop)
`icon`	String	Something like font awesome here “fas fa-plus”
		- if no slot data, downArrow will be next to icon and smaller text
		- if slot data, downArrow should be to right of slot data (see current New Contact button)
`down-arrow`	Boolean (default: `false`)	Show down arrow
`arrow-size`	String (default: `normal`)	Currently, there are two arrow sizes `normal` or `mini`
`disabled`	Boolean (default: `false`)	Disable button
`options`	Array	Items displayed if down-arrow enabled
`dropdown-only`	Boolean (default: `false`)	Button should only trigger dropdown

Events

VueToolbarButton provides the following events

Event	Description
`buttonClick`	method executed on mouse click or arrow item selection
	- name - the `name` property (for identify which button was clicked
	- menuItem - if button dropdown item selected

Slots

VueToolbarButton provides the following slots, which can be used to override the default "props"

Slot	Description
`default`	Typically contains the button text
`icon`	Can be used in place of "icon" prop to use svg icons, etc
`arrow`	Can be used in place of default down arrow