arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 05:58:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Radio/Checkbox/Toggle)!: handle color prop for form elements (#323)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
2023-06-20 18:35:53 +03:00
committed by Benjamin Canac
parent 97a1c86433
commit ffb312d34d
16 changed files with 207 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/content/3.forms/5.checkbox.md
View File

@@ -14,7 +14,7 @@ Use a `v-model` to make the Checkbox reactive.
#code
```vue
<script setup>
const selected = ref(false)
const selected = ref(true)
</script>
<template>
@@ -36,6 +36,20 @@ props:
---
::
### Style
Use the `color` prop to change the style of the Checkbox.
::component-card
---
baseProps:
name: 'checkbox2'
label: 'Label'
props:
color: 'primary'
---
::
### Required
Use the `required` prop to display a red star next to the label.
@@ -43,7 +57,7 @@ Use the `required` prop to display a red star next to the label.
::component-card
---
baseProps:
name: 'checkbox2'
name: 'checkbox3'
props:
label: 'Label'
required: true
@@ -57,7 +71,7 @@ Use the `help` prop to display some text under the Checkbox.
::component-card
---
baseProps:
name: 'checkbox3'
name: 'checkbox4'
props:
label: 'Label'
help: 'Please check this box'

20
docs/content/3.forms/6.radio.md
View File

@@ -50,6 +50,20 @@ props:
---
::
### Style
Use the `color` prop to change the style of the Radio.
::component-card
---
baseProps:
name: 'radio2'
label: 'Label'
props:
color: 'primary'
---
::
### Required
Use the `required` prop to display a red star next to the label.
@@ -57,7 +71,7 @@ Use the `required` prop to display a red star next to the label.
::component-card
---
baseProps:
name: 'radio2'
name: 'radio3'
props:
label: 'Label'
required: true
@@ -71,7 +85,7 @@ Use the `help` prop to display some text under the Radio.
::component-card
---
baseProps:
name: 'radio3'
name: 'radio4'
props:
label: 'Label'
help: 'Please choose one'
@@ -85,7 +99,7 @@ Use the `disabled` prop to disable the Radio.
::component-card
---
baseProps:
name: 'radio4'
name: 'radio5'
value: true
props:
disabled: true

11
docs/content/3.forms/7.toggle.md
View File

@@ -26,6 +26,17 @@ const selected = ref(false)
```
::
### Style
Use the `color` prop to change the style of the Toggle.
::component-card
---
props:
color: 'primary'
---
::
### Icon
Use any icon from [Iconify](https://icones.js.org) by setting the `on-icon` and `off-icon` props by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.toggle.default.onIcon` and `ui.toggle.default.offIcon`.