refactor: update example views
This commit is contained in:
Łukasz Holeczek
@@ -209,7 +209,7 @@
|
||||
<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>inline</code> boolean property to any
|
||||
<code><CFormCheck></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios.html#inline">
|
||||
@@ -406,6 +406,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChecksRadios",
|
||||
};
|
||||
name: 'ChecksRadios',
|
||||
}
|
||||
</script>
|
||||
|
||||
+181
-154
@@ -1,160 +1,187 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Floating Label" href="forms/floating-labels.html" />
|
||||
</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><CFormInput></code> and <code><CFormLabel></code>
|
||||
elements in <code>CFormFloating</code> to enable floating labels with textual form
|
||||
fields. A <code>placeholder</code> is required on each <code><CFormInput></code>
|
||||
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>
|
||||
pseudo-element. Also note that the <code><CFormInput></code> must come first so
|
||||
we can utilize a sibling selector (e.g., <code>~</code>).
|
||||
</p>
|
||||
<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>
|
||||
</CFormFloating>
|
||||
<CFormFloating>
|
||||
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
|
||||
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
<p class="text-medium-emphasis small">
|
||||
When there's a <code>value</code> already defined, <code><CFormLabel></code>
|
||||
s will automatically adjust to their floated position.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html">
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputValue"
|
||||
placeholder="name@example.com"
|
||||
defaultValue="test@example.com"
|
||||
/>
|
||||
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</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><CFormTextarea></code>s will be the same height as
|
||||
<code><CFormInput></code>s.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
id="floatingTextarea"
|
||||
placeholder="Leave a comment here"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
<p class="text-medium-emphasis small">
|
||||
To set a custom height on your <code><CFormTextarea;></code>, do not use the
|
||||
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
|
||||
inline or via custom CSS).
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
placeholder="Leave a comment here"
|
||||
id="floatingTextarea2"
|
||||
style="height: 100px"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</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><CFormInput></code>, floating labels are only available on
|
||||
<code><CFormSelect></code>s. They work in the same way, but unlike
|
||||
<code><CFormInput></code>s, they'll always show the
|
||||
<code><CFormLabel></code> in its floated state.
|
||||
<strong>
|
||||
Selects with <code>size</code> and <code>multiple</code> are not supported.
|
||||
</strong>
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html#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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/floating-labels.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Floating Label" href="forms/floating-labels.html" />
|
||||
</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><CFormInput></code> and
|
||||
<code><CFormLabel></code> elements in
|
||||
<code>CFormFloating</code> to enable floating labels with textual
|
||||
form fields. A <code>placeholder</code> is required on each
|
||||
<code><CFormInput></code> as our method of CSS-only floating
|
||||
labels uses the <code>:placeholder-shown</code> pseudo-element. Also
|
||||
note that the <code><CFormInput></code> must come first so we
|
||||
can utilize a sibling selector (e.g., <code>~</code>).
|
||||
</p>
|
||||
<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>
|
||||
</CFormFloating>
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="password"
|
||||
id="floatingPassword"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
<p class="text-medium-emphasis small">
|
||||
When there's a <code>value</code> already defined,
|
||||
<code><CFormLabel></code>
|
||||
s will automatically adjust to their floated position.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html">
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputValue"
|
||||
placeholder="name@example.com"
|
||||
defaultValue="test@example.com"
|
||||
/>
|
||||
<CFormLabel htmlFor="floatingInputValue"
|
||||
>Input with value</CFormLabel
|
||||
>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</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><CFormTextarea></code>s will be the same
|
||||
height as <code><CFormInput></code>s.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
id="floatingTextarea"
|
||||
placeholder="Leave a comment here"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
<p class="text-medium-emphasis small">
|
||||
To set a custom height on your <code><CFormTextarea;></code>,
|
||||
do not use the <code>rows</code> attribute. Instead, set an explicit
|
||||
<code>height</code> (either inline or via custom CSS).
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
placeholder="Leave a comment here"
|
||||
id="floatingTextarea2"
|
||||
style="height: 100px"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</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><CFormInput></code>, floating labels are only
|
||||
available on <code><CFormSelect></code>s. They work in the
|
||||
same way, but unlike <code><CFormInput></code>s, they'll
|
||||
always show the <code><CFormLabel></code> in its floated
|
||||
state.
|
||||
<strong>
|
||||
Selects with <code>size</code> and <code>multiple</code> are not
|
||||
supported.
|
||||
</strong>
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels.html#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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/floating-labels.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FloatingLabels",
|
||||
};
|
||||
name: 'FloatingLabels',
|
||||
}
|
||||
</script>
|
||||
|
||||
+509
-473
@@ -1,485 +1,521 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs=12>
|
||||
<DocsCallout name="Input Group" href="forms/input-group.html" />
|
||||
</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><CFormLabel></code>s outside the
|
||||
input group.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="basic-addon1"
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Input Group" href="forms/input-group.html" />
|
||||
</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><CFormLabel></code>s outside the input group.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html">
|
||||
<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's username"
|
||||
aria-label="Recipient'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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/input-group.html#wrapping">
|
||||
<CInputGroup class="flex-nowrap">
|
||||
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</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><CInputGroup></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'tsupported.</strong
|
||||
>
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</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's addon
|
||||
instead of text.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html#checkboxes-and-radios">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
value=""
|
||||
aria-label="Checkbox for following text input"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="basic-addon2"
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with checkbox" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
value=""
|
||||
aria-label="Radio button for following text input"
|
||||
/>
|
||||
<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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/input-group.html#wrapping">
|
||||
<CInputGroup class="flex-nowrap">
|
||||
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</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><CInputGroup></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'tsupported.</strong>
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</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's addon instead of text.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</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><CFormInput></code>s are supported visually, validation
|
||||
styles are only available for input groups with a single
|
||||
<code><CFormInput></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormInput aria-label="First name" />
|
||||
<CFormInput aria-label="Last name" />
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/input-group.html#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">
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with radio button" />
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</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><CFormInput></code>s are supported
|
||||
visually, validation styles are only available for input groups with
|
||||
a single <code><CFormInput></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group.html#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormInput aria-label="First name" />
|
||||
<CFormInput aria-label="Last name" />
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Segmented buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#segmented-buttons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
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">
|
||||
Button
|
||||
Action
|
||||
</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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Segmented buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Custom select</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Custom file input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Custom select</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Custom file input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group.html#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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InputGroup",
|
||||
};
|
||||
name: 'InputGroup',
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -76,14 +76,14 @@
|
||||
<CFormLabel for="inputCity">City</CFormLabel>
|
||||
<CFormInput id="inputCity" />
|
||||
</CCol>
|
||||
<CCol md="{4}">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="inputState">State</CFormLabel>
|
||||
<CFormSelect id="inputState">
|
||||
<option>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="{2}">
|
||||
<CCol :md="2">
|
||||
<CFormLabel for="inputZip">Zip</CFormLabel>
|
||||
<CFormInput id="inputZip" />
|
||||
</CCol>
|
||||
@@ -266,7 +266,7 @@
|
||||
</p>
|
||||
<DocsExample href="forms/layout.html#column-sizing">
|
||||
<CRow class="g-3">
|
||||
<CCol sm="{7}">
|
||||
<CCol :sm="7">
|
||||
<CFormInput placeholder="City" aria-label="City" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
|
||||
@@ -5,9 +5,7 @@
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Range</strong> <small></small>
|
||||
</CCardHeader>
|
||||
<CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create custom
|
||||
@@ -87,6 +85,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Range",
|
||||
};
|
||||
name: 'Range',
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -111,6 +111,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Select",
|
||||
};
|
||||
name: 'Select',
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
:validated="validatedCustom01"
|
||||
@submit="handleSubmitCustom01"
|
||||
>
|
||||
<CCol md="4">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="validationCustom01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationCustom01"
|
||||
@@ -37,7 +37,7 @@
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="validationCustom02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationCustom02"
|
||||
@@ -46,7 +46,7 @@
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
@@ -61,14 +61,14 @@
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCol :md="6">
|
||||
<CFormLabel for="validationCustom03">City</CFormLabel>
|
||||
<CFormInput id="validationCustom03" required />
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CCol :md="3">
|
||||
<CFormLabel for="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option disabled>Choose...</option>
|
||||
@@ -78,7 +78,7 @@
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CCol :md="3">
|
||||
<CFormLabel for="validationCustom05">City</CFormLabel>
|
||||
<CFormInput id="validationCustom05" required />
|
||||
<CFormFeedback invalid>
|
||||
@@ -127,7 +127,7 @@
|
||||
:validated="validatedDefault01"
|
||||
@submit="handleSubmitDefault01"
|
||||
>
|
||||
<CCol md="4">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="validationDefault01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationDefault01"
|
||||
@@ -136,7 +136,7 @@
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="validationDefault02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationDefault02"
|
||||
@@ -145,7 +145,7 @@
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CCol :md="4">
|
||||
<CFormLabel for="validationDefaultUsername"
|
||||
>Username</CFormLabel
|
||||
>
|
||||
@@ -162,14 +162,14 @@
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCol :md="6">
|
||||
<CFormLabel for="validationDefault03">City</CFormLabel>
|
||||
<CFormInput id="validationDefault03" required />
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CCol :md="3">
|
||||
<CFormLabel for="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option disabled>Choose...</option>
|
||||
@@ -179,7 +179,7 @@
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CCol :md="3">
|
||||
<CFormLabel for="validationDefault05">City</CFormLabel>
|
||||
<CFormInput id="validationDefault05" required />
|
||||
<CFormFeedback invalid>
|
||||
@@ -226,7 +226,7 @@
|
||||
</p>
|
||||
<DocsExample href="forms/validation.html#server-side">
|
||||
<CForm class="row g-3 needs-validation">
|
||||
<CCol :md="4">
|
||||
<CCol ::md="4">
|
||||
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
@@ -237,7 +237,7 @@
|
||||
/>
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol :md="4">
|
||||
<CCol ::md="4">
|
||||
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
@@ -248,7 +248,7 @@
|
||||
/>
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol :md="4">
|
||||
<CCol ::md="4">
|
||||
<CFormLabel htmlFor="validationServerUsername"
|
||||
>Username</CFormLabel
|
||||
>
|
||||
@@ -432,7 +432,7 @@
|
||||
:validated="validatedTooltip01"
|
||||
@submit="handleSubmitTooltip01"
|
||||
>
|
||||
<CCol md="4" class="position-relative">
|
||||
<CCol :md="4" class="position-relative">
|
||||
<CFormLabel for="validationTooltip01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationTooltip01"
|
||||
@@ -441,7 +441,7 @@
|
||||
/>
|
||||
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" class="position-relative">
|
||||
<CCol :md="4" class="position-relative">
|
||||
<CFormLabel for="validationTooltip02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationTooltip02"
|
||||
@@ -450,7 +450,7 @@
|
||||
/>
|
||||
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" class="position-relative">
|
||||
<CCol :md="4" class="position-relative">
|
||||
<CFormLabel for="validationTooltipUsername"
|
||||
>Username</CFormLabel
|
||||
>
|
||||
@@ -467,14 +467,14 @@
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6" class="position-relative">
|
||||
<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">
|
||||
<CCol :md="3" class="position-relative">
|
||||
<CFormLabel for="validationTooltip04">City</CFormLabel>
|
||||
<CFormSelect id="validationTooltip04" required>
|
||||
<option disabled value="">Choose...</option>
|
||||
@@ -484,7 +484,7 @@
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3" class="position-relative">
|
||||
<CCol :md="3" class="position-relative">
|
||||
<CFormLabel for="validationTooltip05">City</CFormLabel>
|
||||
<CFormInput id="validationTooltip05" required />
|
||||
<CFormFeedback tooltip invalid>
|
||||
@@ -504,39 +504,39 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Validation",
|
||||
name: 'Validation',
|
||||
data: () => {
|
||||
return {
|
||||
validatedCustom01: null,
|
||||
validatedDefault01: null,
|
||||
validatedTooltip01: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmitCustom01(event) {
|
||||
const form = event.currentTarget;
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedCustom01 = true;
|
||||
this.validatedCustom01 = true
|
||||
},
|
||||
handleSubmitDefault01(event) {
|
||||
const form = event.currentTarget;
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedDefault01 = true;
|
||||
this.validatedDefault01 = true
|
||||
},
|
||||
handleSubmitTooltip01(event) {
|
||||
const form = event.currentTarget;
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedTooltip01 = true;
|
||||
this.validatedTooltip01 = true
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user