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-26 17:41:07 +02:00
parent 4bd77fc24d b61206112f
commit c7f687982d
96 changed files with 12979 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/forms/ChecksRadios.vue
+411
View File
@@ -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>&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">
<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>&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">
<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>&lt;CFormCheck&gt;</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>&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">
<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>
src/views/forms/FloatingLabels.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Floating Label" href="forms/floating-label" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>
elements in <code>CFormFloating</code> to enable floating labels with textual form
fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>
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">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</Example>
<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">
<CFormFloating>
<CFormInput
type="email"
id="floatingInputValue"
placeholder="name@example.com"
defaultValue="test@example.com"
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Textareas</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
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">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
<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">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
id="floatingTextarea2"
style="height: 100px"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Selects</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the
<code>&lt;CFormLabel&gt;</code> in its floated state.
<strong>
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Layout</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
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">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>
<CFormInput
type="email"
id="floatingInputGrid"
placeholder="name@example.com"
defaultValue="email@example.com"
/>
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
</CFormFloating>
</CCol>
<CCol md>
<CFormFloating>
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
</CFormFloating>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "FloatingLabels",
};
</script>
src/views/forms/FormControl.vue
+271
View File
@@ -0,0 +1,271 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Control" href="forms/form-control" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleFormControlInput1"
>Email address</CFormLabel
>
<CFormInput
type="email"
id="exampleFormControlInput1"
placeholder="name@example.com"
/>
</div>
<div class="mb-3">
<CFormLabel for="exampleFormControlTextarea1"
>Example textarea</CFormLabel
>
<CFormTextarea
id="exampleFormControlTextarea1"
rows="3"
></CFormTextarea>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
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">
<CFormInput
type="text"
size="lg"
placeholder="Large input"
aria-label="lg input example"
/>
<br />
<CFormInput
type="text"
placeholder="Default input"
aria-label="default input example"
/>
<br />
<CFormInput
type="text"
size="sm"
placeholder="Small input"
aria-label="sm input example"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
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">
<CFormInput
type="text"
placeholder="Disabled input"
aria-label="Disabled input example"
disabled
/>
<br />
<CFormInput
type="text"
placeholder="Disabled readonly input"
aria-label="Disabled input example"
disabled
readOnly
/>
<br />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to
prevent modification of the input&#39;s value. Read-only inputs
appear lighter (just like disabled inputs), but retain the standard
cursor.
</p>
<Example href="forms/form-control#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly plain text</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you want to have <code>&lt;input readonly&gt;</code> elements in
your form styled as plain text, use the
<code>plainText</code> boolean property to remove the default form
field styling and preserve the correct margin and padding.
</p>
<Example href="components/accordion">
<CRow class="mb-3">
<CFormLabel
for="staticEmail"
class="col-sm-2 col-form-label"
>
Email
</CFormLabel>
<div class="col-sm-10">
<CFormInput
type="text"
id="staticEmail"
defaultValue="email@example.com"
readOnly
plainText
/>
</div>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="inputPassword"
class="col-sm-2 col-form-label"
>
Password
</CFormLabel>
<div class="col-sm-10">
<CFormInput type="password" id="inputPassword" />
</div>
</CRow>
</Example>
<Example href="components/accordion">
<CForm class="row g-3">
<div class="col-auto">
<CFormLabel for="staticEmail2" class="visually-hidden">
Email
</CFormLabel>
<CFormInput
type="text"
id="staticEmail2"
defaultValue="email@example.com"
readOnly
plainText
/>
</div>
<div class="col-auto">
<CFormLabel
for="inputPassword2"
class="visually-hidden"
>
Password
</CFormLabel>
<CFormInput
type="password"
id="inputPassword2"
placeholder="Password"
/>
</div>
<div class="col-auto">
<CButton type="submit" class="mb-3">
Confirm identity
</CButton>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#file-input">
<div class="mb-3">
<CFormLabel for="formFile"
>Default file input example</CFormLabel
>
<CFormInput type="file" id="formFile" />
</div>
<div class="mb-3">
<CFormLabel for="formFileMultiple"
>Multiple files input example</CFormLabel
>
<CFormInput type="file" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
<CFormLabel for="formFileDisabled"
>Disabled file input example</CFormLabel
>
<CFormInput type="file" id="formFileDisabled" disabled />
</div>
<div class="mb-3">
<CFormLabel for="formFileSm"
>Small file input example</CFormLabel
>
<CFormInput type="file" size="sm" id="formFileSm" />
</div>
<div>
<CFormLabel for="formFileLg"
>Large file input example</CFormLabel
>
<CFormInput type="file" size="lg" id="formFileLg" />
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
id="exampleColorInput"
defaultValue="#563d7c"
title="Choose your color"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "FormControl",
};
</script>
src/views/forms/InputGroup.vue
+485
View File
@@ -0,0 +1,485 @@
<template>
<CRow>
<CCol xs=12>
<DocsCallout name="Input Group" href="forms/input-group" />
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place one add-on or button on either side of an input. You may also place one on both
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<Example href="forms/input-group">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput
placeholder="Recipient&#39;s username"
aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2"
/>
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
</CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CFormInput aria-label="Amount (to the nearest dollar)" />
<CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput placeholder="Username" aria-label="Username" />
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Server" aria-label="Server" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Wrapping</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
</p>
<Example href="forms/input-group#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
and contents within will automatically resize—no need for repeating the form control
size classes on each element.
</p>
<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">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
/>
</CInputGroup>
<CInputGroup size="lg">
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg"
/>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<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">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
type="checkbox"
value=""
aria-label="Checkbox for following text input"
/>
</CInputGroupText>
<CFormInput aria-label="Text input with checkbox" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>
<CFormCheck
type="radio"
value=""
aria-label="Radio button for following text input"
/>
</CInputGroupText>
<CFormInput aria-label="Text input with radio button" />
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Multiple inputs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
</p>
<Example 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>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Multiple addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Button addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
</CButton>
<CFormInput
placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<CButton type="button" color="secondary" variant="outline" id="button-addon2">
Button
</CButton>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormInput placeholder="" aria-label="Example text with two button addons" />
</CInputGroup>
<CInputGroup>
<CFormInput
placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
/>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with dropdown button" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput aria-label="Text input with dropdown button" />
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
<CInputGroup>
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with 2 dropdown buttons" />
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
Action
</CButton>
<CDropdownToggle color="secondary" variant="outline" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with segmented dropdown button" />
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Text input with segmented dropdown button" />
<CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline">
Action
</CButton>
<CDropdownToggle color="secondary" variant="outline" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
Options
</CInputGroupText>
<CFormSelect id="inputGroupSelect01">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormSelect id="inputGroupSelect02">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CInputGroupText component="label" for="inputGroupSelect02">
Options
</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CInputGroup>
<CInputGroup>
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
Upload
</CInputGroupText>
<CFormInput type="file" id="inputGroupFile01" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput type="file" id="inputGroupFile02" />
<CInputGroupText component="label" for="inputGroupFile02">
Upload
</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon03"
>
Button
</CButton>
<CFormInput
type="file"
id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03"
aria-label="Upload"
/>
</CInputGroup>
<CInputGroup>
<CFormInput
type="file"
id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04"
aria-label="Upload"
/>
<CButton
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon04"
>
Button
</CButton>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "InputGroup",
};
</script>
src/views/forms/Layout.vue
+482
View File
@@ -0,0 +1,482 @@
<template>
<CRow>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Form grid</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
More complex forms can be built using our grid classes. Use these
for form layouts that require multiple columns, varied widths, and
additional alignment options.
</p>
<Example href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
</CCol>
<CCol xs>
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Gutters</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By adding
<a href="https://coreui.io/docs/layout/gutters/"
>gutter modifier classes</a
>
, you can have control over the gutter width in as well the inline
as block direction.
</p>
<Example href="forms/layout#gutters">
<CRow class="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
</CCol>
<CCol xs>
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
<p class="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="forms/layout#gutters">
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
<CFormInput type="email" id="inputEmail4" />
</CCol>
<CCol :md="6">
<CFormLabel for="inputPassword4">Password</CFormLabel>
<CFormInput type="password" id="inputPassword4" />
</CCol>
<CCol :xs="12">
<CFormLabel for="inputAddress">Address</CFormLabel>
<CFormInput id="inputAddress" placeholder="1234 Main St" />
</CCol>
<CCol :xs="12">
<CFormLabel for="inputAddress2">Address 2</CFormLabel>
<CFormInput
id="inputAddress2"
placeholder="Apartment, studio, or floor"
/>
</CCol>
<CCol :md="6">
<CFormLabel for="inputCity">City</CFormLabel>
<CFormInput id="inputCity" />
</CCol>
<CCol md="{4}">
<CFormLabel for="inputState">State</CFormLabel>
<CFormSelect id="inputState">
<option>Choose...</option>
<option>...</option>
</CFormSelect>
</CCol>
<CCol md="{2}">
<CFormLabel for="inputZip">Zip</CFormLabel>
<CFormInput id="inputZip" />
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="gridCheck"
label="Check me out"
/>
</CCol>
<CCol :xs="12">
<CButton type="submit" color="primary">Sign in</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Horizontal form</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create horizontal forms with the grid by adding the
<code>.row</code> class to form groups and using the
<code>.col-*-*</code> classes to specify the width of your labels
and controls. Be sure to add <code>.col-form-label</code> to your
<code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically
centered with their associated form controls.
</p>
<p class="text-medium-emphasis small">
At times, you maybe need to use margin or padding utilities to
create that perfect alignment you need. For example, we&#39;ve
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">
<CForm>
<CRow class="mb-3">
<CFormLabel
for="inputEmail3"
class="col-sm-2 col-form-label"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput type="email" id="inputEmail3" />
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="inputPassword3"
class="col-sm-2 col-form-label"
>
Password
</CFormLabel>
<CCol :sm="10">
<CFormInput type="password" id="inputPassword3" />
</CCol>
</CRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol :sm="10">
<CFormCheck
type="radio"
name="gridRadios"
id="gridRadios1"
value="option1"
label="First radio"
defaultChecked
/>
<CFormCheck
type="radio"
name="gridRadios"
id="gridRadios2"
value="option2"
label="Second radio"
/>
<CFormCheck
type="radio"
name="gridRadios"
id="gridRadios3"
value="option3"
label="Third disabled radio"
disabled
/>
</CCol>
</fieldset>
<CRow class="mb-3">
<div class="col-sm-10 offset-sm-2">
<CFormCheck
type="checkbox"
id="gridCheck1"
label="Example checkbox"
/>
</div>
</CRow>
<CButton type="submit" color="primary">Sign in</CButton>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Horizontal form label sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Be sure to use <code>.col-form-label-sm</code> or
<code>.col-form-label-lg</code> to your
<code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to
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">
<CRow class="mb-3">
<CFormLabel
for="colFormLabelSm"
class="col-sm-2 col-form-label col-form-label-sm"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
class="form-control form-control-sm"
id="colFormLabelSm"
placeholder="col-form-label-sm"
/>
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="colFormLabel"
class="col-sm-2 col-form-label"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
id="colFormLabel"
placeholder="col-form-label"
/>
</CCol>
</CRow>
<CRow>
<CFormLabel
for="colFormLabelLg"
class="col-sm-2 col-form-label col-form-label-lg"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
class="form-control form-control-lg"
id="colFormLabelLg"
placeholder="col-form-label-lg"
/>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Column sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
As shown in the previous examples, our grid system allows you to
place any number of
<code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>.
They&#39;ll split the available width equally between them. You may
also pick a subset of your columns to take up more or less space,
while the remaining <code>&lt;CCol&gt;</code>s equally split the
rest, with specific column classes like
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<Example href="forms/layout#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CFormInput placeholder="City" aria-label="City" />
</CCol>
<CCol sm>
<CFormInput placeholder="State" aria-label="State" />
</CCol>
<CCol sm>
<CFormInput placeholder="Zip" aria-label="Zip" />
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Auto-sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The example below uses a flexbox utility to vertically center the
contents and changes
<code>&lt;CCol&gt;</code> to
<code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your columns
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">
<CForm class="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInput"
>
Name
</CFormLabel>
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInputGroup"
>
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput
id="autoSizingInputGroup"
placeholder="Username"
/>
</CInputGroup>
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingSelect"
>
Preference
</CFormLabel>
<CFormSelect id="autoSizingSelect">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck"
label="Remember me"
/>
</CCol>
<CCol xs="auto">
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
<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">
<CForm class="row gx-3 gy-2 align-items-center">
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeInputName"
>
Name
</CFormLabel>
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
</CCol>
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeInputGroupUsername"
>
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput
id="specificSizeInputGroupUsername"
placeholder="Username"
/>
</CInputGroup>
</CCol>
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeSelect"
>
Preference
</CFormLabel>
<CFormSelect id="specificSizeSelect">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck2"
label="Remember me"
/>
</CCol>
<CCol xs="auto">
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Inline forms</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create
horizontal layouts. By adding
<a href="https://coreui.io/docs/layout/gutters/"
>gutter modifier classes</a
>, we will have gutters in horizontal and vertical directions. The
<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">
<CForm class="row row-cols-lg-auto g-3 align-items-center">
<CCol :xs="12">
<CFormLabel
class="visually-hidden"
for="inlineFormInputGroupUsername"
>
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput
id="inlineFormInputGroupUsername"
placeholder="Username"
/>
</CInputGroup>
</CCol>
<CCol :xs="12">
<CFormLabel
class="visually-hidden"
for="inlineFormSelectPref"
>
Preference
</CFormLabel>
<CFormSelect id="inlineFormSelectPref">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="inlineFormCheck"
label="Remember me"
/>
</CCol>
<CCol :xs="12">
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Layout",
};
</script>
src/views/forms/Range.vue
+92
View File
@@ -0,0 +1,92 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Range" href="forms/range" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small></small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create custom
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
</p>
<Example href="forms/range">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
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">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Min and max</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Range inputs have implicit values for <code>min</code> and
<code>max</code>— <code>0</code> and <code>100</code>, respectively.
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">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Steps</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By default, range inputs &#34;snap&#34; to integer values. To change
this, you can specify a <code>step</code> value. In the example
below, we double the number of steps by using
<code>step=&#34;0.5&#34;</code>.
</p>
<Example href="forms/range#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
:min="0"
:max="5"
:step="0.5"
defaultValue="3"
id="customRange3"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Range",
};
</script>
src/views/forms/Select.vue
+116
View File
@@ -0,0 +1,116 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Select" href="forms/select" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example 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>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
class="mb-3"
aria-label="Large select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect
size="sm"
class="mb-3"
aria-label="Small 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>
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
aria-label="Multiple 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>
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
aria-label="Multiple 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>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
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">
<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>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Select",
};
</script>
src/views/forms/Validation.vue
+545
View File
@@ -0,0 +1,545 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Validation" href="forms/validation" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Custom styles</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
For custom CoreUI form validation messages, you&#39;ll need to add
the
<code>noValidate</code> boolean property to your
<code>&lt;CForm&gt;</code>. This disables the browser default
feedback tooltips, but still provides access to the form validation
APIs in JavaScript. Try to submit the form below; our JavaScript
will intercept the submit button and relay feedback to you. When
attempting to submit, you&#39;ll see the <code>:invalid</code> and
<code>:valid</code> styles applied to your form controls.
</p>
<p class="text-medium-emphasis small">
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
<Example href="forms/validation">
<CForm
class="row g-3 needs-validation"
noValidate
:validated="validatedCustom01"
@submit="handleSubmitCustom01"
>
<CCol md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput
id="validationCustom01"
defaultValue="Mark"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput
id="validationCustom02"
defaultValue="Otto"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationCustomUsername"
defaultValue=""
aria-describedby="inputGroupPrepend"
required
/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CFormLabel for="validationCustom03">City</CFormLabel>
<CFormInput id="validationCustom03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04">
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationCustom05">City</CFormLabel>
<CFormInput id="validationCustom05" required />
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
label="Agree to terms and conditions"
required
/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Browser defaults</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Not interested in custom validation feedback messages or writing
JavaScript to change form behaviors? All good, you can use the
browser defaults. Try submitting the form below. Depending on your
browser and OS, you&#39;ll see a slightly different style of
feedback.
</p>
<p class="text-medium-emphasis small">
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">
<CForm
class="row g-3 needs-validation"
:validated="validatedDefault01"
@submit="handleSubmitDefault01"
>
<CCol md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput
id="validationDefault01"
defaultValue="Mark"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput
id="validationDefault02"
defaultValue="Otto"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationDefaultUsername"
>Username</CFormLabel
>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormInput
id="validationDefaultUsername"
defaultValue=""
aria-describedby="inputGroupPrepend02"
required
/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CFormLabel for="validationDefault03">City</CFormLabel>
<CFormInput id="validationDefault03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04">
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationDefault05">City</CFormLabel>
<CFormInput id="validationDefault05" required />
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
label="Agree to terms and conditions"
required
/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Server side</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
We recommend using client-side validation, but in case you require
server-side validation, you can indicate invalid and valid form
fields with <code>invalid</code> and <code>valid</code> boolean
properties.
</p>
<p class="text-medium-emphasis small">
For invalid fields, ensure that the invalid feedback/error message
is associated with the relevant form field using
<code>aria-describedby</code> (noting that this attribute allows
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">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer01"
defaultValue="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer02"
defaultValue="Otto"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel htmlFor="validationServerUsername"
>Username</CFormLabel
>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
<CFormInput
type="text"
id="validationServerUsername"
defaultValue=""
aria-describedby="inputGroupPrepend03"
invalid
required
/>
<CFormFeedback invalid
>Please choose a username.</CFormFeedback
>
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormInput
type="text"
id="validationServer03"
invalid
required
/>
<CFormFeedback invalid
>Please provide a valid city.</CFormFeedback
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" invalid>
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid
>Please provide a valid city.</CFormFeedback
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormInput
type="text"
id="validationServer05"
invalid
required
/>
<CFormFeedback invalid
>Please provide a valid zip.</CFormFeedback
>
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
label="Agree to terms and conditions"
invalid
required
/>
<CFormFeedback invalid
>You must agree before submitting.</CFormFeedback
>
</CCol>
<CCol :xs="12">
<CButton color="primary" type="submit"> Submit form </CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Supported elements</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Validation styles are available for the following form controls and
components:
</p>
<ul>
<li><code>&lt;CFormInput&gt;</code>s</li>
<li><code>&lt;CFormSelect&gt;</code>s</li>
<li><code>&lt;CFormCheck&gt;</code>s</li>
</ul>
<Example href="forms/validation#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
>Textarea</CFormLabel
>
<CFormTextarea
id="validationTextarea"
placeholder="Required example textarea"
invalid
required
></CFormTextarea>
<CFormFeedback invalid>
Please enter a message in the textarea.
</CFormFeedback>
</div>
<CFormCheck
class="mb-3"
id="validationFormCheck1"
label="Check this checkbox"
required
/>
<CFormFeedback invalid
>Example invalid feedback text</CFormFeedback
>
<CFormCheck
type="radio"
name="radio-stacked"
id="validationFormCheck2"
label="Check this checkbox"
required
/>
<CFormCheck
class="mb-3"
type="radio"
name="radio-stacked"
id="validationFormCheck3"
label="Or toggle this other radio"
required
/>
<CFormFeedback invalid
>More example invalid feedback text</CFormFeedback
>
<div class="mb-3">
<CFormSelect required aria-label="select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormFeedback invalid
>Example invalid select feedback</CFormFeedback
>
</div>
<div class="mb-3">
<CFormInput
type="file"
id="validationTextarea"
aria-label="file example"
required
/>
<CFormFeedback invalid
>Example invalid form file feedback</CFormFeedback
>
</div>
<div class="mb-3">
<CButton type="submit" color="primary" disabled
>Submit form</CButton
>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Tooltips</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If your form layout allows it, you can swap the text for the tooltip
to display validation feedback in a styled tooltip. Be sure to have
a parent with
<code>position: relative</code> on it for tooltip positioning. In
the example below, our column classes have this already, but your
project may require an alternative setup.
</p>
<Example href="forms/validation#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
:validated="validatedTooltip01"
@submit="handleSubmitTooltip01"
>
<CCol md="4" class="position-relative">
<CFormLabel for="validationTooltip01">Email</CFormLabel>
<CFormInput
id="validationTooltip01"
defaultValue="Mark"
required
/>
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4" class="position-relative">
<CFormLabel for="validationTooltip02">Email</CFormLabel>
<CFormInput
id="validationTooltip02"
defaultValue="Otto"
required
/>
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4" class="position-relative">
<CFormLabel for="validationTooltipUsername"
>Username</CFormLabel
>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationTooltipUsername"
defaultValue=""
aria-describedby="inputGroupPrepend"
required
/>
<CFormFeedback tooltip invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6" class="position-relative">
<CFormLabel for="validationTooltip03">City</CFormLabel>
<CFormInput id="validationTooltip03" required />
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" class="position-relative">
<CFormLabel for="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required>
<option disabled value="">Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" class="position-relative">
<CFormLabel for="validationTooltip05">City</CFormLabel>
<CFormInput id="validationTooltip05" required />
<CFormFeedback tooltip invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12" class="position-relative">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Validation",
data: () => {
return {
validatedCustom01: null,
validatedDefault01: null,
validatedTooltip01: null,
};
},
methods: {
handleSubmitCustom01(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.validatedCustom01 = true;
},
handleSubmitDefault01(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.validatedDefault01 = true;
},
handleSubmitTooltip01(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.validatedTooltip01 = true;
},
},
};
</script>