feat: tabs component
This commit is contained in:
Alexandr
@@ -1,24 +1,23 @@
|
||||
<template>
|
||||
<div class="vp-raw">
|
||||
<tabs v-model="activeTab">
|
||||
<tab name="first" title="Проверка">
|
||||
Проверка
|
||||
<tabs v-model="activeTab" class="p-5">
|
||||
<tab name="first" title="First">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, id, nisi? Enim excepturi id minus molestias quaerat qui rem repudiandae sed tempore ullam voluptate, voluptatum. Consequuntur illum possimus tempora totam.
|
||||
</tab>
|
||||
<tab name="second" title="Проверка1">
|
||||
Проверка 2
|
||||
<tab name="second" title="Second">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur expedita explicabo facere facilis fugit illo laboriosam minus molestias nulla placeat porro quaerat, quo repellat sapiente similique temporibus voluptate. Nemo!
|
||||
</tab>
|
||||
<tab name="third" title="Проверка2">
|
||||
Проверка 3
|
||||
<tab name="third" title="Third">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias assumenda consequatur, dicta eius eos excepturi hic magnam maxime molestias nisi perferendis provident quia. Aliquam consequatur esse ex sit velit.
|
||||
</tab>
|
||||
<tab name="fourth" title="Проверка3" :disabled="true">
|
||||
Проверка 4
|
||||
<tab name="fourth" title="Fourth" :disabled="true">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deleniti dolores ea eligendi quis, ratione repellat temporibus veniam veritatis voluptates. Distinctio enim eos illo incidunt ipsam provident, quaerat quia vel!
|
||||
</tab>
|
||||
</tabs>
|
||||
current tab: {{ activeTab }}
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Tabs, Tab } from '../../../../src/index'
|
||||
const activeTab = ref('')
|
||||
const activeTab = ref('first')
|
||||
</script>
|
||||
|
||||
23
docs/guide/tabs/examples/TabsPillsExample.vue
Normal file
23
docs/guide/tabs/examples/TabsPillsExample.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="vp-raw">
|
||||
<tabs variant="pills" v-model="activeTab" class="p-5">
|
||||
<tab name="first" title="First">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
|
||||
</tab>
|
||||
<tab name="second" title="Second">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
|
||||
</tab>
|
||||
<tab name="third" title="Third">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
|
||||
</tab>
|
||||
<tab name="fourth" title="Fourth" :disabled="true">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
|
||||
</tab>
|
||||
</tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Tabs, Tab } from '../../../../src/index'
|
||||
const activeTab = ref('first')
|
||||
</script>
|
||||
23
docs/guide/tabs/examples/TabsUnderlineExample.vue
Normal file
23
docs/guide/tabs/examples/TabsUnderlineExample.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="vp-raw">
|
||||
<tabs variant="underline" v-model="activeTab" class="p-5">
|
||||
<tab name="first" title="First">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
|
||||
</tab>
|
||||
<tab name="second" title="Second">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
|
||||
</tab>
|
||||
<tab name="third" title="Third">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
|
||||
</tab>
|
||||
<tab name="fourth" title="Fourth" :disabled="true">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
|
||||
</tab>
|
||||
</tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Tabs, Tab } from '../../../../src/index'
|
||||
const activeTab = ref('first')
|
||||
</script>
|
||||
@@ -1,5 +1,116 @@
|
||||
<script setup>
|
||||
import TabsDefaultExample from './examples/TabsDefaultExample.vue';
|
||||
import TabsPillsExample from './examples/TabsPillsExample.vue';
|
||||
import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
|
||||
</script>
|
||||
|
||||
<TabsDefaultExample />
|
||||
## Prop - variant (default)
|
||||
|
||||
```typescript
|
||||
export type TabsVariant = 'default' | 'underline' | 'pills'
|
||||
|
||||
defineProps({
|
||||
variant: {
|
||||
type: String as PropType<TabsVariant>,
|
||||
default: 'default',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<TabsDefaultExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Tabs, Tab } from 'flowbite-vue'
|
||||
const activeTab = ref('first')
|
||||
</script>
|
||||
<template>
|
||||
<tabs v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
|
||||
<tab name="first" title="First">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="second" title="Second">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="third" title="Third">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="fourth" title="Fourth" :disabled="true">
|
||||
Lorem...
|
||||
</tab>
|
||||
</tabs>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - variant (underline)
|
||||
|
||||
<TabsUnderlineExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Tabs, Tab } from 'flowbite-vue'
|
||||
const activeTab = ref('first')
|
||||
</script>
|
||||
<template>
|
||||
<tabs variant="underline" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
|
||||
<tab name="first" title="First">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="second" title="Second">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="third" title="Third">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="fourth" title="Fourth" :disabled="true">
|
||||
Lorem...
|
||||
</tab>
|
||||
</tabs>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - variant (pills)
|
||||
|
||||
<TabsPillsExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Tabs, Tab } from 'flowbite-vue'
|
||||
const activeTab = ref('first')
|
||||
</script>
|
||||
<template>
|
||||
<tabs variant="pills" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
|
||||
<tab name="first" title="First">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="second" title="Second">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="third" title="Third">
|
||||
Lorem...
|
||||
</tab>
|
||||
<tab name="fourth" title="Fourth" :disabled="true">
|
||||
Lorem...
|
||||
</tab>
|
||||
</tabs>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - directive
|
||||
|
||||
Use this props if you want to control which directive to use for rendering every tab content
|
||||
|
||||
```typescript
|
||||
export type TabsVariant = 'default' | 'underline' | 'pills'
|
||||
|
||||
defineProps({
|
||||
directive: {
|
||||
type: String as PropType<'if' | 'show'>,
|
||||
default: 'if',
|
||||
},
|
||||
})
|
||||
```
|
||||
Reference in New Issue
Block a user