refactor: update examples

This commit is contained in:
Łukasz Holeczek
2021-08-30 00:44:20 +02:00
parent e3dd33a2f8
commit 0f2cb6c1db
40 changed files with 334 additions and 754 deletions
+12 -12
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Floating Label" href="forms/floating-label" />
<CCol :xs="12">
<DocsCallout name="Floating Label" href="forms/floating-labels.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong>
@@ -17,7 +17,7 @@
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
</p>
<DocsExample href="forms/floating-labels">
<DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -31,7 +31,7 @@
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<DocsExample href="forms/floating-labels">
<DocsExample href="forms/floating-labels.html">
<CFormFloating>
<CFormInput
type="email"
@@ -45,7 +45,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Textareas</small>
@@ -55,7 +55,7 @@
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
<code>&lt;CFormInput&gt;</code>s.
</p>
<DocsExample href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
@@ -69,7 +69,7 @@
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<DocsExample href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
@@ -82,7 +82,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Selects</small>
@@ -97,7 +97,7 @@
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<DocsExample href="forms/floating-labels#selects">
<DocsExample href="forms/floating-labels.html#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@@ -111,7 +111,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Layout</small>
@@ -121,7 +121,7 @@
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<DocsExample href="forms/floating-labels#layout">
<DocsExample href="forms/floating-labels.html#layout">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>