sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 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/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>