Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliandreas/vue-toggles
A highly customizable and accessible toggle component for Vue
https://github.com/juliandreas/vue-toggles
vue vue3 vuejs
Last synced: 9 days ago
JSON representation
A highly customizable and accessible toggle component for Vue
- Host: GitHub
- URL: https://github.com/juliandreas/vue-toggles
- Owner: juliandreas
- Created: 2020-05-21T10:10:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-27T22:09:40.000Z (about 1 year ago)
- Last Synced: 2024-09-25T07:53:03.489Z (about 2 months ago)
- Topics: vue, vue3, vuejs
- Language: TypeScript
- Homepage:
- Size: 1 MB
- Stars: 47
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-a11y-vue - vue-toggles - A highly customizable and accessible toggle component (Components and plugins / Courses)
- awesome-access - vue-toggles - A highly customizable and accessible toggle component (Components and plugins / Courses)
README
Vue Toggles
A highly customizable and accessible toggle component for Vue 3.
## Introduction
Vue Toggles comes out of the box with accessibility support for:
- `aria-checked` depending on state
- `aria-readonly` if the toggle is disabled
- `prefers-reduced-motion` if the user has requested any type of motion reduction [[prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)]
### Accessibility
What's left for you, when it comes to accessibility, is labeling the toggle correctly. This is either done by:
- A `Toggle description` followed by the toggle component ``
- Or an `aria-label`, for example ``. Remember, you still need a visual text description of what the toggle does
The `focus`-style is also left up to you — which you shouldn't remove. If you think the default is ugly, style it yourself!
## Installation
```
npm i vue-toggles
```
### Import component
```javascript
import { VueToggles } from "vue-toggles";
```
### Import types
```javascript
import { type VueTogglesProps } from "vue-toggles";
```
## Usage
The toggle is very easy to use out of the box. The bare minimum for it to work is a `@click`-function and a `:value`-prop.
```html
```
Or if you prefer the `v-model`-syntax:
```html
```
## Options
You can also add more props to customize things like color and width/height.
```html
```
## Properties
| Name | Type | Default | Description |
| ------------------ | ---------------- | --------- | ------------------------------------------------- |
| value | Boolean | `false` | Initial state of the toggle button |
| disabled | Boolean | `false` | Toggle does not react on mouse or keyboard events |
| reverse | Boolean | `false` | Reverse toggle to Right to Left |
| height | [String, Number] | `25` | Height of the toggle in `px` |
| width | [String, Number] | `75` | Width of the toggle in `px` |
| dotColor | String | `#ffffff` | Color of the toggle dot |
| uncheckedBg | String | `#939393` | Background color when the toggle is unchecked |
| checkedBg | String | `#5850ec` | Background color when the toggle is checked |
| uncheckedTextColor | String | `#ffffff` | Text color when the toggle is unchecked |
| checkedTextColor | String | `#ffffff` | Text color when the toggle is checked |
| uncheckedText | String | `""` | Optional text when the toggle is unchecked |
| checkedText | String | `""` | Optional text when the toggle is checked |
| fontSize | String | `12` | Font size in `px` |
| fontWeight | String | `normal` | Font weight |
## Vue 2 support
If you're looking for Vue 2 support, the `1.1.4`version is available [here](https://www.npmjs.com/package/vue-toggles/v/1.1.4).
## License
[MIT](http://opensource.org/licenses/MIT)