|
22 | 22 | <img alt="npm" src="https://img.shields.io/npm/v/@vueform/toggle">
|
23 | 23 | </a>
|
24 | 24 |
|
25 |
| - <h1>Vue 3 Toggle with Tailwind support</h1> |
| 25 | + <h1>Vue 3 Toggle</h1> |
26 | 26 |
|
27 | 27 | <a href="https://vueform.com?ref=github" target="_blank">
|
28 | 28 | <br>
|
|
48 | 48 |
|
49 | 49 | ## Other libraries
|
50 | 50 |
|
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. |
53 | 53 |
|
54 | 54 | ## Toggle features
|
55 | 55 |
|
56 | 56 | * Vue 2 & 3 support
|
57 |
| -* Tailwind & utility class support |
58 | 57 | * No dependencies
|
59 | 58 | * Lightweight (<2 kB gzipped)
|
60 | 59 | * 100% coverage
|
61 | 60 | * TypeScript support
|
62 | 61 | * Accessibility support
|
63 | 62 | * ESM support
|
64 |
| -* Configrable styles via CSS vars |
| 63 | +* CSS vars support |
| 64 | +* Tailwind & utility class support |
65 | 65 | * On / Off labels
|
66 | 66 |
|
67 | 67 | ## Demo
|
@@ -153,59 +153,27 @@ import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
|
153 | 153 | The following CSS variables can be used to customize toggle when using `default.css`:
|
154 | 154 | ``` css
|
155 | 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 |
| 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; |
209 | 177 | ```
|
210 | 178 |
|
211 | 179 | Override them globally:
|
@@ -242,7 +210,7 @@ The `Toggle` component accepts a `classes` property which allows to override def
|
242 | 210 |
|
243 | 211 | ``` vue
|
244 | 212 | <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', |
246 | 214 | toggle: 'flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none',
|
247 | 215 | toggleOn: 'bg-green-500 border-green-500 justify-start text-white',
|
248 | 216 | toggleOff: 'bg-gray-200 border-gray-200 justify-end text-gray-700',
|
|
0 commit comments