refactor: update examples
This commit is contained in:
Łukasz Holeczek
@@ -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><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>
|
||||
<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's a <code>value</code> already defined, <code><CFormLabel></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><CFormTextarea></code>s will be the same height as
|
||||
<code><CFormInput></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><CFormTextarea;></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><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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user