sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-29 16:10:33 +02:00
parent 1b7a092079
commit cac84bdcdd
38 changed files with 601 additions and 1422 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/forms/ChecksRadios.vue
+32 -32
View File
@@ -9,14 +9,14 @@
<strong>Vue Checkbox</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios">
<DocsExample href="forms/checks-radios">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck
id="flexCheckChecked"
label="Checked checkbox"
defaultChecked
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -31,14 +31,14 @@
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
</p>
<Example href="forms/checks-radios#disabled">
<DocsExample href="forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -53,7 +53,7 @@
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
</p>
<Example href="forms/checks-radios#radios">
<DocsExample href="forms/checks-radios#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
@@ -67,7 +67,7 @@
label="Checked radio"
defaultChecked
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -77,7 +77,7 @@
<strong>Vue Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#disabled-1">
<DocsExample href="forms/checks-radios#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
@@ -93,7 +93,7 @@
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -108,7 +108,7 @@
<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">
<DocsExample href="forms/checks-radios#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -129,7 +129,7 @@
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -139,7 +139,7 @@
<strong>Vue Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#sizes">
<DocsExample href="forms/checks-radios#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -154,7 +154,7 @@
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -169,11 +169,11 @@
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">
<DocsExample 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">
</DocsExample>
<DocsExample href="forms/checks-radios#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
@@ -197,7 +197,7 @@
label="Disabled radio"
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -212,7 +212,7 @@
<code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>.
</p>
<Example href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
@@ -222,8 +222,8 @@
label="3 (disabled)"
disabled
/>
</Example>
<Example href="forms/checks-radios#inline">
</DocsExample>
<DocsExample href="forms/checks-radios#inline">
<CFormCheck
inline
type="radio"
@@ -249,7 +249,7 @@
label="3 (disabled)"
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -263,7 +263,7 @@
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">
<DocsExample href="forms/checks-radios#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
@@ -276,7 +276,7 @@
aria-label="..."
/>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -292,15 +292,15 @@
<code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample 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">
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
@@ -308,8 +308,8 @@
label="Checked"
defaultChecked
/>
</Example>
<Example href="forms/checks-radios#toggle-buttons">
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
@@ -317,9 +317,9 @@
label="Disabled"
disabled
/>
</Example>
</DocsExample>
<h3>Radio toggle buttons</h3>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
@@ -354,13 +354,13 @@
autoComplete="off"
label="Radio"
/>
</Example>
</DocsExample>
<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">
<DocsExample href="forms/checks-radios#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
@@ -397,7 +397,7 @@
label="Radio"
/>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/FloatingLabels.vue
+12 -12
View File
@@ -17,7 +17,7 @@
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
</p>
<Example href="forms/floating-labels">
<DocsExample href="forms/floating-labels">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -26,12 +26,12 @@
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<Example href="forms/floating-labels">
<DocsExample href="forms/floating-labels">
<CFormFloating>
<CFormInput
type="email"
@@ -41,7 +41,7 @@
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -55,7 +55,7 @@
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
<code>&lt;CFormInput&gt;</code>s.
</p>
<Example href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
@@ -63,13 +63,13 @@
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<Example href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
@@ -78,7 +78,7 @@
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -97,7 +97,7 @@
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="forms/floating-labels#selects">
<DocsExample href="forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@@ -107,7 +107,7 @@
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -121,7 +121,7 @@
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<Example href="forms/floating-labels#layout">
<DocsExample href="forms/floating-labels#layout">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>
@@ -146,7 +146,7 @@
</CFormFloating>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/FormControl.vue
+16 -16
View File
@@ -9,7 +9,7 @@
<strong>Vue Form Control</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control">
<DocsExample href="forms/form-control">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleFormControlInput1"
@@ -31,7 +31,7 @@
></CFormTextarea>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -45,7 +45,7 @@
Set heights using <code>size</code> property like
<code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
</p>
<Example href="forms/form-control#sizing">
<DocsExample href="forms/form-control#sizing">
<CFormInput
type="text"
size="lg"
@@ -65,7 +65,7 @@
placeholder="Small input"
aria-label="sm input example"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -79,7 +79,7 @@
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/form-control#disabled">
<DocsExample href="forms/form-control#disabled">
<CFormInput
type="text"
placeholder="Disabled input"
@@ -95,7 +95,7 @@
readOnly
/>
<br />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -111,14 +111,14 @@
appear lighter (just like disabled inputs), but retain the standard
cursor.
</p>
<Example href="forms/form-control#readonly">
<DocsExample href="forms/form-control#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -134,7 +134,7 @@
<code>plainText</code> boolean property to remove the default form
field styling and preserve the correct margin and padding.
</p>
<Example href="components/accordion">
<DocsExample href="components/accordion">
<CRow class="mb-3">
<CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
Email
@@ -157,8 +157,8 @@
<CFormInput type="password" id="inputPassword" />
</div>
</CRow>
</Example>
<Example href="components/accordion">
</DocsExample>
<DocsExample href="components/accordion">
<CForm class="row g-3">
<div class="col-auto">
<CFormLabel for="staticEmail2" class="visually-hidden">
@@ -186,7 +186,7 @@
<CButton type="submit" class="mb-3"> Confirm identity </CButton>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -196,7 +196,7 @@
<strong>Vue Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#file-input">
<DocsExample href="forms/form-control#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
@@ -221,7 +221,7 @@
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg" />
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -231,7 +231,7 @@
<strong>Vue Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#color">
<DocsExample href="forms/form-control#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
@@ -239,7 +239,7 @@
defaultValue="#563d7c"
title="Choose your color"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/InputGroup.vue
+22 -22
View File
@@ -14,7 +14,7 @@
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<Example href="forms/input-group">
<DocsExample href="forms/input-group">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
@@ -50,7 +50,7 @@
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -65,7 +65,7 @@
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
</p>
<Example href="forms/input-group#wrapping">
<DocsExample href="forms/input-group#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
@@ -74,7 +74,7 @@
aria-describedby="addon-wrapping"
/>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -92,7 +92,7 @@
<p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<Example href="forms/input-group#sizing">
<DocsExample href="forms/input-group#sizing">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
@@ -114,7 +114,7 @@
aria-describedby="inputGroup-sizing-lg"
/>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -127,7 +127,7 @@
<p class="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon instead of text.
</p>
<Example href="forms/input-group#checkboxes-and-radios">
<DocsExample href="forms/input-group#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
@@ -148,7 +148,7 @@
</CInputGroupText>
<CFormInput aria-label="Text input with radio button" />
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -163,13 +163,13 @@
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
</p>
<Example href="forms/input-group#multiple-inputs">
<DocsExample href="forms/input-group#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name" />
<CFormInput aria-label="Last name" />
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -183,7 +183,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#multiple-addons">
<DocsExample href="forms/input-group#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
@@ -194,7 +194,7 @@
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -208,7 +208,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#button-addons">
<DocsExample href="forms/input-group#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
@@ -250,7 +250,7 @@
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -260,7 +260,7 @@
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#buttons-with-dropdowns">
<DocsExample href="forms/input-group#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
@@ -318,7 +318,7 @@
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -328,7 +328,7 @@
<strong>Vue Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#segmented-buttons">
<DocsExample href="forms/input-group#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
@@ -361,7 +361,7 @@
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -371,7 +371,7 @@
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-select">
<DocsExample href="forms/input-group#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
Options
@@ -416,7 +416,7 @@
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -426,7 +426,7 @@
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-file-input">
<DocsExample href="forms/input-group#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
Upload
@@ -471,7 +471,7 @@
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Layout.vue
+18 -18
View File
@@ -11,7 +11,7 @@
for form layouts that require multiple columns, varied widths, and
additional alignment options.
</p>
<Example href="forms/layout#form-grid">
<DocsExample href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -20,7 +20,7 @@
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -38,7 +38,7 @@
, you can have control over the gutter width in as well the inline
as block direction.
</p>
<Example href="forms/layout#gutters">
<DocsExample href="forms/layout#gutters">
<CRow class="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -47,11 +47,11 @@
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="forms/layout#gutters">
<DocsExample href="forms/layout#gutters">
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
@@ -98,7 +98,7 @@
<CButton type="submit" color="primary">Sign in</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -122,7 +122,7 @@
removed the <code>padding-top</code> on our stacked radio inputs
label to better align the text baseline.
</p>
<Example href="forms/layout#horizontal-form">
<DocsExample href="forms/layout#horizontal-form">
<CForm>
<CRow class="mb-3">
<CFormLabel
@@ -185,7 +185,7 @@
</CRow>
<CButton type="submit" color="primary">Sign in</CButton>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -202,7 +202,7 @@
correctly follow the size of <code>.form-control-lg</code> and
<code>.form-control-sm</code>.
</p>
<Example href="forms/layout#horizontal-form-label-sizing">
<DocsExample href="forms/layout#horizontal-form-label-sizing">
<CRow class="mb-3">
<CFormLabel
for="colFormLabelSm"
@@ -250,7 +250,7 @@
/>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -270,7 +270,7 @@
rest, with specific column classes like
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<Example href="forms/layout#column-sizing">
<DocsExample href="forms/layout#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CFormInput placeholder="City" aria-label="City" />
@@ -282,7 +282,7 @@
<CFormInput placeholder="Zip" aria-label="Zip" />
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -300,7 +300,7 @@
only take up as much space as needed. Put another way, the column
sizes itself based on the contents.
</p>
<Example href="forms/layout#auto-sizing">
<DocsExample href="forms/layout#auto-sizing">
<CForm class="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel
@@ -351,12 +351,12 @@
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
You can then remix that once again with size-specific column
classes.
</p>
<Example href="forms/layout#auto-sizing">
<DocsExample href="forms/layout#auto-sizing">
<CForm class="row gx-3 gy-2 align-items-center">
<CCol :sm="3">
<CFormLabel
@@ -407,7 +407,7 @@
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -426,7 +426,7 @@
<code>.align-items-center</code> aligns the form elements to the
middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
</p>
<Example href="forms/layout#inline-forms">
<DocsExample href="forms/layout#inline-forms">
<CForm class="row row-cols-lg-auto g-3 align-items-center">
<CCol :xs="12">
<CFormLabel
@@ -468,7 +468,7 @@
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Range.vue
+8 -8
View File
@@ -14,10 +14,10 @@
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
</p>
<Example href="forms/range">
<DocsExample href="forms/range">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -31,10 +31,10 @@
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/range#disabled">
<DocsExample href="forms/range#disabled">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -50,10 +50,10 @@
You may specify new values for those using the <code>min</code> and
<code>max</code> attributes.
</p>
<Example href="forms/range#min-and-max">
<DocsExample href="forms/range#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -69,7 +69,7 @@
below, we double the number of steps by using
<code>step=&#34;0.5&#34;</code>.
</p>
<Example href="forms/range#steps">
<DocsExample href="forms/range#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
:min="0"
@@ -78,7 +78,7 @@
defaultValue="3"
id="customRange3"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Select.vue
+10 -10
View File
@@ -9,14 +9,14 @@
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example href="forms/select">
<DocsExample href="forms/select">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -30,7 +30,7 @@
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect
size="lg"
class="mb-3"
@@ -51,11 +51,11 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
@@ -66,11 +66,11 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
@@ -81,7 +81,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -95,14 +95,14 @@
Add the <code>disabled</code> boolean attribute on a select to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/select#disabled">
<DocsExample href="forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Validation.vue
+10 -10
View File
@@ -24,7 +24,7 @@
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
<Example href="forms/validation">
<DocsExample href="forms/validation">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -103,7 +103,7 @@
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -124,7 +124,7 @@
While these feedback styles cannot be styled with CSS, you can still
customize the feedback text through JavaScript.
</p>
<Example href="forms/validation#browser-defaults">
<DocsExample href="forms/validation#browser-defaults">
<CForm
class="row g-3 needs-validation"
:validated="validatedDefault01"
@@ -204,7 +204,7 @@
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -227,7 +227,7 @@
more than one <code>id</code> to be referenced, in case the field
already points to additional form text).
</p>
<Example href="forms/validation#server-side">
<DocsExample href="forms/validation#server-side">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@@ -320,7 +320,7 @@
<CButton color="primary" type="submit"> Submit form </CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -339,7 +339,7 @@
<li><code>&lt;CFormSelect&gt;</code>s</li>
<li><code>&lt;CFormCheck&gt;</code>s</li>
</ul>
<Example href="forms/validation#supported-elements">
<DocsExample href="forms/validation#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
@@ -410,7 +410,7 @@
>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -428,7 +428,7 @@
the example below, our column classes have this already, but your
project may require an alternative setup.
</p>
<Example href="forms/validation#tooltips">
<DocsExample href="forms/validation#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -498,7 +498,7 @@
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>