Skip to content

Commit b9f9ad1

Browse files
committed
readme update
1 parent 99e7c6d commit b9f9ad1

File tree

1 file changed

+27
-59
lines changed

1 file changed

+27
-59
lines changed

README.md

Lines changed: 27 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<img alt="npm" src="https://img.shields.io/npm/v/@vueform/toggle">
2323
</a>
2424

25-
<h1>Vue 3 Toggle with Tailwind support</h1>
25+
<h1>Vue 3 Toggle</h1>
2626

2727
<a href="https://vueform.com?ref=github" target="_blank">
2828
<br>
@@ -48,20 +48,20 @@
4848

4949
## Other libraries
5050

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.
51+
* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with single select, multiselect and tagging options.
52+
* [@vueform/slider](https://github.com/vueform/slider) - Vue 3 slider component with multihandles, tooltips merging and formatting.
5353

5454
## Toggle features
5555

5656
* Vue 2 & 3 support
57-
* Tailwind & utility class support
5857
* No dependencies
5958
* Lightweight (<2 kB gzipped)
6059
* 100% coverage
6160
* TypeScript support
6261
* Accessibility support
6362
* ESM support
64-
* Configrable styles via CSS vars
63+
* CSS vars support
64+
* Tailwind & utility class support
6565
* On / Off labels
6666

6767
## Demo
@@ -153,59 +153,27 @@ import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
153153
The following CSS variables can be used to customize toggle when using `default.css`:
154154
``` css
155155

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
156+
--toggle-width: 3rem;
157+
--toggle-height: 1.25rem;
158+
--toggle-border: 0.125rem;
159+
--toggle-font-size: 0.75rem;
160+
--toggle-duration: 150ms;
161+
--toggle-bg-on: #10b981;
162+
--toggle-bg-off: #e5e7eb;
163+
--toggle-bg-on-disabled: #d1d5db;
164+
--toggle-bg-off-disabled: #e5e7eb;
165+
--toggle-border-on: #10b981;
166+
--toggle-border-off: #e5e7eb;
167+
--toggle-border-on-disabled: #d1d5db;
168+
--toggle-border-off-disabled: #e5e7eb;
169+
--toggle-ring-width: 3px;
170+
--toggle-ring-color: #10B98130;
171+
--toggle-text-on: #ffffff;
172+
--toggle-text-off: #374151;
173+
--toggle-text-on-disabled: #9ca3af;
174+
--toggle-text-off-disabled: #9ca3af;
175+
--toggle-handle-enabled: #ffffff;
176+
--toggle-handle-disabled: #f3f4f6;
209177
```
210178

211179
Override them globally:
@@ -242,7 +210,7 @@ The `Toggle` component accepts a `classes` property which allows to override def
242210

243211
``` vue
244212
<Toggle v-model="value" :classes="{
245-
container: 'inline-block',
213+
container: 'inline-block rounded-full outline-none focus:ring focus:ring-green-500 focus:ring-opacity-30',
246214
toggle: 'flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none',
247215
toggleOn: 'bg-green-500 border-green-500 justify-start text-white',
248216
toggleOff: 'bg-gray-200 border-gray-200 justify-end text-gray-700',

0 commit comments

Comments
 (0)