feat: add new tabs component
This commit is contained in:
mrholek
@@ -100,6 +100,11 @@ export default [
|
||||
name: 'Tables',
|
||||
to: '/base/tables',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Tabs',
|
||||
to: '/base/tabs',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Tooltips',
|
||||
|
||||
@@ -111,6 +111,11 @@ const routes = [
|
||||
name: 'Tables',
|
||||
component: () => import('@/views/base/Tables.vue'),
|
||||
},
|
||||
{
|
||||
path: '/base/tabs',
|
||||
name: 'Tabs',
|
||||
component: () => import('@/views/base/Tabs.vue'),
|
||||
},
|
||||
{
|
||||
path: '/base/tooltips',
|
||||
name: 'Tooltips',
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Tabs</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
The basic Vue tabs example uses the <code>variant="tabs"</code> props to
|
||||
generate a tabbed interface.
|
||||
</p>
|
||||
<DocsExample href="components/tabs.html#example">
|
||||
<CTabs activeItemKey="profile">
|
||||
<CTabList variant="tabs">
|
||||
<CTab itemKey="home">Home</CTab>
|
||||
<CTab itemKey="profile">Profile</CTab>
|
||||
<CTab itemKey="contact">Contact</CTab>
|
||||
<CTab disabled itemKey="disabled"> Disabled </CTab>
|
||||
</CTabList>
|
||||
<CTabContent>
|
||||
<CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
|
||||
<CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
|
||||
<CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
|
||||
<CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
|
||||
</CTabContent>
|
||||
</CTabs>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader> <strong>Vue Tabs</strong> <small>Unstyled</small> </CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
If you don’t provide the <code>variant</code> prop, the component will default to a
|
||||
basic style.
|
||||
</p>
|
||||
<DocsExample href="components/tabs.html#unstyled">
|
||||
<CTabs activeItemKey="profile">
|
||||
<CTabList>
|
||||
<CTab itemKey="home">Home</CTab>
|
||||
<CTab itemKey="profile">Profile</CTab>
|
||||
<CTab itemKey="contact">Contact</CTab>
|
||||
<CTab disabled itemKey="disabled"> Disabled </CTab>
|
||||
</CTabList>
|
||||
<CTabContent>
|
||||
<CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
|
||||
<CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
|
||||
<CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
|
||||
<CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
|
||||
</CTabContent>
|
||||
</CTabs>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader> <strong>Vue Tabs</strong> <small>Pills</small> </CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Take that same code, but use <code>variant="pills"</code> instead:
|
||||
</p>
|
||||
<DocsExample href="components/tabs.html#unstyled">
|
||||
<CTabs :activeItemKey="2">
|
||||
<CTabList variant="pills">
|
||||
<CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
|
||||
<CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
|
||||
<CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
|
||||
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
|
||||
</CTabList>
|
||||
<CTabContent>
|
||||
<CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
|
||||
Home tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
|
||||
Profile tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
|
||||
Contact tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
|
||||
Disabled tab content
|
||||
</CTabPanel>
|
||||
</CTabContent>
|
||||
</CTabs>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader> <strong>Vue Tabs</strong> <small>Underline</small> </CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Take that same code, but use <code>variant="underline"</code> instead:
|
||||
</p>
|
||||
<DocsExample href="components/tabs.html#unstyled">
|
||||
<CTabs :activeItemKey="2">
|
||||
<CTabList variant="underline">
|
||||
<CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
|
||||
<CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
|
||||
<CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
|
||||
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
|
||||
</CTabList>
|
||||
<CTabContent>
|
||||
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
|
||||
Home tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
|
||||
Profile tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
|
||||
Contact tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
|
||||
Disabled tab content
|
||||
</CTabPanel>
|
||||
</CTabContent>
|
||||
</CTabs>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader> <strong>Vue Tabs</strong> <small>Underline border</small> </CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Take that same code, but use <code>variant="underline-border"</code> instead:
|
||||
</p>
|
||||
<DocsExample href="components/tabs.html#unstyled">
|
||||
<CTabs :activeItemKey="2">
|
||||
<CTabList variant="underline-border">
|
||||
<CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
|
||||
<CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
|
||||
<CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
|
||||
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
|
||||
</CTabList>
|
||||
<CTabContent>
|
||||
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
|
||||
Home tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
|
||||
Profile tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
|
||||
Contact tab content
|
||||
</CTabPanel>
|
||||
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
|
||||
Disabled tab content
|
||||
</CTabPanel>
|
||||
</CTabContent>
|
||||
</CTabs>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user