refactor: update example views
This commit is contained in:
Łukasz Holeczek
+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>
|
||||
|
||||
Reference in New Issue
Block a user