feat: add CFormRadio amd CFormFile custom inputs

This commit is contained in:
woothu
2019-04-04 09:30:42 +02:00
parent 3a9bc09c3a
commit 53a9f470e5
+38 -9
View File
@@ -183,12 +183,30 @@
v-for="option in options" v-for="option in options"
:key="option" :key="option"
:label="option" :label="option"
:type="[0,1,4,5].includes(key) ? 'radio' : 'checkbox'"
:value="option" :value="option"
:custom="key > 3" :custom="key > 1"
:name="`Option 1${key}`" :name="`Option 1${key}`"
:checked="[0,1,4,5].includes(key) ? :checked="Math.random() > 0.6"
`Option 1` : Math.random() > 0.6" :class="key % 2 === 1 ? 'form-check-inline' : ''"
/>
</CCol>
</div>
</template>
<template v-for="(name, key) in radioNames">
<div class="form-row form-group" :key="name">
<CCol sm="3">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CFormRadio
v-for="(option, optKey) in options"
:key="option"
:label="option"
type="radio"
:value="option"
:custom="key > 1"
:name="`Option 1${key}`"
checked="Option 1"
:class="key % 2 === 1 ? 'form-check-inline' : ''" :class="key % 2 === 1 ? 'form-check-inline' : ''"
/> />
</CCol> </CCol>
@@ -203,6 +221,17 @@
horizontal horizontal
multiple multiple
/> />
<CFormFile
label="File custom input"
horizontal
custom
/>
<CFormFile
label="Multiple file custom input"
horizontal
multiple
custom
/>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
@@ -778,7 +807,7 @@
</template> </template>
</CFormInput> </CFormInput>
<CFormInput label="Two-buttons append"> <CFormInput label="Two-buttons append">
<template v-slot:append> <template #append>
<CButton variant="primary">Search</CButton> <CButton variant="primary">Search</CButton>
<CButton variant="danger">Options</CButton> <CButton variant="danger">Options</CButton>
</template> </template>
@@ -815,10 +844,10 @@ export default {
horizontal: { label:'col-3', input:'col-9' }, horizontal: { label:'col-3', input:'col-9' },
options: ['Option 1', 'Option 2', 'Option 3'], options: ['Option 1', 'Option 2', 'Option 3'],
formCollapsed: true, formCollapsed: true,
checkboxNames: ['Radios', 'Inline Radios', checkboxNames: ['Checkboxes', 'Inline Checkboxes',
'Checkboxes', 'Inline Checkboxes', 'Checkboxes - custom', 'Inline Checkboxes - custom'],
'Radios - custom', 'Inline Radios - custom', radioNames: ['Radios', 'Inline Radios',
'Checkboxes - custom', 'Inline Checkboxes - custom'] 'Radios - custom', 'Inline Radios - custom']
} }
}, },
updated () { updated () {