refactor: update examples
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios">
|
||||
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
|
||||
<CFormCheck
|
||||
id="flexCheckChecked"
|
||||
label="Checked checkbox"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> attribute and the associated
|
||||
<code><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input's state.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#disabled">
|
||||
<CFormCheck label="Disabled checkbox" disabled />
|
||||
<CFormCheck
|
||||
label="Disabled checked checkbox"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> attribute and the associated
|
||||
<code><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input's state.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#radios">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault1"
|
||||
label="Default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault2"
|
||||
label="Checked radio"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios#disabled-1">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioDisabled"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioCheckedDisabled"
|
||||
label="Disabled checked radio"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
A switch has the markup of a custom checkbox but uses the
|
||||
<code>switch</code> boolean properly to render a toggle switch.
|
||||
Switches also support the <code>disabled</code> attribute.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#switches">
|
||||
<CFormSwitch
|
||||
label="Default switch checkbox input"
|
||||
id="formSwitchCheckDefault"
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Checked switch checkbox input"
|
||||
id="formSwitchCheckChecked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Disabled switch checkbox input"
|
||||
id="formSwitchCheckDisabled"
|
||||
disabled
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Disabled checked switch checkbox input"
|
||||
id="formSwitchCheckCheckedDisabled"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios#sizes">
|
||||
<CFormSwitch
|
||||
label="Default switch checkbox input"
|
||||
id="formSwitchCheckDefault"
|
||||
/>
|
||||
<CFormSwitch
|
||||
size="lg"
|
||||
label="Large switch checkbox input"
|
||||
id="formSwitchCheckDefaultLg"
|
||||
/>
|
||||
<CFormSwitch
|
||||
size="xl"
|
||||
label="Extra large switch checkbox input"
|
||||
id="formSwitchCheckDefaultXL"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong>
|
||||
<small>Default layout (stacked)</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By default, any number of checkboxes and radios that are immediate
|
||||
sibling will be vertically stacked and appropriately spaced.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#default-stacked">
|
||||
<CFormCheck id="defaultCheck1" label="Default checkbox" />
|
||||
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#default-stacked">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios1"
|
||||
value="option1"
|
||||
label="Default radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios2"
|
||||
value="option2"
|
||||
label="Second default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios3"
|
||||
value="option3"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Inline</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Group checkboxes or radios on the same horizontal row by adding
|
||||
<code>inline</code> boolean property to any
|
||||
<code><CFormCheck></code>.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#inline">
|
||||
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
|
||||
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
|
||||
<CFormCheck
|
||||
inline
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#inline">
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox1"
|
||||
value="option1"
|
||||
label="1"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox2"
|
||||
value="option2"
|
||||
label="2"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Without labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Remember to still provide some form of accessible name for assistive
|
||||
technologies (for instance, using <code>aria-label</code>).
|
||||
</p>
|
||||
<Example href="forms/checks-radios#without-labels">
|
||||
<div>
|
||||
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radioNoLabel"
|
||||
id="radioNoLabel"
|
||||
value=""
|
||||
aria-label="..."
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Toggle buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create button-like checkboxes and radio buttons by using
|
||||
<code>button</code> boolean property on the
|
||||
<code><CFormCheck></code> component. These toggle buttons can
|
||||
further be grouped in a button group if needed.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary' }"
|
||||
id="btn-check"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary' }"
|
||||
id="btn-check-2"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary' }"
|
||||
id="btn-check-3"
|
||||
autoComplete="off"
|
||||
label="Disabled"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
<h3>Radio toggle buttons</h3>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option1"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option2"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option3"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option4"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</Example>
|
||||
<h3>Outlined styles</h3>
|
||||
<p class="text-medium-emphasis small">
|
||||
Different variants of button, such at the various outlined styles,
|
||||
are supported.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<div>
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary', variant: 'outline' }"
|
||||
id="btn-check-outlined"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary', variant: 'outline' }"
|
||||
id="btn-check-2-outlined"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
:button="{ color: 'success', variant: 'outline' }"
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="success-outlined"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'danger', variant: 'outline' }"
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="danger-outlined"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChecksRadios",
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user