feat: add CFormRadio amd CFormFile custom inputs
This commit is contained in:
@@ -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 () {
|
||||||
|
|||||||
Reference in New Issue
Block a user