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

``bash
npm i @codedungeon/vue-toolbar-button
`

Using yarn

`bash
yarn @codedungeon/vue-toolbar-button
`

Usage

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

$3

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

`html


`

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

`html


New

`

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

`html


Use Custom Class

`

$3

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

`html
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"
>
`

$3

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

`html




Test

`

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

$3

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 support@codedungeon.io instead of using the issue tracker.

Credits

vue-toolbar-button written by Mike Erickson

E-Mail: mike.erickson@codedungeon.io

Twitter: @codedungeon

Website: codedungeon.io

License

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