gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-12 16:09:52 +02:00
parent ac31229a29
commit 9b847ae268
2 changed files with 31 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/components/buttons/button-groups/ButtonGroups.js
View File

@ -114,22 +114,19 @@ const ButtonGroups = () => {
<DocsExample href="components/button-group#checkbox-and-radio-button-groups"> <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck <CFormCheck
button button={{ variant: 'outline' }}
buttonVariant="outline"
id="btncheck1" id="btncheck1"
autoComplete="off" autoComplete="off"
label="Checkbox 1" label="Checkbox 1"
/> />
<CFormCheck <CFormCheck
button button={{ variant: 'outline' }}
buttonVariant="outline"
id="btncheck2" id="btncheck2"
autoComplete="off" autoComplete="off"
label="Checkbox 2" label="Checkbox 2"
/> />
<CFormCheck <CFormCheck
button button={{ variant: 'outline' }}
buttonVariant="outline"
id="btncheck3" id="btncheck3"
autoComplete="off" autoComplete="off"
label="Checkbox 3" label="Checkbox 3"
@ -140,8 +137,7 @@ const ButtonGroups = () => {
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck <CFormCheck
type="radio" type="radio"
button button={{ variant: 'outline' }}
buttonVariant="outline"
name="btnradio" name="btnradio"
id="btnradio1" id="btnradio1"
autoComplete="off" autoComplete="off"
@ -149,8 +145,7 @@ const ButtonGroups = () => {
/> />
<CFormCheck <CFormCheck
type="radio" type="radio"
button button={{ variant: 'outline' }}
buttonVariant="outline"
name="btnradio" name="btnradio"
id="btnradio2" id="btnradio2"
autoComplete="off" autoComplete="off"
@ -158,8 +153,7 @@ const ButtonGroups = () => {
/> />
<CFormCheck <CFormCheck
type="radio" type="radio"
button button={{ variant: 'outline' }}
buttonVariant="outline"
name="btnradio" name="btnradio"
id="btnradio3" id="btnradio3"
autoComplete="off" autoComplete="off"
@ -413,9 +407,7 @@ const ButtonGroups = () => {
<CButtonGroup vertical role="group" aria-label="Vertical button group"> <CButtonGroup vertical role="group" aria-label="Vertical button group">
<CFormCheck <CFormCheck
type="radio" type="radio"
button button={{ color: 'danger', variant: 'outline' }}
buttonColor="danger"
buttonVariant="outline"
name="vbtnradio" name="vbtnradio"
id="vbtnradio1" id="vbtnradio1"
autoComplete="off" autoComplete="off"
@ -424,9 +416,7 @@ const ButtonGroups = () => {
/> />
<CFormCheck <CFormCheck
type="radio" type="radio"
button button={{ color: 'danger', variant: 'outline' }}
buttonColor="danger"
buttonVariant="outline"
name="vbtnradio" name="vbtnradio"
id="vbtnradio2" id="vbtnradio2"
autoComplete="off" autoComplete="off"
@ -434,9 +424,7 @@ const ButtonGroups = () => {
/> />
<CFormCheck <CFormCheck
type="radio" type="radio"
button button={{ color: 'danger', variant: 'outline' }}
buttonColor="danger"
buttonVariant="outline"
name="vbtnradio" name="vbtnradio"
id="vbtnradio3" id="vbtnradio3"
autoComplete="off" autoComplete="off"

45
src/views/components/forms/checks-radios/ChecksRadios.js
View File

@ -281,11 +281,16 @@ const ChecksRadios = () => {
further be grouped in a button group if needed. further be grouped in a button group if needed.
</p> </p>
<DocsExample href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" /> <CFormCheck
button={{ color: 'primary ' }}
id="btn-check"
autoComplete="off"
label="Single toggle"
/>
</DocsExample> </DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck <CFormCheck
button button={{ color: 'primary ' }}
id="btn-check-2" id="btn-check-2"
autoComplete="off" autoComplete="off"
label="Checked" label="Checked"
@ -293,13 +298,18 @@ const ChecksRadios = () => {
/> />
</DocsExample> </DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled /> <CFormCheck
button={{ color: 'primary ' }}
id="btn-check-3"
autoComplete="off"
label="Disabled"
disabled
/>
</DocsExample> </DocsExample>
<h3>Radio toggle buttons</h3> <h3>Radio toggle buttons</h3>
<DocsExample href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck <CFormCheck
button button={{ color: 'secondary' }}
buttonColor="secondary"
type="radio" type="radio"
name="options" name="options"
id="option1" id="option1"
@ -308,8 +318,7 @@ const ChecksRadios = () => {
defaultChecked defaultChecked
/> />
<CFormCheck <CFormCheck
button button={{ color: 'secondary' }}
buttonColor="secondary"
type="radio" type="radio"
name="options" name="options"
id="option2" id="option2"
@ -317,8 +326,7 @@ const ChecksRadios = () => {
label="Radio" label="Radio"
/> />
<CFormCheck <CFormCheck
button button={{ color: 'secondary' }}
buttonColor="secondary"
type="radio" type="radio"
name="options" name="options"
id="option3" id="option3"
@ -327,8 +335,7 @@ const ChecksRadios = () => {
disabled disabled
/> />
<CFormCheck <CFormCheck
button button={{ color: 'secondary' }}
buttonColor="secondary"
type="radio" type="radio"
name="options" name="options"
id="option4" id="option4"
@ -343,9 +350,7 @@ const ChecksRadios = () => {
<DocsExample href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<div> <div>
<CFormCheck <CFormCheck
button button={{ color: 'primary', variant: 'outline' }}
buttonColor="primary"
buttonVariant="outline"
id="btn-check-outlined" id="btn-check-outlined"
autoComplete="off" autoComplete="off"
label="Single toggle" label="Single toggle"
@ -353,9 +358,7 @@ const ChecksRadios = () => {
</div> </div>
<div> <div>
<CFormCheck <CFormCheck
button button={{ color: 'secondary', variant: 'outline' }}
buttonColor="secondary"
buttonVariant="outline"
id="btn-check-2-outlined" id="btn-check-2-outlined"
autoComplete="off" autoComplete="off"
label="Checked" label="Checked"
@ -364,9 +367,7 @@ const ChecksRadios = () => {
</div> </div>
<div> <div>
<CFormCheck <CFormCheck
button button={{ color: 'success', variant: 'outline' }}
buttonColor="success"
buttonVariant="outline"
type="radio" type="radio"
name="options-outlined" name="options-outlined"
id="success-outlined" id="success-outlined"
@ -375,9 +376,7 @@ const ChecksRadios = () => {
defaultChecked defaultChecked
/> />
<CFormCheck <CFormCheck
button button={{ color: 'danger', variant: 'outline' }}
buttonColor="danger"
buttonVariant="outline"
type="radio" type="radio"
name="options-outlined" name="options-outlined"
id="danger-outlined" id="danger-outlined"