sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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/Select.vue
+116
View File
@@ -0,0 +1,116 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Select" href="forms/select" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example href="forms/select">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
class="mb-3"
aria-label="Large select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect
size="sm"
class="mb-3"
aria-label="Small select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
aria-label="Multiple select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
aria-label="Multiple select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> boolean attribute on a select to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Select",
};
</script>