sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: add new tabs component

Browse Source
This commit is contained in:
mrholek
2024-06-14 16:09:10 +02:00
parent 85c9e17056
commit 953c231f28
3 changed files with 172 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_nav.js
+5
View File
@@ -100,6 +100,11 @@ export default [
name: 'Tables', name: 'Tables',
to: '/base/tables', to: '/base/tables',
}, },
{
component: 'CNavItem',
name: 'Tabs',
to: '/base/tabs',
},
{ {
component: 'CNavItem', component: 'CNavItem',
name: 'Tooltips', name: 'Tooltips',
src/router/index.js
+5
View File
@@ -111,6 +111,11 @@ const routes = [
name: 'Tables', name: 'Tables',
component: () => import('@/views/base/Tables.vue'), component: () => import('@/views/base/Tables.vue'),
}, },
{
path: '/base/tabs',
name: 'Tabs',
component: () => import('@/views/base/Tabs.vue'),
},
{ {
path: '/base/tooltips', path: '/base/tooltips',
name: 'Tooltips', name: 'Tooltips',
src/views/base/Tabs.vue
+162
View File
@@ -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>