@codedungeon/vue-toolbar-button

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

References

svg icons

If you are looking for svg based icons, there are a number of nice places. The following is just a small subset of resources.

hericons One of my favorite sources for svg icons and the source used for some of the demo icons heroicons.com

iconfinder Another source of svg based icons iconfinder

icon8 This site has a huge collection of icons, available in both svg and png format icon8

Contributing

Please see CONTRIBUTING for details.

Changelog

Please see CHANGELOG for details.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

vue-toolbar-button written by Mike Erickson

E-Mail: [e-mail]

Twitter: @codedungeon

Website: codedungeon.io

License

Copyright © 2021-2022 Mike Erickson Released under the MIT License