Skip to content

Commit

Permalink
feat: add new tabs component
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrholek
mrholek committed Jun 14, 2024
1 parent 85c9e17 commit 953c231
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/_nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,11 @@ export default [
name: 'Tables',
to: '/base/tables',
},
{
component: 'CNavItem',
name: 'Tabs',
to: '/base/tabs',
},
{
component: 'CNavItem',
name: 'Tooltips',
Expand Down
5 changes: 5 additions & 0 deletions src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
162 changes: 162 additions & 0 deletions src/views/base/Tabs.vue
View file
Original file line number Diff line number Diff line change
@@ -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=&#34;tabs&#34;</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=&#34;pills&#34;</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=&#34;underline&#34;</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=&#34;underline-border&#34;</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>

0 comments on commit 953c231

Please sign in to comment.