woothu
219 lines
11 KiB
Vue
219 lines
11 KiB
Vue
<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">
|
|
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>
|
|
<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 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>
|
|
<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'
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|