update code
This commit is contained in:
manhlab
96
resources/js/src/views/base/Breadcrumbs.vue
Normal file
96
resources/js/src/views/base/Breadcrumbs.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/breadcrumb"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBreadcrumb :items="items"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Breadcrumbs',
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
text: 'Admin',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Library'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items2: [
|
||||
{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
},
|
||||
{
|
||||
text: 'Go to widgets',
|
||||
to: '/Widgets'
|
||||
},
|
||||
{
|
||||
text: 'Go to Google',
|
||||
href: 'http://google.com'
|
||||
},
|
||||
{
|
||||
text: 'Current page'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items3: [
|
||||
{
|
||||
text: 'Added',
|
||||
to: '#2',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Custom',
|
||||
to: '#3',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
addClasses: 'font-xl text-danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.breadcrumb-item + .font-xl.breadcrumb-item::before {
|
||||
color: rgb(140, 195, 38);
|
||||
content: '>>';
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
289
resources/js/src/views/base/Cards.vue
Normal file
289
resources/js/src/views/base/Cards.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card title
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/card-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
<CCardFooter>Card Footer</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with switch
|
||||
<CSwitch
|
||||
class="float-right"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
color="info"
|
||||
data-on="On"
|
||||
data-off="Off"
|
||||
:checked="true"
|
||||
/>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge color="success" class="float-right">Success</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge shape="pill" color="danger" class="float-right">42</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="primary">
|
||||
<CCardHeader>Card outline primary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="secondary">
|
||||
<CCardHeader>Card outline secondary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="success">
|
||||
<CCardHeader>Card outline success</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="info">
|
||||
<CCardHeader>Card outline info</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="warning">
|
||||
<CCardHeader>Card outline warning</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="danger">
|
||||
<CCardHeader>Card outline danger</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="primary">
|
||||
<CCardHeader>Card with primary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="secondary">
|
||||
<CCardHeader>Card with secondary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="success">
|
||||
<CCardHeader>Card with success accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="danger">
|
||||
<CCardHeader>Card with danger accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard
|
||||
color="success"
|
||||
class="text-center"
|
||||
body-wrapper
|
||||
text-color="white"
|
||||
>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="secondary" class="text-center" body-wrapper>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="success" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show" color="secondary">
|
||||
<CCardHeader>
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||
<CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="isCollapsed" :duration="400">
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Cards',
|
||||
data: function () {
|
||||
return {
|
||||
show: true,
|
||||
isCollapsed: true,
|
||||
loremIpsum: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
50
resources/js/src/views/base/Carousels.vue
Normal file
50
resources/js/src/views/base/Carousels.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol md="12" lg="7">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Carousel</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/carousel"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel
|
||||
arrows
|
||||
indicators
|
||||
animate
|
||||
height="400px"
|
||||
>
|
||||
<CCarouselItem
|
||||
captionHeader="First Slide"
|
||||
image="https://picsum.photos/1024/480/?image=52"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
captionHeader="Blank page"
|
||||
:image="{ placeholderColor: 'grey' }"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
image="https://picsum.photos/1024/480/?image=54"
|
||||
/>
|
||||
</CCarousel>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Carousels'
|
||||
}
|
||||
</script>
|
||||
80
resources/js/src/views/base/Collapses.vue
Normal file
80
resources/js/src/views/base/Collapses.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Collapse </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/collapse"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton @click="collapse = !collapse" color="primary" class="mb-2">
|
||||
Toggle Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="collapse" :duration="400">
|
||||
<CCard body-wrapper>
|
||||
<CCardText>Collapse contents Here</CCardText>
|
||||
<CButton
|
||||
@click="innerCollapse = !innerCollapse"
|
||||
size="sm"
|
||||
color="secondary"
|
||||
>
|
||||
Toggle Inner Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="innerCollapse" class="mt-2">
|
||||
<CCard body-wrapper>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader
|
||||
@click="cardCollapse = !cardCollapse"
|
||||
class="btn text-left"
|
||||
>
|
||||
<strong>Collapsible card</strong>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="cardCollapse">
|
||||
<CCardBody class="m-1">
|
||||
{{text}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Collapses',
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
cardCollapse: true,
|
||||
innerCollapse: false,
|
||||
text: `
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
|
||||
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
|
||||
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
|
||||
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
|
||||
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore VHS.
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
881
resources/js/src/views/base/Forms.vue
Normal file
881
resources/js/src/views/base/Forms.vue
Normal file
@@ -0,0 +1,881 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Credit Card </strong> <small>Form</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/form-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Name"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Credit Card Number"
|
||||
placeholder="0000 0000 0000 0000"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Month"
|
||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Year"
|
||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="CVV/CVC"
|
||||
placeholder="123"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Company </strong><small>Form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Company"
|
||||
placeholder="Enter your company name"
|
||||
/>
|
||||
<CInput
|
||||
label="VAT"
|
||||
placeholder="PL1234567890"
|
||||
/>
|
||||
<CInput
|
||||
label="Street"
|
||||
placeholder="Enter street name"
|
||||
/>
|
||||
<CRow>
|
||||
<CCol sm="8">
|
||||
<CInput
|
||||
label="City"
|
||||
placeholder="Enter your city"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="Postal code"
|
||||
placeholder="Postal code"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CInput
|
||||
label="Country"
|
||||
placeholder="Country name"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Form</strong> Elements
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
description="Let us know your full name."
|
||||
label="Enter your name"
|
||||
horizontal
|
||||
autocomplete="name"
|
||||
/>
|
||||
<CInput
|
||||
label="Static"
|
||||
value="Username"
|
||||
horizontal
|
||||
plaintext
|
||||
/>
|
||||
<CInput
|
||||
label="Text input"
|
||||
description="This is a help text"
|
||||
placeholder="Text"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Date"
|
||||
type="date"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Email input"
|
||||
description="Please enter your email"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
horizontal
|
||||
autocomplete="email"
|
||||
/>
|
||||
<CInput
|
||||
label="Password Input"
|
||||
description="Please enter a complex password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
horizontal
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<CInput
|
||||
label="Disabled Input"
|
||||
placeholder="Disabled"
|
||||
horizontal
|
||||
disabled
|
||||
/>
|
||||
<CTextarea
|
||||
label="Textarea"
|
||||
placeholder="Content..."
|
||||
horizontal
|
||||
rows="9"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Large select"
|
||||
size="lg"
|
||||
horizontal
|
||||
:value.sync="selectedOption"
|
||||
:options="selectOptions"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Small select"
|
||||
size="sm"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
disabled
|
||||
/>
|
||||
<template v-for="(name, key) in checkboxNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol tag="label" sm="3" class="col-form-label">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||
<CInputCheckbox
|
||||
v-for="(option, optionIndex) in options"
|
||||
:key="key + option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
:custom="key > 1"
|
||||
:name="`Option 1${key}`"
|
||||
:checked="optionIndex === key"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<template v-for="(name, key) in radioNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol sm="3">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CInputRadioGroup
|
||||
class="col-sm-9"
|
||||
:options="options"
|
||||
:custom="key > 1"
|
||||
:checked="`Option ${key}`"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CRow>
|
||||
</template>
|
||||
<CInputFile
|
||||
label="File input"
|
||||
horizontal
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file input"
|
||||
horizontal
|
||||
multiple
|
||||
/>
|
||||
<CInputFile
|
||||
label="File custom input"
|
||||
horizontal
|
||||
custom
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file custom input"
|
||||
horizontal
|
||||
multiple
|
||||
custom
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Inline</strong> Form
|
||||
</CCardHeader>
|
||||
|
||||
<CCardBody>
|
||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-2"
|
||||
placeholder="Jane Doe"
|
||||
>
|
||||
<template #label>
|
||||
<small>Name: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="jane.doe@example.com"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #label>
|
||||
<small>Email: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Horizontal</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
horizontal
|
||||
placeholder="Enter Email..."
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
horizontal
|
||||
placeholder="Enter Password..."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Normal</strong> Form
|
||||
</CCardHeader>
|
||||
<CForm novalidate>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
placeholder="Enter Email..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
placeholder="Enter Password..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CForm>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Grid</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="3">
|
||||
<CInput class="mb-0" placeholder=".col-sm-3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="4">
|
||||
<CInput class="mb-0" placeholder=".col-sm-4"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="5">
|
||||
<CInput class="mb-0" placeholder=".col-sm-5"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CInput class="mb-0" placeholder=".col-sm-6"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="7">
|
||||
<CInput class="mb-0" placeholder=".col-sm-7"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="8">
|
||||
<CInput class="mb-0" placeholder=".col-sm-8"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="9">
|
||||
<CInput class="mb-0" placeholder=".col-sm-9"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="10">
|
||||
<CInput class="mb-0" placeholder=".col-sm-10"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="11">
|
||||
<CInput class="mb-0" placeholder=".col-sm-11"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<CInput class="mb-0" placeholder=".col-sm-12"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Small input"
|
||||
size="sm"
|
||||
horizontal
|
||||
placeholder="size='sm'"
|
||||
/>
|
||||
<CInput
|
||||
label="Default input"
|
||||
horizontal
|
||||
placeholder="normal"
|
||||
/>
|
||||
<CInput
|
||||
label="Large input"
|
||||
size="lg"
|
||||
horizontal
|
||||
placeholder="size='lg'"
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm validated novalidate>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is not required."
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
required
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide a required input."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Custom Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is valid."
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
value="Valid value"
|
||||
:is-valid="validator"
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
:is-valid="validator"
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-open"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="ex. $1.000.000"
|
||||
append=".00"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-euro"/></template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Buttons</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-magnifying-glass"/> Search
|
||||
</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend>
|
||||
<CButton color="primary"><CIcon name="cib-facebook" height="14"/></CButton>
|
||||
</template>
|
||||
<template #append>
|
||||
<CButton color="primary"><CIcon name="cib-twitter" height="14"/></CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput placeholder="...">
|
||||
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Split"
|
||||
color="primary"
|
||||
split
|
||||
>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input Grid for small devices! <small> <code>.col-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput prepend="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="Email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
prepend="Password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="primary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" class="btn btn-sm btn-secondary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="success">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol lg="12">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show">
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-pencil"/> Form Elements
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink
|
||||
class="card-header-action btn-minimize"
|
||||
@click="formCollapsed=!formCollapsed"
|
||||
>
|
||||
<CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="formCollapsed">
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Prepended text"
|
||||
description="Here's some help text"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended and prepended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
prepend="$"
|
||||
/>
|
||||
<CInput
|
||||
label="Append with button"
|
||||
description="Here's some help text"
|
||||
>
|
||||
<template #append>
|
||||
<CButton color="primary">Go!</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput label="Two-buttons append">
|
||||
<template #append>
|
||||
<CButton color="primary">Search</CButton>
|
||||
<CButton color="danger">Options</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<div class="form-actions">
|
||||
<CButton type="submit" color="primary">Save changes</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Forms',
|
||||
data () {
|
||||
return {
|
||||
selected: [], // Must be an array reference!
|
||||
show: true,
|
||||
horizontal: { label:'col-3', input:'col-9' },
|
||||
options: ['Option 1', 'Option 2', 'Option 3'],
|
||||
selectOptions: [
|
||||
'Option 1', 'Option 2', 'Option 3',
|
||||
{
|
||||
value: ['some value', 'another value'],
|
||||
label: 'Selected option'
|
||||
}
|
||||
],
|
||||
selectedOption: ['some value', 'another value'],
|
||||
|
||||
formCollapsed: true,
|
||||
checkboxNames: ['Checkboxes', 'Inline Checkboxes',
|
||||
'Checkboxes - custom', 'Inline Checkboxes - custom'],
|
||||
radioNames: ['Radios', 'Inline Radios',
|
||||
'Radios - custom', 'Inline Radios - custom']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validator (val) {
|
||||
return val ? val.length >= 4 : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
resources/js/src/views/base/Jumbotrons.vue
Normal file
90
resources/js/src/views/base/Jumbotrons.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Jumbotron </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/jumbotron"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
|
||||
<p>For more information visit website</p>
|
||||
<CButton color="primary" href="#">More Info</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>with slots</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron header="Bootstrap 4" lead="">
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<CButton color="primary" href="#">Do Something</CButton>
|
||||
<CButton color="success" href="#">Do Something Else</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron
|
||||
color="info"
|
||||
text-color="white"
|
||||
border-color="dark"
|
||||
>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Jumbotrons'
|
||||
}
|
||||
</script>
|
||||
285
resources/js/src/views/base/ListGroups.vue
Normal file
285
resources/js/src/views/base/ListGroups.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap list group </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/list-group"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>disabled items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>actionable items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
||||
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
||||
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
||||
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem tag="button">Button item</CListGroupItem>
|
||||
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
||||
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
||||
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>with badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Cras justo odio
|
||||
<CBadge color="primary" shape="pill">14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Dapibus ac facilisis in
|
||||
<CBadge color="primary" shape="pill">2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Morbi leo risus
|
||||
<CBadge color="primary" shape="pill">1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors active</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>inside cards</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardGroup deck>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<b>Card with list group</b>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardText class="mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader><b>Card with flush list group</b></CCardHeader>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
href="#"
|
||||
active
|
||||
class="flex-column align-items-start"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListGroups'
|
||||
}
|
||||
</script>
|
||||
179
resources/js/src/views/base/Navbars.vue
Normal file
179
resources/js/src/views/base/Navbars.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navbar </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/navbar"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar
|
||||
expandable="md"
|
||||
color="info"
|
||||
>
|
||||
<CToggler inNavbar @click="show=!show"/>
|
||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||
<CCollapse :show="show" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||
</CNavbarNav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CForm inline class="align-middle">
|
||||
<CInput
|
||||
class="mr-2 my-0"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="light" size="sm">
|
||||
Search
|
||||
</CButton>
|
||||
</CForm>
|
||||
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown
|
||||
in-nav
|
||||
toggler-text="User"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>brand</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- Image and text -->
|
||||
<CNavbar color="faded" light>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||
CoreuiVue
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar toggleable="sm" light color="light">
|
||||
<CToggler inNavbar @click="navbarText=!navbarText"/>
|
||||
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||
<CCollapse :show="navbarText" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavbarText>Navbar text</CNavbarText>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>dropdown</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar expandable="sm" color="primary" >
|
||||
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
|
||||
<CCollapse :show="navbarDropdown" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Home</CNavItem>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<!-- Navbar dropdowns -->
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
toggler-text="User"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>input group</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navbars',
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
navbarText: false,
|
||||
navbarDropdown: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
resources/js/src/views/base/Navs.vue
Normal file
164
resources/js/src/views/base/Navs.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem title="Link"/>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>
|
||||
<CIcon name="cil-basket"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-settings"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-bell"/>
|
||||
</CNavItem>
|
||||
<CNavItem disabled>
|
||||
<CIcon name="cil-envelope-closed"/>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>tab style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="tabs">
|
||||
<CNavItem active>
|
||||
Active
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader @click="item++">
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>pill style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>fill tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav fill variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>justified tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav justified variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>dropdown support</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CDropdown
|
||||
in-nav
|
||||
placement="bottom-end"
|
||||
button-content="Dropdown"
|
||||
>
|
||||
<CDropdownItem>one</CDropdownItem>
|
||||
<CDropdownItem>two</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>three</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>vertical variation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="3" class="m-0">
|
||||
<CNav vertical pills >
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navs'
|
||||
}
|
||||
</script>
|
||||
94
resources/js/src/views/base/Paginations.vue
Normal file
94
resources/js/src/views/base/Paginations.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>size</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/pagination"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
responsive
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<CPagination
|
||||
size="sm"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-md-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination
|
||||
size="lg"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
responsive
|
||||
/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="10"
|
||||
:active-page.sync="currentPage"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<CPagination
|
||||
align="end"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
resources/js/src/views/base/Popovers.vue
Normal file
95
resources/js/src/views/base/Popovers.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Popovers</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/popover"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Click Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
250
resources/js/src/views/base/ProgressBars.vue
Normal file
250
resources/js/src/views/base/ProgressBars.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Progress</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/progress"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||
</CProgress>
|
||||
<CButton
|
||||
@click="clicked"
|
||||
color="secondary"
|
||||
class="mt-4"
|
||||
>
|
||||
Click me to animate progress bars
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>No label</h6>
|
||||
<CProgress :value="value" :max="max2" class="mb-3"/>
|
||||
<h6>Value label</h6>
|
||||
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
|
||||
<h6>Progress label</h6>
|
||||
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
|
||||
<h6>Value label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
|
||||
<h6>Progress label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>width</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default width</h6>
|
||||
<CProgress :value="value3" class="mb-3"/>
|
||||
<h6>Custom widths</h6>
|
||||
<CProgress :value="value3" class="w-75 mb-2"/>
|
||||
<CProgress :value="value3" class="w-50 mb-2"/>
|
||||
<CProgress :value="value3" class="w-25"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>height</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default height</h6>
|
||||
<CProgress :value="value3" show-percentage class="mb-3"/>
|
||||
<h6>Custom heights</h6>
|
||||
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress height="2px" :value="value3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
|
||||
<div class="col-sm-2">{{ bar.color }}:</div>
|
||||
<div class="col-sm-10 pt-1">
|
||||
<CProgress
|
||||
:value="bar.value"
|
||||
:color="bar.color"
|
||||
:key="bar.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>striped</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CButton color="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>animated</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:animated="animate"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CButton color="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>multiple bars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-percentage :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-value striped :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]" show-percentage/>
|
||||
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
|
||||
</CProgress>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProgressBars',
|
||||
data () {
|
||||
return {
|
||||
counter: 73,
|
||||
max: 100,
|
||||
max2: 50,
|
||||
value: 33.333333333,
|
||||
value3: 75,
|
||||
bars: [
|
||||
{color: 'success', value: 75},
|
||||
{color: 'info', value: 75},
|
||||
{color: 'warning', value: 75},
|
||||
{color: 'danger', value: 75},
|
||||
{color: 'primary', value: 75},
|
||||
{color: 'secondary', value: 75},
|
||||
{color: 'dark', value: 75}
|
||||
],
|
||||
timer: null,
|
||||
striped: true,
|
||||
animate: true,
|
||||
max3: 100,
|
||||
values: [ 15, 30, 20 ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clicked () {
|
||||
this.counter = Math.random() * this.max
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setInterval(() => {
|
||||
this.bars.forEach(bar => {
|
||||
bar.value = 25 + (Math.random() * 75)
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
396
resources/js/src/views/base/Switches.vue
Normal file
396
resources/js/src/views/base/Switches.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard v-if="true">
|
||||
<CCardHeader>
|
||||
Radio switches
|
||||
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/switch"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
v-for="(color, key) in colors"
|
||||
:key="'radio' + key"
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
variant="3d"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
:checked="key === 2"
|
||||
@update:checked="(val) => val ? radio = color : null"
|
||||
:value="color"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch default
|
||||
<CBadge color="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
color="primary"
|
||||
name="switch1"
|
||||
:checked.sync="checker"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||
/>
|
||||
<CSwitch class="mx-1" color="primary" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch pills
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Sizes
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
class="table-align-middle mb-0"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
no-sorting
|
||||
>
|
||||
<template #example="{item}">
|
||||
<td>
|
||||
<CSwitch
|
||||
:variant="item.example.variant"
|
||||
:color="item.example.color"
|
||||
:size="item.example.size"
|
||||
:checked="item.example.checked"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #size_prop="{item}">
|
||||
<td>
|
||||
<span v-html="item.size_prop"></span>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Switches',
|
||||
data () {
|
||||
return {
|
||||
colors: [
|
||||
'primary','secondary','warning','success','info','danger','light','dark'
|
||||
],
|
||||
fields: [
|
||||
{ key: 'size' },
|
||||
{ key: 'example' },
|
||||
{ key: 'size_prop', label: 'Size prop' }
|
||||
],
|
||||
items: [
|
||||
{
|
||||
size: 'Large',
|
||||
example: { variant: '3d', color: 'primary', size: 'lg', checked: true },
|
||||
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||
},
|
||||
{
|
||||
size: 'Normal',
|
||||
example: { variant: '3d', color: 'primary', size: '', checked: true },
|
||||
size_prop: '-'
|
||||
},
|
||||
{
|
||||
size: 'Small',
|
||||
example: { variant: '3d', color: 'primary', size: 'sm', checked: true},
|
||||
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||
}
|
||||
],
|
||||
checker: true,
|
||||
radio: 'warning',
|
||||
labelIcon: {
|
||||
labelOn: '\u2713',
|
||||
labelOff: '\u2715'
|
||||
},
|
||||
labelTxt: {
|
||||
labelOn: 'yes',
|
||||
labelOff: 'no'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
resources/js/src/views/base/Table.vue
Normal file
62
resources/js/src/views/base/Table.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<slot name="header">
|
||||
<CIcon name="cil-grid"/> {{caption}}
|
||||
</slot>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
:bordered="bordered"
|
||||
:small="small"
|
||||
:fixed="fixed"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:items-per-page="small ? 10 : 5"
|
||||
:dark="dark"
|
||||
pagination
|
||||
>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Table',
|
||||
props: {
|
||||
items: Array,
|
||||
fields: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['username', 'registered', 'role', 'status']
|
||||
}
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: Boolean,
|
||||
striped: Boolean,
|
||||
bordered: Boolean,
|
||||
small: Boolean,
|
||||
fixed: Boolean,
|
||||
dark: Boolean
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
resources/js/src/views/base/Tables.vue
Normal file
104
resources/js/src/views/base/Tables.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper :items="getShuffledUsersData()">
|
||||
<template #header>
|
||||
<CIcon name="cil-grid"/> Simple Table
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</CTableWrapper>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
striped
|
||||
caption="Striped Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
small
|
||||
caption="Condensed Table"
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
fixed
|
||||
bordered
|
||||
caption="Bordered Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
caption="Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="Combined All dark Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CTableWrapper from './Table.vue'
|
||||
import usersData from '../users/UsersData'
|
||||
|
||||
export default {
|
||||
name: 'Tables',
|
||||
components: { CTableWrapper },
|
||||
methods: {
|
||||
shuffleArray (array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
},
|
||||
|
||||
getShuffledUsersData () {
|
||||
return this.shuffleArray(usersData.slice(0))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
219
resources/js/src/views/base/Tabs.vue
Normal file
219
resources/js/src/views/base/Tabs.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/tabs"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs>
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile" active>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills">
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile">
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs :active-tab.sync="activeTab">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/>
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/>
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/>
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs add-tab-classes="mt-1">
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs vertical
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills" vertical>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tabs',
|
||||
data () {
|
||||
return {
|
||||
tabs: [
|
||||
'Calculator',
|
||||
'Shopping cart',
|
||||
'Charts'
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
resources/js/src/views/base/Tooltips.vue
Normal file
90
resources/js/src/views/base/Tooltips.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Tooltips </strong>
|
||||
<small><code>v-c-tooltip</code> directive</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/tooltip"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
color="secondary"
|
||||
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||
color="secondary"
|
||||
>
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Tooltips </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-tooltip.hover="{
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tooltips',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user