sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-30 00:44:20 +02:00
parent e3dd33a2f8
commit 0f2cb6c1db
40 changed files with 334 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/forms/ChecksRadios.vue
+17 -17
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
<DocsCallout name="Check and Radios" href="forms/checks-radios.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -9,7 +9,7 @@
<strong>Vue Checkbox</strong>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios">
<DocsExample href="forms/checks-radios.html">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck
id="flexCheckChecked"
@@ -31,7 +31,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>
<DocsExample href="forms/checks-radios#disabled">
<DocsExample href="forms/checks-radios.html#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
@@ -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>
<DocsExample href="forms/checks-radios#radios">
<DocsExample href="forms/checks-radios.html#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
@@ -77,7 +77,7 @@
<strong>Vue Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios#disabled-1">
<DocsExample href="forms/checks-radios.html#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
@@ -108,7 +108,7 @@
<code>switch</code> boolean properly to render a toggle switch.
Switches also support the <code>disabled</code> attribute.
</p>
<DocsExample href="forms/checks-radios#switches">
<DocsExample href="forms/checks-radios.html#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -139,7 +139,7 @@
<strong>Vue Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios#sizes">
<DocsExample href="forms/checks-radios.html#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -169,11 +169,11 @@
By default, any number of checkboxes and radios that are immediate
sibling will be vertically stacked and appropriately spaced.
</p>
<DocsExample href="forms/checks-radios#default-stacked">
<DocsExample href="forms/checks-radios.html#default-stacked">
<CFormCheck id="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</DocsExample>
<DocsExample href="forms/checks-radios#default-stacked">
<DocsExample href="forms/checks-radios.html#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
@@ -212,7 +212,7 @@
<code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>.
</p>
<DocsExample href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
@@ -223,7 +223,7 @@
disabled
/>
</DocsExample>
<DocsExample href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck
inline
type="radio"
@@ -263,7 +263,7 @@
Remember to still provide some form of accessible name for assistive
technologies (for instance, using <code>aria-label</code>).
</p>
<DocsExample href="forms/checks-radios#without-labels">
<DocsExample href="forms/checks-radios.html#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
@@ -292,7 +292,7 @@
<code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check"
@@ -300,7 +300,7 @@
label="Single toggle"
/>
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
@@ -309,7 +309,7 @@
defaultChecked
/>
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
@@ -319,7 +319,7 @@
/>
</DocsExample>
<h3>Radio toggle buttons</h3>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
@@ -360,7 +360,7 @@
Different variants of button, such at the various outlined styles,
are supported.
</p>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
src/views/forms/FloatingLabels.vue
+12 -12
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Floating Label" href="forms/floating-label" />
<CCol :xs="12">
<DocsCallout name="Floating Label" href="forms/floating-labels.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong>
@@ -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>
<DocsExample href="forms/floating-labels">
<DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -31,7 +31,7 @@
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<DocsExample href="forms/floating-labels">
<DocsExample href="forms/floating-labels.html">
<CFormFloating>
<CFormInput
type="email"
@@ -45,7 +45,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Textareas</small>
@@ -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>
<DocsExample href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
@@ -69,7 +69,7 @@
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<DocsExample href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
@@ -82,7 +82,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Selects</small>
@@ -97,7 +97,7 @@
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<DocsExample href="forms/floating-labels#selects">
<DocsExample href="forms/floating-labels.html#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@@ -111,7 +111,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Layout</small>
@@ -121,7 +121,7 @@
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<DocsExample href="forms/floating-labels#layout">
<DocsExample href="forms/floating-labels.html#layout">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>
src/views/forms/FormControl.vue
+15 -15
View File
@@ -1,15 +1,15 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Control" href="forms/form-control" />
<CCol :xs="12">
<DocsCallout name="Form Control" href="forms/form-control.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/form-control">
<DocsExample href="forms/form-control.html">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleFormControlInput1"
@@ -35,7 +35,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Sizing</small>
@@ -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>
<DocsExample href="forms/form-control#sizing">
<DocsExample href="forms/form-control.html#sizing">
<CFormInput
type="text"
size="lg"
@@ -69,7 +69,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Disabled</small>
@@ -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>
<DocsExample href="forms/form-control#disabled">
<DocsExample href="forms/form-control.html#disabled">
<CFormInput
type="text"
placeholder="Disabled input"
@@ -99,7 +99,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly</small>
@@ -111,7 +111,7 @@
appear lighter (just like disabled inputs), but retain the standard
cursor.
</p>
<DocsExample href="forms/form-control#readonly">
<DocsExample href="forms/form-control.html#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
@@ -122,7 +122,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly plain text</small>
@@ -190,13 +190,13 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/form-control#file-input">
<DocsExample href="forms/form-control.html#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
@@ -225,13 +225,13 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/form-control#color">
<DocsExample href="forms/form-control.html#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
src/views/forms/InputGroup.vue
+12 -12
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol xs=12>
<DocsCallout name="Input Group" href="forms/input-group" />
<DocsCallout name="Input Group" href="forms/input-group.html" />
</CCol>
<CCol xs=12>
<CCard class="mb-4">
@@ -14,7 +14,7 @@
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<DocsExample href="forms/input-group">
<DocsExample href="forms/input-group.html">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
@@ -65,7 +65,7 @@
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
</p>
<DocsExample href="forms/input-group#wrapping">
<DocsExample href="forms/input-group.html#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
@@ -92,7 +92,7 @@
<p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<DocsExample href="forms/input-group#sizing">
<DocsExample href="forms/input-group.html#sizing">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
@@ -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>
<DocsExample href="forms/input-group#checkboxes-and-radios">
<DocsExample href="forms/input-group.html#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
@@ -163,7 +163,7 @@
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
</p>
<DocsExample href="forms/input-group#multiple-inputs">
<DocsExample href="forms/input-group.html#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name" />
@@ -183,7 +183,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<DocsExample href="forms/input-group#multiple-addons">
<DocsExample href="forms/input-group.html#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
@@ -208,7 +208,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<DocsExample href="forms/input-group#button-addons">
<DocsExample href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
@@ -260,7 +260,7 @@
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#buttons-with-dropdowns">
<DocsExample href="forms/input-group.html#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
@@ -328,7 +328,7 @@
<strong>Vue Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#segmented-buttons">
<DocsExample href="forms/input-group.html#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
@@ -371,7 +371,7 @@
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#custom-select">
<DocsExample href="forms/input-group.html#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
Options
@@ -426,7 +426,7 @@
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#custom-file-input">
<DocsExample href="forms/input-group.html#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
Upload
src/views/forms/Layout.vue
+19 -43
View File
@@ -11,7 +11,7 @@
for form layouts that require multiple columns, varied widths, and
additional alignment options.
</p>
<DocsExample href="forms/layout#form-grid">
<DocsExample href="forms/layout.html#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -38,7 +38,7 @@
, you can have control over the gutter width in as well the inline
as block direction.
</p>
<DocsExample href="forms/layout#gutters">
<DocsExample href="forms/layout.html#gutters">
<CRow class="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -51,7 +51,7 @@
<p class="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<DocsExample href="forms/layout#gutters">
<DocsExample href="forms/layout.html#gutters">
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
@@ -122,13 +122,10 @@
removed the <code>padding-top</code> on our stacked radio inputs
label to better align the text baseline.
</p>
<DocsExample href="forms/layout#horizontal-form">
<DocsExample href="forms/layout.html#horizontal-form">
<CForm>
<CRow class="mb-3">
<CFormLabel
for="inputEmail3"
class="col-sm-2 col-form-label"
>
<CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">
Email
</CFormLabel>
<CCol :sm="10">
@@ -202,7 +199,7 @@
correctly follow the size of <code>.form-control-lg</code> and
<code>.form-control-sm</code>.
</p>
<DocsExample href="forms/layout#horizontal-form-label-sizing">
<DocsExample href="forms/layout.html#horizontal-form-label-sizing">
<CRow class="mb-3">
<CFormLabel
for="colFormLabelSm"
@@ -220,10 +217,7 @@
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="colFormLabel"
class="col-sm-2 col-form-label"
>
<CFormLabel for="colFormLabel" class="col-sm-2 col-form-label">
Email
</CFormLabel>
<CCol :sm="10">
@@ -270,7 +264,7 @@
rest, with specific column classes like
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<DocsExample href="forms/layout#column-sizing">
<DocsExample href="forms/layout.html#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CFormInput placeholder="City" aria-label="City" />
@@ -300,22 +294,16 @@
only take up as much space as needed. Put another way, the column
sizes itself based on the contents.
</p>
<DocsExample href="forms/layout#auto-sizing">
<DocsExample href="forms/layout.html#auto-sizing">
<CForm class="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInput"
>
<CFormLabel class="visually-hidden" for="autoSizingInput">
Name
</CFormLabel>
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInputGroup"
>
<CFormLabel class="visually-hidden" for="autoSizingInputGroup">
Username
</CFormLabel>
<CInputGroup>
@@ -327,10 +315,7 @@
</CInputGroup>
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingSelect"
>
<CFormLabel class="visually-hidden" for="autoSizingSelect">
Preference
</CFormLabel>
<CFormSelect id="autoSizingSelect">
@@ -356,13 +341,10 @@
You can then remix that once again with size-specific column
classes.
</p>
<DocsExample href="forms/layout#auto-sizing">
<DocsExample href="forms/layout.html#auto-sizing">
<CForm class="row gx-3 gy-2 align-items-center">
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeInputName"
>
<CFormLabel class="visually-hidden" for="specificSizeInputName">
Name
</CFormLabel>
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
@@ -383,10 +365,7 @@
</CInputGroup>
</CCol>
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeSelect"
>
<CFormLabel class="visually-hidden" for="specificSizeSelect">
Preference
</CFormLabel>
<CFormSelect id="specificSizeSelect">
@@ -426,7 +405,7 @@
<code>.align-items-center</code> aligns the form elements to the
middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
</p>
<DocsExample href="forms/layout#inline-forms">
<DocsExample href="forms/layout.html#inline-forms">
<CForm class="row row-cols-lg-auto g-3 align-items-center">
<CCol :xs="12">
<CFormLabel
@@ -444,10 +423,7 @@
</CInputGroup>
</CCol>
<CCol :xs="12">
<CFormLabel
class="visually-hidden"
for="inlineFormSelectPref"
>
<CFormLabel class="visually-hidden" for="inlineFormSelectPref">
Preference
</CFormLabel>
<CFormSelect id="inlineFormSelectPref">
@@ -477,6 +453,6 @@
<script>
export default {
name: "Layout",
};
name: 'Layout',
}
</script>
src/views/forms/Range.vue
+10 -10
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Range" href="forms/range" />
<CCol :xs="12">
<DocsCallout name="Range" href="forms/range.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small></small>
@@ -14,14 +14,14 @@
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
</p>
<DocsExample href="forms/range">
<DocsExample href="forms/range.html">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Disabled</small>
@@ -31,14 +31,14 @@
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
<DocsExample href="forms/range#disabled">
<DocsExample href="forms/range.html#disabled">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Min and max</small>
@@ -50,14 +50,14 @@
You may specify new values for those using the <code>min</code> and
<code>max</code> attributes.
</p>
<DocsExample href="forms/range#min-and-max">
<DocsExample href="forms/range.html#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Steps</small>
@@ -69,7 +69,7 @@
below, we double the number of steps by using
<code>step=&#34;0.5&#34;</code>.
</p>
<DocsExample href="forms/range#steps">
<DocsExample href="forms/range.html#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
:min="0"
src/views/forms/Select.vue
+10 -10
View File
@@ -1,15 +1,15 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Select" href="forms/select" />
<CCol :xs="12">
<DocsCallout name="Form Select" href="forms/select.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/select">
<DocsExample href="forms/select.html">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
@@ -20,7 +20,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Sizing</small>
@@ -30,7 +30,7 @@
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<DocsExample href="forms/select#sizing">
<DocsExample href="forms/select.html#sizing">
<CFormSelect
size="lg"
class="mb-3"
@@ -55,7 +55,7 @@
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<DocsExample href="forms/select#sizing">
<DocsExample href="forms/select.html#sizing">
<CFormSelect
size="lg"
multiple
@@ -70,7 +70,7 @@
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<DocsExample href="forms/select#sizing">
<DocsExample href="forms/select.html#sizing">
<CFormSelect
size="lg"
multiple
@@ -85,7 +85,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Disabled</small>
@@ -95,7 +95,7 @@
Add the <code>disabled</code> boolean attribute on a select to give
it a grayed out appearance and remove pointer events.
</p>
<DocsExample href="forms/select#disabled">
<DocsExample href="forms/select.html#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
src/views/forms/Validation.vue
+10 -13
View File
@@ -1,8 +1,5 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Validation" href="forms/validation" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
@@ -24,7 +21,7 @@
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
<DocsExample href="forms/validation">
<DocsExample href="forms/validation.html">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -88,7 +85,7 @@
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
@@ -99,7 +96,7 @@
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
@@ -124,7 +121,7 @@
While these feedback styles cannot be styled with CSS, you can still
customize the feedback text through JavaScript.
</p>
<DocsExample href="forms/validation#browser-defaults">
<DocsExample href="forms/validation.html#browser-defaults">
<CForm
class="row g-3 needs-validation"
:validated="validatedDefault01"
@@ -189,7 +186,7 @@
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
@@ -200,7 +197,7 @@
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
@@ -227,7 +224,7 @@
more than one <code>id</code> to be referenced, in case the field
already points to additional form text).
</p>
<DocsExample href="forms/validation#server-side">
<DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@@ -339,7 +336,7 @@
<li><code>&lt;CFormSelect&gt;</code>s</li>
<li><code>&lt;CFormCheck&gt;</code>s</li>
</ul>
<DocsExample href="forms/validation#supported-elements">
<DocsExample href="forms/validation.html#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
@@ -428,7 +425,7 @@
the example below, our column classes have this already, but your
project may require an alternative setup.
</p>
<DocsExample href="forms/validation#tooltips">
<DocsExample href="forms/validation.html#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -494,7 +491,7 @@
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12" class="position-relative">
<CCol :xs="12" class="position-relative">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>