Skip to content

Commit 3f1a7cc

Browse files
adambereczadamberecz
committed
readme update
1 parent 8ac3d0c commit 3f1a7cc

File tree

1 file changed

+73
-40
lines changed

1 file changed

+73
-40
lines changed

‎README.md

Lines changed: 73 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
<div align="center">
2+
3+
<a href="https://www.npmjs.com/package/@vueform/toggle" target="_blank">
4+
<img alt="npm" src="https://img.shields.io/npm/dm/@vueform/toggle?color=%2353ca2f">
5+
</a>
6+
27
<img alt="CircleCI" src="https://img.shields.io/circleci/build/github/vueform/toggle">
38

49
<a href="https://codecov.io/gh/vueform/toggle" target="_blank">
@@ -9,10 +14,6 @@
914
<img alt="npm bundle size (scoped version)" src="https://img.shields.io/bundlephobia/minzip/@vueform/toggle?color=53ca2f">
1015
</a>
1116

12-
<a href="https://github.com/vueform/toggle/blob/main/LICENSE.md" target="_blank">
13-
<img alt="GitHub" src="https://img.shields.io/github/license/vueform/toggle?color=53ca2f">
14-
</a>
15-
1617
<a href="https://discord.gg/WhX2nG6GTQ" target="_blank">
1718
<img alt="Discord" src="https://img.shields.io/discord/787237947635793940">
1819
</a>
@@ -47,8 +48,8 @@
4748

4849
## Other libraries
4950

50-
* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with single select, multiselect and tagging options.
51-
* [@vueform/slider](https://github.com/vueform/slider) - Vue 3 slider component with multihandles, tooltips merging and formatting.
51+
* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with tagging options & Tailwind support.
52+
* [@vueform/slider](https://github.com/vueform/slider) - Vue 3 slider component with tooltips & Tailwind support.
5253

5354
## Toggle features
5455

@@ -149,30 +150,65 @@ import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
149150

150151
## Styling with CSS vars
151152

152-
The following CSS variables can be used to customize the toggle button when using `default.css`:
153+
The following CSS variables can be used to customize toggle when using `default.css`:
153154
``` css
154-
--toggle-width: 3rem;
155-
--toggle-height: 1.25rem;
156-
--toggle-border: 0.125rem;
157-
--toggle-font-size: 0.75rem;
158-
--toggle-duration: 150ms;
159-
--toggle-bg-on: #10b981;
160-
--toggle-bg-off: #e5e7eb;
161-
--toggle-bg-on-disabled: #d1d5db;
162-
--toggle-bg-off-disabled: #e5e7eb;
163-
--toggle-border-on: #10b981;
164-
--toggle-border-off: #e5e7eb;
165-
--toggle-border-on-disabled: #d1d5db;
166-
--toggle-border-off-disabled: #e5e7eb;
167-
--toggle-text-on: #ffffff;
168-
--toggle-text-off: #374151;
169-
--toggle-text-on-disabled: #9ca3af;
170-
--toggle-text-off-disabled: #9ca3af;
171-
--toggle-handle-enabled: #ffffff;
172-
--toggle-handle-disabled: #f3f4f6;
155+
156+
--ms-font-size: 1rem
157+
--ms-line-height: 1.375
158+
--ms-bg: #FFFFFF
159+
--ms-bg-disabled: #F3F4F6
160+
--ms-border-color: #D1D5DB
161+
--ms-border-width: 1px
162+
--ms-radius: 4px
163+
--ms-py: 0.5rem
164+
--ms-px: 0.875rem
165+
--ms-ring-width: 3px
166+
--ms-ring-color: #10B98130
167+
--ms-placeholder-color: #9CA3AF
168+
169+
--ms-tag-font-size: 0.875rem
170+
--ms-tag-line-height: 1.25rem
171+
--ms-tag-font-weight: 600
172+
--ms-tag-bg: #10B981
173+
--ms-tag-bg-disabled: #9CA3AF
174+
--ms-tag-color: #FFFFFF
175+
--ms-tag-color-disabled: #FFFFFF
176+
--ms-tag-radius: 4px
177+
--ms-tag-py: 0.125rem
178+
--ms-tag-px: 0.5rem
179+
--ms-tag-my: 0.25rem
180+
--ms-tag-mx: 0.25rem
181+
182+
--ms-tag-remove-radius: 4px
183+
--ms-tag-remove-py: 0.25rem
184+
--ms-tag-remove-px: 0.25rem
185+
--ms-tag-remove-my: 0rem
186+
--ms-tag-remove-mx: 0.125rem
187+
188+
--ms-dropdown-bg: #FFFFFF
189+
--ms-dropdown-border-color: #D1D5DB
190+
--ms-dropdown-border-width: 1px
191+
--ms-dropdown-radius: 4px
192+
193+
--ms-option-font-size: 1rem
194+
--ms-option-line-height: 1.375
195+
--ms-option-bg-pointed: #FFFFFF
196+
--ms-option-bg-selected: #10B981
197+
--ms-option-bg-disabled: #FFFFFF
198+
--ms-option-bg-selected-pointed: #26C08E
199+
--ms-option-bg-selected-disabled: #FFFFFF
200+
--ms-option-color-pointed: #1F2937
201+
--ms-option-color-selected: #FFFFFF
202+
--ms-option-color-disabled: #D1D5DB
203+
--ms-option-color-selected-pointed: #FFFFFF
204+
--ms-option-color-selected-disabled: #D1FAE5
205+
--ms-option-py: 0.5rem
206+
--ms-option-px: 0.75rem
207+
208+
--ms-empty-color: #4B5563
173209
```
174210

175-
You might override them globally:
211+
Override them globally:
176212

177213
``` css
178214
:root {
@@ -184,25 +220,25 @@ You might override them globally:
184220
Or on an instance level:
185221

186222
``` vue
187-
<Toggle v-model="value" class="my-toggle-red" />
188-
<Toggle v-model="value" class="my-toggle-blue" />
223+
<Toggle v-model="value" class="toggle-red" />
224+
<Toggle v-model="value" class="toggle-blue" />
189225
```
190226

191227
``` css
192-
.my-toggle-red {
228+
.toggle-red {
193229
--toggle-bg-on: red;
194230
--toggle-border-on: red;
195231
}
196232

197-
.my-toggle-blue {
233+
.toggle-blue {
198234
--toggle-bg-on: blue;
199235
--toggle-border-on: blue;
200236
}
201237
```
202238

203239
## Styling with Tailwind CSS
204240

205-
The `Toggle` component accepts a `classes` property where you can override default class names. In this case you don't need to required `default.css`. Here's a default styling for Tailwind CSS:
241+
The `Toggle` component accepts a `classes` property which allows to override default class names. When using utility classes you don't need to import `default.css`. Here's a default styling for Tailwind CSS:
206242

207243
``` vue
208244
<Toggle v-model="value" :classes="{
@@ -221,15 +257,12 @@ The `Toggle` component accepts a `classes` property where you can override defau
221257
}" />
222258
```
223259

224-
If the button is **enabled** and **on** the `toggle` and `toggleOn` classes will be added to the toggle div:
225-
```flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none bg-green-500 border-green-500 justify-start text-white```
226-
227-
Likewise if the the button is **disabled** and **on** the `toggle` and `toggleOnDisabled` classes will be added:
228-
```flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none bg-gray-300 border-gray-300 justify-start text-gray-400 cursor-not-allowed```
260+
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:
261+
```inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all left-full transform -translate-x-full```
229262

230-
The same is true `off` states and `handle`.
263+
The same is true for `toggle`.
231264

232-
This way you can customize the parts of the toggle button without having to worry about over-riding the same type of utility classes, like backgrounds or text colors.
265+
In case you need to override the same type of utility you might use [@neojp/tailwind-important-variant](https://www.npmjs.com/package/@neojp/tailwindcss-important-variant) and use eg. `bg-green-500!`.
233266

234267
## Accessibility
235268

@@ -261,7 +294,7 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt
261294
| **onLabel** | `string` | | The label when toggle is `on`. |
262295
| **labelledby** | `string` | | The `aria-labelledby` attribute. |
263296
| **describedby** | `string` | | The `aria-describedby` attribute. |
264-
| **classes** | `object` | | The object of classes to be applied for different parts of the toggle. 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). |
297+
| **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). |
265298

266299
## Events
267300

0 commit comments

Comments
 (0)