Skip to content

Commit a30747d

Browse files
adambereczadamberecz
committed
readme update
1 parent 983ee83 commit a30747d

File tree

1 file changed

+39
-37
lines changed

1 file changed

+39
-37
lines changed

‎README.md

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -129,25 +129,59 @@ import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
129129
First you need install [@nuxtjs/composition-api](https://composition-api.nuxtjs.org/getting-started/setup):
130130

131131
``` bash
132-
npm i @nuxtjs/composition-api --save-dev
132+
npm i @nuxtjs/composition-api --save
133133
```
134134

135135
Then you need to enable it as a module in `nuxt.config.js`:
136136

137137
``` js
138138
{
139139
buildModules: [
140-
'@nuxtjs/composition-api'
140+
'@nuxtjs/composition-api/module'
141141
]
142142
}
143143
```
144144

145-
After that make sure to change the imported module to Vue 2 version of Toggle, as Nuxt.js still depends on that:
145+
After that make sure to change the imported module to Vue 2 version of Toggle:
146146

147147
``` js
148-
import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
148+
import Toggle from '@vueform/toggle/dist/toggle.vue2'
149149
```
150150

151+
For more information on using `@nuxtjs/composition-api` read [their documentation](https://composition-api.nuxtjs.org/).
152+
153+
## Support
154+
155+
Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](https://github.com/vueform/toggle/issues).
156+
157+
## Basic props
158+
159+
| Name | Type | Default | Description |
160+
| --- | --- | --- | --- |
161+
| **id** | `string` | `toggle` | The `id` attribute of input field. Make sure to customize when using more toggles on a single page. |
162+
| **name** | `string` | `toggle` | The `name` attribute of input field. |
163+
| **disabled** | `boolean` | `false` | Whether the toggle should be disabled. |
164+
| **required** | `boolean` | `false` | Whether the HTML5 required attribute should be used for toggle (using an invisible fake input). |
165+
| **falseValue** | `string\|number\|boolean` | `false` | The value when the toggle is `off`. |
166+
| **trueValue** | `string\|number\|boolean` | `true` | The value when toggle is `on`. |
167+
| **offLabel** | `string` | | The label when toggle is `off`. |
168+
| **onLabel** | `string` | | The label when toggle is `on`. |
169+
| **labelledby** | `string` | | The `aria-labelledby` attribute. |
170+
| **describedby** | `string` | | The `aria-describedby` attribute. |
171+
| **classes** | `object` | | An object of class names that gets merged with the default values. Default: `{`<br>&nbsp;&nbsp;`container: 'toggle-container',`<br>&nbsp;&nbsp;`toggle: 'toggle',`<br>&nbsp;&nbsp;`toggleOn: 'toggle-on',`<br>&nbsp;&nbsp;`toggleOff: 'toggle-off',`<br>&nbsp;&nbsp;`toggleOnDisabled: 'toggle-on-disabled',`<br>&nbsp;&nbsp;`toggleOffDisabled: 'toggle-off-disabled',`<br>&nbsp;&nbsp;`handle: 'toggle-handle',`<br>&nbsp;&nbsp;`handleOn: 'toggle-handle-on',`<br>&nbsp;&nbsp;`handleOff: 'toggle-handle-off',`<br>&nbsp;&nbsp;`handleOnDisabled: 'toggle-handle-on-disabled',`<br>&nbsp;&nbsp;`handleOffDisabled: 'toggle-handle-off-disabled',`<br>&nbsp;&nbsp;`label: 'toggle-label',`<br>`}`.<br> The default value can be used with `default.css` and style can be customized with [CSS variables](#styling-with-css-vars). Alternatively this can be overridden with utility classes like [Tailwind CSS](#styling-with-tailwind-css). |
172+
173+
## Events
174+
175+
| Event | Attributes | Description |
176+
| --- | --- | --- |
177+
| **@change** | `value` | Emitted when the toggle changes. |
178+
179+
## Slots
180+
181+
| Slot | Attributes | Description |
182+
| --- | --- | --- |
183+
| **label** | `checked`, `classList` | The label of the toggle element. The `checked` attribute determines whether the toggle is *on* or *off* so you can display the label accordingly. The `classList` contains the resolved class names. |
184+
151185
## Styling with CSS vars
152186

153187
The following CSS variables can be used to customize toggle when using `default.css`:
@@ -225,7 +259,7 @@ The `Toggle` component accepts a `classes` property which allows to override def
225259
}" />
226260
```
227261

228-
Certain classes has different states which are merged to the base class when the state is active. For exmple `handle` will be merged with `handleOn` when the toggle is **on** and **not disabled** resulting in the following classes:
262+
Certain classes has different states which are merged to the base class when the state is active. For example `handle` will be merged with `handleOn` when the toggle is **on** and **not disabled** resulting in the following classes:
229263
```inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all left-full transform -translate-x-full```
230264

231265
The same is true for `toggle`.
@@ -244,38 +278,6 @@ By default the `on` and `off` labels are being read by the screenreaders. If you
244278
<small id="toggle-description">Turn this on if you'd like to receive in-app notifications.</small>
245279
```
246280

247-
## Support
248-
249-
Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](https://github.com/vueform/toggle/issues).
250-
251-
## Basic props
252-
253-
| Name | Type | Default | Description |
254-
| --- | --- | --- | --- |
255-
| **id** | `string` | `toggle` | The `id` attribute of input field. Make sure to customize when using more toggles on a single page. |
256-
| **name** | `string` | `toggle` | The `name` attribute of input field. |
257-
| **disabled** | `boolean` | `false` | Whether the toggle should be disabled. |
258-
| **required** | `boolean` | `false` | Whether the HTML5 required attribute should be used for toggle (using an invisible fake input). |
259-
| **falseValue** | `string\|number\|boolean` | `false` | The value when the toggle is `off`. |
260-
| **trueValue** | `string\|number\|boolean` | `true` | The value when toggle is `on`. |
261-
| **offLabel** | `string` | | The label when toggle is `off`. |
262-
| **onLabel** | `string` | | The label when toggle is `on`. |
263-
| **labelledby** | `string` | | The `aria-labelledby` attribute. |
264-
| **describedby** | `string` | | The `aria-describedby` attribute. |
265-
| **classes** | `object` | | An object of class names that gets merged with the default values. Default: `{`<br>&nbsp;&nbsp;`container: 'toggle-container',`<br>&nbsp;&nbsp;`toggle: 'toggle',`<br>&nbsp;&nbsp;`toggleOn: 'toggle-on',`<br>&nbsp;&nbsp;`toggleOff: 'toggle-off',`<br>&nbsp;&nbsp;`toggleOnDisabled: 'toggle-on-disabled',`<br>&nbsp;&nbsp;`toggleOffDisabled: 'toggle-off-disabled',`<br>&nbsp;&nbsp;`handle: 'toggle-handle',`<br>&nbsp;&nbsp;`handleOn: 'toggle-handle-on',`<br>&nbsp;&nbsp;`handleOff: 'toggle-handle-off',`<br>&nbsp;&nbsp;`handleOnDisabled: 'toggle-handle-on-disabled',`<br>&nbsp;&nbsp;`handleOffDisabled: 'toggle-handle-off-disabled',`<br>&nbsp;&nbsp;`label: 'toggle-label',`<br>`}`.<br> The default value can be used with `default.css` and style can be customized with [CSS variables](#styling-with-css-vars). Alternatively this can be overridden with utility classes like [Tailwind CSS](#styling-with-tailwind-css). |
266-
267-
## Events
268-
269-
| Event | Attributes | Description |
270-
| --- | --- | --- |
271-
| **@change** | `value` | Emitted when the toggle changes. |
272-
273-
## Slots
274-
275-
| Slot | Attributes | Description |
276-
| --- | --- | --- |
277-
| **label** | `checked`, `classList` | The label of the toggle element. The `checked` attribute determines whether the toggle is *on* or *off* so you can display the label accordingly. The `classList` contains the resolved class names. |
278-
279281
## Examples
280282

281283
* [Default toggle](#default-toggle)

0 commit comments

Comments
 (0)