https://github.com/james2doyle/vue-toggle
Vue component to create UI and UX elements with toggleable states
https://github.com/james2doyle/vue-toggle
state toggle vue
Last synced: about 1 month ago
JSON representation
Vue component to create UI and UX elements with toggleable states
- Host: GitHub
- URL: https://github.com/james2doyle/vue-toggle
- Owner: james2doyle
- License: mit
- Created: 2020-11-12T00:59:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-12T01:22:48.000Z (over 5 years ago)
- Last Synced: 2025-02-07T20:05:03.789Z (over 1 year ago)
- Topics: state, toggle, vue
- Language: JavaScript
- Homepage: https://james2doyle.github.io/vue-toggle
- Size: 128 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Toggle
=======
> A simple UI state toggle for Vue.js
With a simple toggle, you can build almost any UI experience. Think about experiences like show/hide, accordions, nested menus, and even sliders, they mostly revolve around a single piece of state.
## Demo
Check out [the website for demos](https://james2doyle.github.io/vue-toggle).
## Installation
```bash
npm install -S vue-ui-toggle
```
```javascript
const Toggle = require('vue-ui-toggle'); // es5/node
// import Toggle from 'vue-ui-toggle'; // es6
Vue.component('toggle', Toggle);
```
```javascript
import Toggle from 'vue-ui-toggle';
export default {
// ...
components: {
Toggle,
},
// ...
};
```
## Bindings
- `toggle` `Function`: flip the state of the toggle
- `state` `string | number | boolean | null>`: the state of the toggle (default `null`)
- `setState` `Function(state: string | number | boolean | null): void`: set the state to something that isnt a boolean
## Examples
**Example: show/hide**
```html
I am showing by default
I will show when state is true
Toggle State
```
**Example: show/hide with transitions**
```html
I am showing by default
I will show when state is true
Toggle State
```
**Example: accordion**
```html
Tab 1
Tab 2
Tab 3
Content for tab-1
Content for tab-2
Content for tab-3
```
**Example: nested toggles**
```html
Next Level
I am nested at level 1
Next Level
I am nested at level 2
Next Level
I am nested at level 3
Next Level
I am nested at level 4
```
**Example: slider**
```html
```