Components renaming (#225)
* refactor: eslint config adjusted for better diff's * refactor: stricter linting + dependencies updated * refactoring: paragraph component - component - docs * refactoring: heading component - component - docs * Update docs/components/heading.md Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com> * refactoring: link component - component - docs * refactoring: image component - component - docs * refactoring: alert component - component - docs * refactoring: avatar component - component - docs * refactoring: removed unnecessary code - component names come from the file name * refactoring: breadcrumb component - component - docs * refactoring: accordion component - component - docs * refactoring: buttom component - component - docs * refactoring: badge component - component - docs * refactoring: card component - component - docs * refactoring: order of components in docs updated * refactoring: unnecessary semicolons removed * refactoring: button group component - component - docs * refactoring: carousel component - component - docs * refactoring: dropdown component - component - docs * refactoring: footer component - component - docs * refactoring:list-group component - component - docs * refactoring: modal component - component - docs * refactoring: navbar component - component - docs * refactoring: pagination component - component - docs * refactoring: progress component - component - docs * refactoring: rating component - component - docs * refactoring: spinner component - component - docs * refactoring: table component - component - docs * refactoring: tabs component - component - docs * feat: Updated pagination examples * lint: Lister fixes * feat: Sidebar component and some fixes * feat: Input component * feat: Some fixes * feat: Some fixes * chore: update deps * refactor: removed old Modal component * refactor: radio component and some fixes * fix: fixed path error * refactor: Range component * refactoring: timeline component - component - docs * refactor: Select component * refactoring: toast component - component - docs * refactoring: tooltip component - component - docs * refactoring: sidebar component - component - docs * refactoring: input component - component - docs * refactoring: fileInput component - component - docs * refactoring: select component - component - docs * refactoring: textarea component - component - docs * refactoring: checkbox component - component - docs * refactoring: radio component - component - docs * refactoring: toggle component - component - docs * refactoring: range component - component - docs * local configs linted * documentation quick start updated * flowbite-themable refactored to fit new linters and style guide * random linter fixes * refactoring: toast-provider component - component - docs * final linter fixes * lint: Linter fixes * fix: Fixed types * fix: Fixed card component * docs: Updated card examples * fix: Fixed tabs * refactor: Heading component refactoring * Fwb rename - few fixes after component review (#237) * fix: button documentation * fix: model type in range examples * chore: Toast marked as WIP --------- Co-authored-by: Sqrcz <naorniakowski@slashlab.pl> Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
GitHub
22
.eslintrc.js
22
.eslintrc.js
@@ -1,25 +1,29 @@
|
|||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
es2021: true,
|
es2021: true,
|
||||||
node: true,
|
node: true,
|
||||||
},
|
},
|
||||||
parser: 'vue-eslint-parser',
|
extends: [
|
||||||
extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended'],
|
'eslint:recommended',
|
||||||
|
'standard',
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'plugin:vue-scoped-css/vue3-recommended',
|
||||||
|
'@vue/eslint-config-typescript/recommended',
|
||||||
|
],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
ecmaVersion: 12,
|
ecmaVersion: 12,
|
||||||
parser: '@typescript-eslint/parser',
|
|
||||||
sourceType: 'module',
|
sourceType: 'module',
|
||||||
},
|
},
|
||||||
plugins: ['vue', '@typescript-eslint'],
|
|
||||||
rules: {
|
rules: {
|
||||||
'linebreak-style': ['error', 'unix'],
|
|
||||||
quotes: ['error', 'single'],
|
|
||||||
semi: ['error', 'never'],
|
|
||||||
'vue/multi-word-component-names': 'off',
|
|
||||||
'comma-dangle': ['error', 'always-multiline'],
|
'comma-dangle': ['error', 'always-multiline'],
|
||||||
|
'linebreak-style': ['error', 'unix'],
|
||||||
'no-multiple-empty-lines': 'error',
|
'no-multiple-empty-lines': 'error',
|
||||||
'object-curly-spacing': ['error', 'always'],
|
'object-curly-spacing': ['error', 'always'],
|
||||||
'vue/no-v-model-argument': 'off',
|
'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
|
||||||
|
'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
|
||||||
|
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,20 +38,20 @@ function getComponents() {
|
|||||||
{ text: 'Accordion', link: '/components/accordion' },
|
{ text: 'Accordion', link: '/components/accordion' },
|
||||||
{ text: 'Alert', link: '/components/alert' },
|
{ text: 'Alert', link: '/components/alert' },
|
||||||
{ text: 'Avatar', link: '/components/avatar' },
|
{ text: 'Avatar', link: '/components/avatar' },
|
||||||
|
{ text: 'Badge', link: '/components/badge' },
|
||||||
{ text: 'Breadcrumb', link: '/components/breadcrumb' },
|
{ text: 'Breadcrumb', link: '/components/breadcrumb' },
|
||||||
{ text: 'Button', link: '/components/button' },
|
{ text: 'Button', link: '/components/button' },
|
||||||
{ text: 'Badge', link: '/components/badge' },
|
|
||||||
{ text: 'Button Group', link: '/components/button-group' },
|
{ text: 'Button Group', link: '/components/button-group' },
|
||||||
{ text: 'Card', link: '/components/card.md' },
|
{ text: 'Card', link: '/components/card.md' },
|
||||||
{ text: 'Carousel', link: '/components/carousel' },
|
{ text: 'Carousel', link: '/components/carousel' },
|
||||||
{ text: 'Dropdown', link: '/components/dropdown' },
|
{ text: 'Dropdown', link: '/components/dropdown' },
|
||||||
|
{ text: 'ListGroup', link: '/components/list-group' },
|
||||||
{ text: 'Pagination', link: '/components/pagination' },
|
{ text: 'Pagination', link: '/components/pagination' },
|
||||||
{ text: 'Progress', link: '/components/progress' },
|
{ text: 'Progress', link: '/components/progress' },
|
||||||
{ text: 'Rating', link: '/components/rating' },
|
{ text: 'Rating', link: '/components/rating' },
|
||||||
{ text: 'Spinner', link: '/components/spinner' },
|
{ text: 'Spinner', link: '/components/spinner' },
|
||||||
{ text: 'Table', link: '/components/table' },
|
{ text: 'Table', link: '/components/table' },
|
||||||
{ text: 'Tabs', link: '/components/tabs' },
|
{ text: 'Tabs', link: '/components/tabs' },
|
||||||
{ text: 'ListGroup', link: '/components/list-group' },
|
|
||||||
{ text: 'Timeline', link: '/components/timeline' },
|
{ text: 'Timeline', link: '/components/timeline' },
|
||||||
{ text: 'Toast', link: '/components/toast' },
|
{ text: 'Toast', link: '/components/toast' },
|
||||||
{ text: 'Tooltip', link: '/components/tooltip' },
|
{ text: 'Tooltip', link: '/components/tooltip' },
|
||||||
@@ -65,13 +65,13 @@ function getComponents() {
|
|||||||
function getFormComponents() {
|
function getFormComponents() {
|
||||||
return [
|
return [
|
||||||
{ text: 'Input', link: '/components/input' },
|
{ text: 'Input', link: '/components/input' },
|
||||||
{ text: 'FileInput', link: '/components/fileInput' },
|
{ text: 'File Input', link: '/components/fileInput' },
|
||||||
{ text: 'Checkbox', link: '/components/checkbox' },
|
|
||||||
{ text: 'Select', link: '/components/select' },
|
{ text: 'Select', link: '/components/select' },
|
||||||
{ text: 'Toggle', link: '/components/toggle' },
|
|
||||||
{ text: 'Textarea', link: '/components/textarea' },
|
{ text: 'Textarea', link: '/components/textarea' },
|
||||||
{ text: 'Range', link: '/components/range' },
|
{ text: 'Checkbox', link: '/components/checkbox' },
|
||||||
{ text: 'Radio', link: '/components/radio' },
|
{ text: 'Radio', link: '/components/radio' },
|
||||||
|
{ text: 'Toggle', link: '/components/toggle' },
|
||||||
|
{ text: 'Range', link: '/components/range' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<slot-listener @click="onClick" @mouseleave="onMouseleave" @mouseenter="onMouseenter">
|
<fwb-slot-listener
|
||||||
<Button>HELLO</Button>
|
@click="onClick"
|
||||||
</slot-listener>
|
@mouseleave="onMouseleave"
|
||||||
|
@mouseenter="onMouseenter"
|
||||||
|
>
|
||||||
|
<fwb-button>HELLO</fwb-button>
|
||||||
|
</fwb-slot-listener>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { SlotListener, Button } from '../../../../src/index'
|
import { FwbButton, FwbSlotListener } from '../../../../src/index'
|
||||||
const onClick = () => {
|
const onClick = () => {
|
||||||
console.log('onClick from slot-listener')
|
console.log('onClick from slot-listener')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AccordionExample from './accordion/examples/AccordionExample.vue';
|
import FwbAccordionExample from './accordion/examples/FwbAccordionExample.vue'
|
||||||
import AccordionAlwaysOpenExample from './accordion/examples/AccordionAlwaysOpenExample.vue';
|
import FwbAccordionExampleAlwaysOpen from './accordion/examples/FwbAccordionExampleAlwaysOpen.vue'
|
||||||
import AccordionFlushExample from './accordion/examples/AccordionFlushExample.vue';
|
import FwbAccordionExampleFlush from './accordion/examples/FwbAccordionExampleFlush.vue'
|
||||||
import AccordionStyledHeadersExample from './accordion/examples/AccordionStyledHeadersExample.vue';
|
import FwbAccordionExampleStyledHeaders from './accordion/examples/FwbAccordionExampleStyledHeaders.vue'
|
||||||
import AccordionOpenFirstItemExample from './accordion/examples/AccordionOpenFirstItemExample.vue';
|
import FwbAccordionExampleFirstItemClosed from './accordion/examples/FwbAccordionExampleFirstItemClosed.vue'
|
||||||
</script>
|
</script>
|
||||||
# Vue Accordion - Flowbite
|
# Vue Accordion - Flowbite
|
||||||
|
|
||||||
@@ -16,216 +16,297 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
|
|||||||
|
|
||||||
## Default accordion
|
## Default accordion
|
||||||
Use this example to basic accordion.
|
Use this example to basic accordion.
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<fwb-accordion-example />
|
||||||
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Accordion>
|
<fwb-accordion>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>header</accordion-header>
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>another header</accordion-header>
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline" >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>and one more header</accordion-header>
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
</Accordion>
|
</fwb-accordion>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
```
|
<script setup>
|
||||||
|
import {
|
||||||
|
FwbAccordion,
|
||||||
|
FwbAccordionContent,
|
||||||
|
FwbAccordionHeader,
|
||||||
|
FwbAccordionPanel,
|
||||||
|
} from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
<AccordionExample />
|
```
|
||||||
|
|
||||||
## Always open accordion
|
## Always open accordion
|
||||||
Always open prop to makes accordion able to open multiple elements.
|
Always open prop to makes accordion able to open multiple elements.
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<fwb-accordion-example-always-open />
|
||||||
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Accordion always-open>
|
<fwb-accordion always-open>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>header</accordion-header>
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>another header</accordion-header>
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>and one more header</accordion-header>
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
</Accordion>
|
</fwb-accordion>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
FwbAccordion,
|
||||||
|
FwbAccordionContent,
|
||||||
|
FwbAccordionHeader,
|
||||||
|
FwbAccordionPanel,
|
||||||
|
} from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
<AccordionAlwaysOpenExample />
|
|
||||||
|
|
||||||
## Flush accordion
|
## Flush accordion
|
||||||
Flush prop removes side borders, and rounded corners
|
Flush prop removes side borders, and rounded corners
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<fwb-accordion-example-flush />
|
||||||
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Accordion flush>
|
<fwb-accordion flush>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>header</accordion-header>
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>another header</accordion-header>
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>and one more header</accordion-header>
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
</Accordion>
|
</fwb-accordion>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
FwbAccordion,
|
||||||
|
FwbAccordionContent,
|
||||||
|
FwbAccordionHeader,
|
||||||
|
FwbAccordionPanel,
|
||||||
|
} from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
<AccordionFlushExample />
|
|
||||||
|
|
||||||
## Styling accordion
|
## Styling accordion
|
||||||
You can style accordion content and headers by passing tailwind classes into them.
|
You can style accordion content and headers by passing tailwind classes into them.
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<fwb-accordion-example-styled-headers />
|
||||||
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Accordion>
|
<fwb-accordion>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>header</accordion-header>
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
|
<fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
|
||||||
<accordion-content>
|
another header
|
||||||
|
</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>and one more header</accordion-header>
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</accordion-content>
|
</fwb-accordion-content>
|
||||||
</accordion-panel>
|
</fwb-accordion-panel>
|
||||||
</Accordion>
|
</fwb-accordion>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
FwbAccordion,
|
||||||
|
FwbAccordionContent,
|
||||||
|
FwbAccordionHeader,
|
||||||
|
FwbAccordionPanel,
|
||||||
|
} from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
<AccordionStyledHeadersExample />
|
|
||||||
|
|
||||||
|
|
||||||
## Closed first item
|
## Closed first item
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<fwb-accordion-example-first-item-closed />
|
||||||
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Accordion :open-first-item="false">
|
<fwb-accordion :open-first-item="false">
|
||||||
<accordion-panel>
|
<fwb-accordion-panel>
|
||||||
<accordion-header>header</accordion-header>
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
<accordion-content>
|
<fwb-accordion-content>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
</div>
|
</p>
|
||||||
</accordion-content>
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
</accordion-panel>
|
Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
<accordion-panel>
|
</p>
|
||||||
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
|
</div>
|
||||||
<accordion-content>
|
</fwb-accordion-content>
|
||||||
<div>
|
</fwb-accordion-panel>
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
<fwb-accordion-panel>
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
</div>
|
<fwb-accordion-content>
|
||||||
</accordion-content>
|
<div>
|
||||||
</accordion-panel>
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
<accordion-panel>
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
<accordion-header>and one more header</accordion-header>
|
</p>
|
||||||
<accordion-content>
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
<div>
|
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
</p>
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
</div>
|
||||||
</div>
|
</fwb-accordion-content>
|
||||||
</accordion-content>
|
</fwb-accordion-panel>
|
||||||
</accordion-panel>
|
<fwb-accordion-panel>
|
||||||
</Accordion>
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
</fwb-accordion>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
FwbAccordion,
|
||||||
|
FwbAccordionContent,
|
||||||
|
FwbAccordionHeader,
|
||||||
|
FwbAccordionPanel,
|
||||||
|
} from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
<AccordionOpenFirstItemExample />
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Accordion always-open>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>another header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>and one more header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
</Accordion>
|
|
||||||
</template>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="vp-raw">
|
|
||||||
<Accordion>
|
|
||||||
<AccordionPanel>
|
|
||||||
<AccordionHeader>header</AccordionHeader>
|
|
||||||
<AccordionContent>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
|
||||||
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
|
||||||
</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
|
||||||
Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites
|
|
||||||
even faster with components on top of Tailwind CSS.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionPanel>
|
|
||||||
<AccordionPanel>
|
|
||||||
<AccordionHeader>another header</AccordionHeader>
|
|
||||||
<AccordionContent>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
|
||||||
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
|
||||||
</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
|
||||||
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and
|
|
||||||
components from Flowbite.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionPanel>
|
|
||||||
<AccordionPanel>
|
|
||||||
<AccordionHeader>and one more header</AccordionHeader>
|
|
||||||
<AccordionContent>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
|
||||||
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
|
||||||
</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
|
||||||
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and
|
|
||||||
components from Flowbite.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionPanel>
|
|
||||||
</Accordion>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Accordion flush>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>another header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>and one more header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
</Accordion>
|
|
||||||
</template>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="vp-raw">
|
|
||||||
<Accordion :open-first-item="false">
|
|
||||||
<AccordionPanel>
|
|
||||||
<AccordionHeader>header</AccordionHeader>
|
|
||||||
<AccordionContent>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
|
||||||
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
|
||||||
</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
|
||||||
Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites
|
|
||||||
even faster with components on top of Tailwind CSS.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionPanel>
|
|
||||||
<AccordionPanel>
|
|
||||||
<AccordionHeader>another header</AccordionHeader>
|
|
||||||
<AccordionContent>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
|
||||||
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
|
||||||
</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
|
||||||
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and
|
|
||||||
components from Flowbite.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionPanel>
|
|
||||||
<AccordionPanel>
|
|
||||||
<AccordionHeader>and one more header</AccordionHeader>
|
|
||||||
<AccordionContent>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
|
||||||
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
|
||||||
</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
|
||||||
Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and
|
|
||||||
components from Flowbite.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionPanel>
|
|
||||||
</Accordion>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Accordion >
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
<accordion-panel>
|
|
||||||
<accordion-header>and one more header</accordion-header>
|
|
||||||
<accordion-content>
|
|
||||||
<div>
|
|
||||||
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
|
|
||||||
</div>
|
|
||||||
</accordion-content>
|
|
||||||
</accordion-panel>
|
|
||||||
</Accordion>
|
|
||||||
</template>
|
|
||||||
61
docs/components/accordion/examples/FwbAccordionExample.vue
Normal file
61
docs/components/accordion/examples/FwbAccordionExample.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-accordion>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="/docs/getting-started/introduction/"
|
||||||
|
>get started</a> and start developing websites
|
||||||
|
even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and
|
||||||
|
components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and
|
||||||
|
components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
</fwb-accordion>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-accordion always-open>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="/docs/getting-started/introduction/"
|
||||||
|
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
</fwb-accordion>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-accordion :open-first-item="false">
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a
|
||||||
|
href="/docs/getting-started/introduction/"
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
>get started</a> and start developing websites
|
||||||
|
even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and
|
||||||
|
components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and
|
||||||
|
components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
</fwb-accordion>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-accordion flush>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="/docs/getting-started/introduction/"
|
||||||
|
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>another header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
</fwb-accordion>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-accordion>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out this guide to learn how to <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="/docs/getting-started/introduction/"
|
||||||
|
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
|
||||||
|
another header
|
||||||
|
</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
<fwb-accordion-panel>
|
||||||
|
<fwb-accordion-header>and one more header</fwb-accordion-header>
|
||||||
|
<fwb-accordion-content>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
|
Check out the <a
|
||||||
|
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
href="https://flowbite.com/figma/"
|
||||||
|
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</fwb-accordion-content>
|
||||||
|
</fwb-accordion-panel>
|
||||||
|
</fwb-accordion>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AlertTypeExample from './alert/examples/AlertTypeExample.vue';
|
import FwbAlertExampleBorder from './alert/examples/FwbAlertExampleBorder.vue'
|
||||||
import AlertTitleExample from './alert/examples/AlertTitleExample.vue';
|
import FwbAlertExampleBorderAccent from './alert/examples/FwbAlertExampleBorderAccent.vue'
|
||||||
import AlertClosableExample from './alert/examples/AlertClosableExample.vue';
|
import FwbAlertExampleCustomContent from './alert/examples/FwbAlertExampleCustomContent.vue'
|
||||||
import AlertBorderExample from './alert/examples/AlertBorderExample.vue';
|
import FwbAlertExampleDismissable from './alert/examples/FwbAlertExampleDismissable.vue'
|
||||||
import AlertIconExample from './alert/examples/AlertIconExample.vue';
|
import FwbAlertExampleIcon from './alert/examples/FwbAlertExampleIcon.vue'
|
||||||
import AlertBorderAccentExample from './alert/examples/AlertBorderAccentExample.vue';
|
import FwbAlertExampleList from './alert/examples/FwbAlertExampleList.vue'
|
||||||
import AlertCustomContentExample from './alert/examples/AlertCustomContentExample.vue';
|
import FwbAlertExampleType from './alert/examples/FwbAlertExampleType.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# Vue Alert - Flowbite
|
# Vue Alert - Flowbite
|
||||||
@@ -15,196 +15,266 @@ The alert component can be used to provide information to your users such as suc
|
|||||||
|
|
||||||
## Default alert
|
## Default alert
|
||||||
Use the following examples of alert components to show messages as feedback to your users.
|
Use the following examples of alert components to show messages as feedback to your users.
|
||||||
<AlertTypeExample />
|
|
||||||
|
|
||||||
|
<fwb-alert-example-type />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Alert } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="grid gap-2">
|
||||||
<Alert type="info" class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert type="info">
|
||||||
<Alert type="warning" class="mb-2"> Warning alert! Change a few things up and try submitting again. </Alert>
|
Info alert! Change a few things up and try submitting again.
|
||||||
<Alert type="danger" class="mb-2">Danger alert! Change a few things up and try submitting again. </Alert>
|
</fwb-alert>
|
||||||
<Alert type="dark" class="mb-2"> Dark alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert type="warning">
|
||||||
<Alert type="success"> Success alert! Change a few things up and try submitting again. </Alert>
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="danger">
|
||||||
|
Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="dark">
|
||||||
|
Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="success">
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Alerts with icon
|
## Alerts with icon
|
||||||
You can also include a descriptive icon to complement the message inside the alert component with the following example.
|
You can also include a descriptive icon to complement the message inside the alert component with the following example.
|
||||||
|
|
||||||
<AlertIconExample />
|
<fwb-alert-example-icon />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Alert } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="grid gap-2">
|
||||||
<Alert type="info" class="mb-2" icon> Info alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert icon type="info">
|
||||||
<Alert type="warning" class="mb-2" icon> Warning alert! Change a few things up and try submitting again. </Alert>
|
Info alert! Change a few things up and try submitting again.
|
||||||
<Alert type="danger" class="mb-2" icon> Danger alert! Change a few things up and try submitting again. </Alert>
|
</fwb-alert>
|
||||||
<Alert type="dark" class="mb-2" icon> Dark alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert icon type="warning">
|
||||||
<Alert type="success" icon> Success alert! Change a few things up and try submitting again. </Alert>
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert icon type="danger">
|
||||||
|
Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert icon type="dark">
|
||||||
|
Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert icon type="success">
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Bordered alerts
|
## Bordered alerts
|
||||||
Use this example to add a border accent to the alert component instead of just a plain background.
|
Use this example to add a border accent to the alert component instead of just a plain background.
|
||||||
|
|
||||||
<AlertBorderExample />
|
<fwb-alert-example-border />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Alert } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="grid gap-2">
|
||||||
<Alert type="info" border icon class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert border type="info">
|
||||||
<Alert type="warning" border icon class="mb-2">Warning alert! Change a few things up and try submitting again. </Alert>
|
Info alert! Change a few things up and try submitting again.
|
||||||
<Alert type="danger" border icon class="mb-2"> Info Danger alert! Change a few things up and try submitting again. </Alert>
|
</fwb-alert>
|
||||||
<Alert type="dark" border icon class="mb-2"> Info Dark alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert border type="warning">
|
||||||
<Alert type="success" border icon>Success alert! Change a few things up and try submitting again. </Alert>
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert border type="danger">
|
||||||
|
Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert border type="dark">
|
||||||
|
Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert border type="success">
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Border accent
|
## Border accent
|
||||||
Use this example to add a border accent on top of the alert component for further visual distinction.
|
Use this example to add a border accent on top of the alert component for further visual distinction.
|
||||||
|
|
||||||
<AlertBorderAccentExample />
|
<fwb-alert-example-border-accent />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Alert } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="vp-raw grid gap-2">
|
||||||
<Alert type="info" icon class="mb-2 border-t-4 rounded-none">Info alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert class="border-t-4 rounded-none" icon type="info">
|
||||||
<Alert type="warning" icon class="mb-2 border-t-4 rounded-none">Warning alert! Change a few things up and try submitting again. </Alert>
|
Info alert! Change a few things up and try submitting again.
|
||||||
<Alert type="danger" icon class="mb-2 border-t-4 rounded-none"> Info Danger alert! Change a few things up and try submitting again. </Alert>
|
</fwb-alert>
|
||||||
<Alert type="dark" icon class="mb-2 border-t-4 rounded-none"> Info Dark alert! Change a few things up and try submitting again. </Alert>
|
<fwb-alert class="border-t-4 rounded-none" icon type="warning">
|
||||||
<Alert type="success" icon class="border-t-4 rounded-none">Success alert! Change a few things up and try submitting again. </Alert>
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert class="border-t-4 rounded-none" icon type="danger">
|
||||||
|
Info Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert class="border-t-4 rounded-none" icon type="dark">
|
||||||
|
Info Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert class="border-t-4 rounded-none" icon type="success">
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Alerts with list
|
## Alerts with list
|
||||||
Use this example to show a list and a description inside an alert component.
|
Use this example to show a list and a description inside an alert component.
|
||||||
|
|
||||||
<AlertTitleExample />
|
<fwb-alert-example-list />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Alert } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="vp-raw grid gap-2">
|
||||||
<Alert type="info" class="mb-2">
|
<fwb-alert type="info">
|
||||||
<span class="font-medium">Ensure that these requirements are met:</span>
|
<span class="font-medium">Ensure that these requirements are met:</span>
|
||||||
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
||||||
<li>At least 10 characters (and up to 100 characters)</li>
|
<li>At least 10 characters (and up to 100 characters)</li>
|
||||||
<li>At least one lowercase character</li>
|
<li>At least one lowercase character</li>
|
||||||
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Alert>
|
</fwb-alert>
|
||||||
<Alert type="danger" class="mb-2">
|
<fwb-alert type="danger">
|
||||||
<span class="font-medium">Ensure that these requirements are met:</span>
|
<span class="font-medium">Ensure that these requirements are met:</span>
|
||||||
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
||||||
<li>At least 10 characters (and up to 100 characters)</li>
|
<li>At least 10 characters (and up to 100 characters)</li>
|
||||||
<li>At least one lowercase character</li>
|
<li>At least one lowercase character</li>
|
||||||
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Alert>
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Dismissing
|
## Dismissing
|
||||||
Use the following alert elements that are also dismissable.
|
Use the following alert elements that are also dismissable.
|
||||||
|
|
||||||
<AlertClosableExample />
|
<fwb-alert-example-dismissable />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Alert } from 'flowbite-vue'
|
import { Alert } from 'flowbite-vue'
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="vp-raw grid gap-2">
|
||||||
<Alert type="info" closable class="mb-2">Info</Alert>
|
<fwb-alert closable icon type="info">
|
||||||
<Alert type="warning" closable class="mb-2">Warning</Alert>
|
Info
|
||||||
<Alert type="danger" closable class="mb-2">Danger</Alert>
|
</fwb-alert>
|
||||||
<Alert type="dark" closable class="mb-2">Dark</Alert>
|
<fwb-alert closable icon type="warning">
|
||||||
<Alert type="success" closable>Success</Alert>
|
Warning
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert closable icon type="danger">
|
||||||
|
Danger
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert closable icon type="dark">
|
||||||
|
Dark
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert closable icon type="success">
|
||||||
|
Success
|
||||||
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Additional content
|
## Additional content
|
||||||
The following alert components can be used if you wish to disclose more information inside the element.
|
The following alert components can be used if you wish to disclose more information inside the element.
|
||||||
|
|
||||||
<AlertCustomContentExample />
|
<fwb-alert-example-custom-content />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Alert } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Alert type="info">
|
<fwb-alert type="info">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<svg class="flex-shrink-0 w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
<svg
|
||||||
|
class="flex-shrink-0 w-4 h-4 mr-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="sr-only">Info</span>
|
<span class="sr-only">Info</span>
|
||||||
</template>
|
</template>
|
||||||
<template #title>
|
<template #title>
|
||||||
<h3 class="text-lg font-medium">This is a info alert</h3>
|
<h3 class="text-lg font-medium">
|
||||||
|
This is a info alert
|
||||||
|
</h3>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:default="{ onCloseClick }">
|
<template #default="{ onCloseClick }">
|
||||||
<div class="mt-2 mb-4 text-sm">
|
<div class="mt-2 mb-4 text-sm">
|
||||||
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
>
|
>
|
||||||
<svg class="-ml-0.5 mr-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
|
<svg
|
||||||
|
class="-ml-0.5 mr-2 h-3 w-3"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 14"
|
||||||
|
>
|
||||||
<path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
|
<path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
|
||||||
</svg>
|
</svg>
|
||||||
View more
|
View more
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
|
class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
|
||||||
data-dismiss-target="#alert-additional-content-1"
|
data-dismiss-target="#alert-additional-content-1"
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
@click="onCloseClick"
|
@click="onCloseClick"
|
||||||
>
|
>
|
||||||
Dismiss
|
Dismiss
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Alert>
|
</fwb-alert>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
| Name | Values | Default |
|
| Name | Values | Default |
|
||||||
|------------|-----------------------------------------------|---------|
|
|----------|-----------------------------------------------|---------|
|
||||||
| type | `info`, `danger`, `success`,`warning`, `dark` | `info` |
|
| type | `info`, `danger`, `success`,`warning`, `dark` | `info` |
|
||||||
| closable | `boolean` | `false` |
|
| closable | `boolean` | `false` |
|
||||||
| icon | `boolean` | `false` |
|
| icon | `boolean` | `false` |
|
||||||
| border | `boolean` | `false` |
|
| border | `boolean` | `false` |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|----------|----------------------|
|
|-------|----------------------|
|
||||||
| close | Close button pressed |
|
| close | Close button pressed |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|
|||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Alert type="info" icon class="mb-2 border-t-4 rounded-none">Info alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="warning" icon class="mb-2 border-t-4 rounded-none">Warning alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="danger" icon class="mb-2 border-t-4 rounded-none"> Info Danger alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="dark" icon class="mb-2 border-t-4 rounded-none"> Info Dark alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="success" icon class="border-t-4 rounded-none">Success alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Alert } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Alert type="info" border icon class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="warning" border icon class="mb-2">Warning alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="danger" border icon class="mb-2"> Info Danger alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="dark" border icon class="mb-2"> Info Dark alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="success" border icon>Success alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Alert } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Alert type="info" closable icon class="mb-2">Info</Alert>
|
|
||||||
<Alert type="warning" closable icon class="mb-2">Warning</Alert>
|
|
||||||
<Alert type="danger" closable icon class="mb-2">Danger</Alert>
|
|
||||||
<Alert type="dark" closable icon class="mb-2">Dark</Alert>
|
|
||||||
<Alert type="success" closable icon>Success</Alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Alert } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Alert type="info" class="mb-2" icon> Info alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="warning" class="mb-2" icon> Warning alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="danger" class="mb-2" icon> Danger alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="dark" class="mb-2" icon> Dark alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="success" icon> Success alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Alert } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Alert type="info" class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="warning" class="mb-2"> Warning alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="danger" class="mb-2">Danger alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="dark" class="mb-2"> Dark alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
<Alert type="success"> Success alert! Change a few things up and try submitting again. </Alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Alert } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
38
docs/components/alert/examples/FwbAlertExampleBorder.vue
Normal file
38
docs/components/alert/examples/FwbAlertExampleBorder.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw grid gap-2">
|
||||||
|
<fwb-alert
|
||||||
|
border
|
||||||
|
type="info"
|
||||||
|
>
|
||||||
|
Info alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
border
|
||||||
|
type="warning"
|
||||||
|
>
|
||||||
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
border
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
Info Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
border
|
||||||
|
type="dark"
|
||||||
|
>
|
||||||
|
Info Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
border
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw grid gap-2">
|
||||||
|
<fwb-alert
|
||||||
|
class="border-t-4 rounded-none"
|
||||||
|
icon
|
||||||
|
type="info"
|
||||||
|
>
|
||||||
|
Info alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
class="border-t-4 rounded-none"
|
||||||
|
icon
|
||||||
|
type="warning"
|
||||||
|
>
|
||||||
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
class="border-t-4 rounded-none"
|
||||||
|
icon
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
Info Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
class="border-t-4 rounded-none"
|
||||||
|
icon
|
||||||
|
type="dark"
|
||||||
|
>
|
||||||
|
Info Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
class="border-t-4 rounded-none"
|
||||||
|
icon
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,16 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex flex-col">
|
<div class="vp-raw">
|
||||||
<Alert type="info">
|
<fwb-alert type="info">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<svg class="flex-shrink-0 w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
<svg
|
||||||
|
class="flex-shrink-0 w-4 h-4 mr-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="sr-only">Info</span>
|
<span class="sr-only">Info</span>
|
||||||
</template>
|
</template>
|
||||||
<template #title>
|
<template #title>
|
||||||
<h3 class="text-lg font-medium">This is a info alert</h3>
|
<h3 class="text-lg font-medium">
|
||||||
|
This is a info alert
|
||||||
|
</h3>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:default="{ onCloseClick }">
|
<template #default="{ onCloseClick }">
|
||||||
<div class="mt-2 mb-4 text-sm">
|
<div class="mt-2 mb-4 text-sm">
|
||||||
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||||
</div>
|
</div>
|
||||||
@@ -19,7 +27,13 @@
|
|||||||
type="button"
|
type="button"
|
||||||
class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
>
|
>
|
||||||
<svg class="-ml-0.5 mr-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
|
<svg
|
||||||
|
class="-ml-0.5 mr-2 h-3 w-3"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 14"
|
||||||
|
>
|
||||||
<path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
|
<path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
|
||||||
</svg>
|
</svg>
|
||||||
View more
|
View more
|
||||||
@@ -35,9 +49,10 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Alert>
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Alert } from '../../../../src/index'
|
import { FwbAlert } from '../../../../src/index'
|
||||||
</script>
|
</script>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw grid gap-2">
|
||||||
|
<fwb-alert
|
||||||
|
closable
|
||||||
|
icon
|
||||||
|
type="info"
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
closable
|
||||||
|
icon
|
||||||
|
type="warning"
|
||||||
|
>
|
||||||
|
Warning
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
closable
|
||||||
|
icon
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
Danger
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
closable
|
||||||
|
icon
|
||||||
|
type="dark"
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
closable
|
||||||
|
icon
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
Success
|
||||||
|
</fwb-alert>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
38
docs/components/alert/examples/FwbAlertExampleIcon.vue
Normal file
38
docs/components/alert/examples/FwbAlertExampleIcon.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw grid gap-2">
|
||||||
|
<fwb-alert
|
||||||
|
icon
|
||||||
|
type="info"
|
||||||
|
>
|
||||||
|
Info alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
icon
|
||||||
|
type="warning"
|
||||||
|
>
|
||||||
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
icon
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
icon
|
||||||
|
type="dark"
|
||||||
|
>
|
||||||
|
Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert
|
||||||
|
icon
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,23 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex flex-col">
|
<div class="vp-raw grid gap-2">
|
||||||
<Alert type="info" class="mb-2">
|
<fwb-alert type="info">
|
||||||
<span class="font-medium">Ensure that these requirements are met:</span>
|
<span class="font-medium">Ensure that these requirements are met:</span>
|
||||||
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
||||||
<li>At least 10 characters (and up to 100 characters)</li>
|
<li>At least 10 characters (and up to 100 characters)</li>
|
||||||
<li>At least one lowercase character</li>
|
<li>At least one lowercase character</li>
|
||||||
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Alert>
|
</fwb-alert>
|
||||||
<Alert type="danger" class="mb-2">
|
<fwb-alert type="danger">
|
||||||
<span class="font-medium">Ensure that these requirements are met:</span>
|
<span class="font-medium">Ensure that these requirements are met:</span>
|
||||||
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
<ul class="mt-1.5 ml-4 list-disc list-inside">
|
||||||
<li>At least 10 characters (and up to 100 characters)</li>
|
<li>At least 10 characters (and up to 100 characters)</li>
|
||||||
<li>At least one lowercase character</li>
|
<li>At least one lowercase character</li>
|
||||||
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Alert>
|
</fwb-alert>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Alert } from '../../../../src/index'
|
import { FwbAlert } from '../../../../src/index'
|
||||||
</script>
|
</script>
|
||||||
23
docs/components/alert/examples/FwbAlertExampleType.vue
Normal file
23
docs/components/alert/examples/FwbAlertExampleType.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw grid gap-2">
|
||||||
|
<fwb-alert type="info">
|
||||||
|
Info alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="warning">
|
||||||
|
Warning alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="danger">
|
||||||
|
Danger alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="dark">
|
||||||
|
Dark alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
<fwb-alert type="success">
|
||||||
|
Success alert! Change a few things up and try submitting again.
|
||||||
|
</fwb-alert>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAlert } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,15 +1,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AvatarExample from './avatar/examples/AvatarExample.vue'
|
import FwbAvatarExample from './avatar/examples/FwbAvatarExample.vue'
|
||||||
import AvatarAlternativePlaceholderExample from './avatar/examples/AvatarAlternativePlaceholderExample.vue'
|
import FwbAvatarExampleAlt from './avatar/examples/FwbAvatarExampleAlt.vue'
|
||||||
import AvatarBorderedExample from './avatar/examples/AvatarBorderedExample.vue'
|
import FwbAvatarExampleBordered from './avatar/examples/FwbAvatarExampleBordered.vue'
|
||||||
import AvatarDotIndicatorExample from './avatar/examples/AvatarDotIndicatorExample.vue'
|
import FwbAvatarExampleIcon from './avatar/examples/FwbAvatarExampleIcon.vue'
|
||||||
import AvatarSizeExample from './avatar/examples/AvatarSizeExample.vue'
|
import FwbAvatarExampleInitials from './avatar/examples/FwbAvatarExampleInitials.vue'
|
||||||
import AvatarDotIndicatorPositionExample from './avatar/examples/AvatarDotIndicatorPositionExample.vue'
|
import FwbAvatarExamplePlaceholder from './avatar/examples/FwbAvatarExamplePlaceholder.vue'
|
||||||
import AvatarAlternativeTextExample from './avatar/examples/AvatarAlternativeTextExample.vue'
|
import FwbAvatarExampleSize from './avatar/examples/FwbAvatarExampleSize.vue'
|
||||||
import StackedAvatarsExample from './avatar/examples/StackedAvatarsExample.vue'
|
import FwbAvatarExampleStack from './avatar/examples/FwbAvatarExampleStack.vue'
|
||||||
import AvatarPlaceholderExample from './avatar/examples/AvatarPlaceholderExample.vue'
|
import FwbAvatarExampleStatus from './avatar/examples/FwbAvatarExampleStatus.vue'
|
||||||
import AvatarPlaceholderInitialsExample from './avatar/examples/AvatarPlaceholderInitialsExample.vue'
|
import FwbAvatarExampleStatusPosition from './avatar/examples/FwbAvatarExampleStatusPosition.vue'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
# Vue Avatar - Flowbite
|
# Vue Avatar - Flowbite
|
||||||
Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
|
Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
|
||||||
@@ -17,202 +16,234 @@ Use the avatar component to show a visual representation of a user profile using
|
|||||||
## Default avatar
|
## Default avatar
|
||||||
Use this example to create a circle and rounded avatar on an image element.
|
Use this example to create a circle and rounded avatar on an image element.
|
||||||
|
|
||||||
<AvatarExample />
|
<fwb-avatar-example />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex justify-center space-x-4">
|
||||||
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
|
<fwb-avatar img="/images/avatar-1.jpg" />
|
||||||
<Avatar status="online" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
|
<fwb-avatar img="/images/avatar-1.jpg" rounded />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Bordered
|
## Bordered
|
||||||
Use this example to create a circle and rounded avatar on an image element.
|
Use this example to create a circle and rounded avatar on an image element.
|
||||||
|
|
||||||
<AvatarBorderedExample />
|
<fwb-avatar-example-bordered />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex justify-center space-x-4">
|
||||||
<Avatar status="online" bordered img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar bordered img="/images/avatar-1.jpg" />
|
||||||
<Avatar status="online" bordered rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar bordered img="/images/avatar-1.jpg" rounded />
|
||||||
</div>
|
</div></template>
|
||||||
</template>
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Dot indicator
|
## Dot indicator
|
||||||
Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
|
Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
|
||||||
|
|
||||||
<AvatarDotIndicatorExample />
|
<fwb-avatar-example-status />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex justify-center space-x-4">
|
||||||
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar img="/images/avatar-1.jpg" status="online" />
|
||||||
<Avatar status="busy" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar img="/images/avatar-1.jpg" status="busy" />
|
||||||
<Avatar status="away" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar img="/images/avatar-1.jpg" status="away" />
|
||||||
<Avatar status="offline" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar img="/images/avatar-1.jpg" status="offline" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Dot indicator position
|
## Dot indicator position
|
||||||
|
|
||||||
|
<fwb-avatar-example-status-position />
|
||||||
<AvatarDotIndicatorPositionExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center">
|
<div class="flex justify-center space-x-4">
|
||||||
<Avatar status="online" status-position="top-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar
|
||||||
<Avatar status="online" status-position="top-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
img="/images/avatar-1.jpg"
|
||||||
<Avatar status="online" status-position="top-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
status-position="top-left"
|
||||||
<Avatar status="online" status-position="top-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
status="online"
|
||||||
<Avatar status="online" status-position="bottom-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
/>
|
||||||
<Avatar status="online" status-position="bottom-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar
|
||||||
<Avatar status="online" status-position="bottom-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
img="/images/avatar-1.jpg"
|
||||||
<Avatar status="online" status-position="bottom-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
rounded
|
||||||
|
status-position="top-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="/images/avatar-1.jpg"
|
||||||
|
status-position="top-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="/images/avatar-1.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="top-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="/images/avatar-1.jpg"
|
||||||
|
status-position="bottom-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="/images/avatar-1.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="bottom-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="/images/avatar-1.jpg"
|
||||||
|
status-position="bottom-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="/images/avatar-1.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="bottom-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Sizes
|
## Sizes
|
||||||
|
|
||||||
Choose from multiple sizing options for the avatar component from this example.
|
Choose from multiple sizing options for the avatar component from this example.
|
||||||
|
|
||||||
<AvatarSizeExample />
|
<fwb-avatar-example-size />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center">
|
<div class="flex justify-center items-center space-x-4">
|
||||||
<Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar size="xs" img="/images/avatar-1.jpg" />
|
||||||
<Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar size="sm" img="/images/avatar-1.jpg" />
|
||||||
<Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar size="md" img="/images/avatar-1.jpg" />
|
||||||
<Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar size="lg" img="/images/avatar-1.jpg" />
|
||||||
<Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
<fwb-avatar size="xl" img="/images/avatar-1.jpg" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Alternative text
|
## Alternative text
|
||||||
|
|
||||||
<AvatarAlternativeTextExample />
|
<fwb-avatar-example-alt />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
|
<div class="flex justify-center">
|
||||||
|
<fwb-avatar alt="Alternative text" img="/images/avatar-1.jpg" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Stacked avatars
|
## Stacked avatars
|
||||||
Use this example if you want to stack a group of users by overlapping the avatar components.
|
Use this example if you want to stack a group of users by overlapping the avatar components.
|
||||||
|
|
||||||
<StackedAvatarsExample />
|
<fwb-avatar-example-stack />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { StackedAvatars, Avatar, StackedAvatarsCounter } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<StackedAvatars>
|
<div class="grid gap-2">
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
|
<stacked-avatars>
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
|
<fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
|
<fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
|
<fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
|
<fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
|
||||||
</StackedAvatars>
|
<fwb-avatar img="/images/avatar-5.jpg" rounded stacked />
|
||||||
<StackedAvatars class="mt-2.5">
|
</stacked-avatars>
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
|
<stacked-avatars>
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
|
<fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
|
<fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
|
<fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
|
||||||
<StackedAvatarsCounter total="99" href="#" />
|
<fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
|
||||||
</StackedAvatars>
|
<stacked-avatars-counter href="#" total="99" />
|
||||||
|
</stacked-avatars>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Placeholder icon
|
## Placeholder icon
|
||||||
|
|
||||||
<AvatarPlaceholderExample />
|
<fwb-avatar-example-placeholder />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex justify-center space-x-4">
|
||||||
<Avatar class="mr-2.5" />
|
<fwb-avatar />
|
||||||
<Avatar rounded />
|
<fwb-avatar rounded />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Placeholder initials
|
## Placeholder initials
|
||||||
|
|
||||||
<AvatarPlaceholderInitialsExample />
|
<fwb-avatar-example-initials />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex justify-center space-x-4">
|
||||||
<Avatar initials="JD" class="mr-2.5" />
|
<fwb-avatar initials="JD" />
|
||||||
<Avatar initials="JD" rounded />
|
<fwb-avatar initials="JD" rounded />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Alternative Placeholder Icon
|
## Alternative Placeholder Icon
|
||||||
Use this example if you'd like to specify a different placeholder icon. Specify a `#placeholder` template slot to override the default placeholder icon. This has no effect if using initials.
|
Use this example if you'd like to specify a different placeholder icon. Specify a `#placeholder` template slot to override the default placeholder icon. This has no effect if using initials.
|
||||||
|
|
||||||
<AvatarAlternativePlaceholderExample />
|
<fwb-avatar-example-icon />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex">
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
<Avatar class="mr-2.5">
|
<fwb-avatar>
|
||||||
<template #placeholder>
|
<template #placeholder>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
|
<svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
<path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</Avatar>
|
</fwb-avatar>
|
||||||
<Avatar rounded>
|
<fwb-avatar rounded>
|
||||||
<template #placeholder>
|
<template #placeholder>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
|
<svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
<path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</Avatar>
|
</fwb-avatar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
|
||||||
import { Avatar } from 'flowbite-vue'
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from 'flowbite-vue'
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar class="mr-2.5">
|
|
||||||
<template #placeholder>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</Avatar>
|
|
||||||
<Avatar rounded>
|
|
||||||
<template #placeholder>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</Avatar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar status="online" bordered img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" bordered rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="online" />
|
|
||||||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="busy" />
|
|
||||||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="away" />
|
|
||||||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="offline" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar status="online" status-position="top-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="top-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="top-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="top-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="bottom-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="bottom-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="bottom-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" status-position="bottom-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar class="mr-2.5" />
|
|
||||||
<Avatar rounded />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Avatar initials="JD" class="mr-2.5" />
|
|
||||||
<Avatar initials="JD" rounded />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
<Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Avatar } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
15
docs/components/avatar/examples/FwbAvatarExample.vue
Normal file
15
docs/components/avatar/examples/FwbAvatarExample.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
12
docs/components/avatar/examples/FwbAvatarExampleAlt.vue
Normal file
12
docs/components/avatar/examples/FwbAvatarExampleAlt.vue
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center">
|
||||||
|
<fwb-avatar
|
||||||
|
alt="Alternative text"
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
17
docs/components/avatar/examples/FwbAvatarExampleBordered.vue
Normal file
17
docs/components/avatar/examples/FwbAvatarExampleBordered.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar
|
||||||
|
bordered
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
bordered
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
44
docs/components/avatar/examples/FwbAvatarExampleIcon.vue
Normal file
44
docs/components/avatar/examples/FwbAvatarExampleIcon.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar>
|
||||||
|
<template #placeholder>
|
||||||
|
<svg
|
||||||
|
class="w-12 h-12"
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-avatar>
|
||||||
|
<fwb-avatar rounded>
|
||||||
|
<template #placeholder>
|
||||||
|
<svg
|
||||||
|
class="w-12 h-12"
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-avatar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
13
docs/components/avatar/examples/FwbAvatarExampleInitials.vue
Normal file
13
docs/components/avatar/examples/FwbAvatarExampleInitials.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar initials="JD" />
|
||||||
|
<fwb-avatar
|
||||||
|
initials="JD"
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar />
|
||||||
|
<fwb-avatar rounded />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
28
docs/components/avatar/examples/FwbAvatarExampleSize.vue
Normal file
28
docs/components/avatar/examples/FwbAvatarExampleSize.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center items-center space-x-4">
|
||||||
|
<fwb-avatar
|
||||||
|
size="xs"
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
size="sm"
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
size="md"
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
size="lg"
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
size="xl"
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
61
docs/components/avatar/examples/FwbAvatarExampleStack.vue
Normal file
61
docs/components/avatar/examples/FwbAvatarExampleStack.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw grid gap-2">
|
||||||
|
<fwb-avatar-stack>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-4.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
</fwb-avatar-stack>
|
||||||
|
<fwb-avatar-stack>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-4.jpg"
|
||||||
|
rounded
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
<fwb-avatar-stack-counter
|
||||||
|
href="#"
|
||||||
|
:total="99"
|
||||||
|
/>
|
||||||
|
</fwb-avatar-stack>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar, FwbAvatarStack, FwbAvatarStackCounter } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
24
docs/components/avatar/examples/FwbAvatarExampleStatus.vue
Normal file
24
docs/components/avatar/examples/FwbAvatarExampleStatus.vue
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status="busy"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status="away"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status="offline"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex justify-center space-x-4">
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status-position="top-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="top-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status-position="top-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="top-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status-position="bottom-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="bottom-left"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
status-position="bottom-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
<fwb-avatar
|
||||||
|
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
rounded
|
||||||
|
status-position="bottom-right"
|
||||||
|
status="online"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbAvatar } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex-col">
|
|
||||||
<StackedAvatars>
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
|
|
||||||
</StackedAvatars>
|
|
||||||
<StackedAvatars class="mt-2.5">
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
|
|
||||||
<Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
|
|
||||||
<StackedAvatarsCounter total="99" href="#" />
|
|
||||||
</StackedAvatars>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { StackedAvatars, Avatar, StackedAvatarsCounter } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import BadgeTypesExample from './badge/examples/BadgeTypesExample.vue'
|
import FwbBadgeExample from './badge/examples/FwbBadgeExample.vue'
|
||||||
import BadgeSizesExample from './badge/examples/BadgeSizesExample.vue'
|
import FwbBadgeExampleSize from './badge/examples/FwbBadgeExampleSize.vue'
|
||||||
import BadgeLinksExample from './badge/examples/BadgeLinksExample.vue'
|
import FwbBadgeExampleLink from './badge/examples/FwbBadgeExampleLink.vue'
|
||||||
import BadgeIconsExample from './badge/examples/BadgeIconsExample.vue'
|
import FwbBadgeExampleIcon from './badge/examples/FwbBadgeExampleIcon.vue'
|
||||||
import BadgeOnlyIconsExample from './badge/examples/BadgeOnlyIconsExample.vue'
|
import FwbBadgeExampleIconOnly from './badge/examples/FwbBadgeExampleIconOnly.vue'
|
||||||
</script>
|
</script>
|
||||||
# Vue Badge - Flowbite
|
# Vue Badge - Flowbite
|
||||||
|
|
||||||
@@ -17,98 +17,127 @@ Original reference: [https://flowbite.com/docs/components/badge/](https://flowbi
|
|||||||
The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
|
The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
|
||||||
Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.
|
Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Default badge
|
## Default badge
|
||||||
Prop – type
|
Prop – type
|
||||||
|
|
||||||
<BadgeTypesExample />
|
<fwb-badge-example />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Badge } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Badge />
|
<fwb-badge>Default</fwb-badge>
|
||||||
<Badge type="dark" />
|
<fwb-badge type="dark">Dark</fwb-badge>
|
||||||
<Badge type="red" />
|
<fwb-badge type="red">Red</fwb-badge>
|
||||||
<Badge type="green" />
|
<fwb-badge type="green">Green</fwb-badge>
|
||||||
<Badge type="yellow" />
|
<fwb-badge type="yellow">Yellow</fwb-badge>
|
||||||
<Badge type="indigo" />
|
<fwb-badge type="indigo">Indigo</fwb-badge>
|
||||||
<Badge type="purple" />
|
<fwb-badge type="purple">Purple</fwb-badge>
|
||||||
<Badge type="pink" />
|
<fwb-badge type="pink">Pink</fwb-badge>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Large badges
|
## Large badges
|
||||||
Prop – size
|
Prop – size
|
||||||
|
|
||||||
<BadgeSizesExample />
|
<fwb-badge-example-size />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Badge } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Badge />
|
<fwb-badge size="xs">Default</fwb-badge>
|
||||||
<Badge type="dark" />
|
<fwb-badge size="xs" type="dark">Dark</fwb-badge>
|
||||||
<Badge type="red" />
|
<fwb-badge size="xs" type="red">Red</fwb-badge>
|
||||||
<Badge type="green" />
|
<fwb-badge size="xs" type="green">Green</fwb-badge>
|
||||||
<Badge type="yellow" />
|
<fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
|
||||||
<Badge type="indigo" />
|
<fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
|
||||||
<Badge type="purple" />
|
<fwb-badge size="sm" type="purple">Purple</fwb-badge>
|
||||||
<Badge type="pink" />
|
<fwb-badge size="sm" type="pink">Pink</fwb-badge>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Badges as links
|
## Badges as links
|
||||||
You can also use badges as anchor elements to link to another page.
|
You can also use badges as anchor elements to link to another page.
|
||||||
Prop – href
|
Prop – href
|
||||||
|
|
||||||
|
<fwb-badge-example-link />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Badge } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Badge href="#">Link</Badge>
|
<fwb-badge href="#">
|
||||||
|
Link
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge href="#" size="sm">
|
||||||
|
Link small
|
||||||
|
</fwb-badge>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
<BadgeLinksExample />
|
<script setup>
|
||||||
|
import { FwbBadge } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
## Badges with icon
|
## Badges with icon
|
||||||
You can also use SVG icons inside the badge elements.
|
You can also use SVG icons inside the badge elements.
|
||||||
slot icon
|
slot icon
|
||||||
|
|
||||||
|
<fwb-badge-example-icon />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Badge } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Badge>
|
<fwb-badge>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
</template>
|
<path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
|
||||||
Default
|
</svg>
|
||||||
</Badge>
|
</template>
|
||||||
|
Default
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge size="sm" type="dark">
|
||||||
|
<template #icon>
|
||||||
|
<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
Dark
|
||||||
|
</fwb-badge>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
<BadgeIconsExample />
|
<script setup>
|
||||||
|
import { FwbBadge } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
## Badge with icon only
|
## Badge with icon only
|
||||||
|
|
||||||
|
<fwb-badge-example-icon-only />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Badge } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Badge>
|
<fwb-badge>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
</template>
|
<path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
|
||||||
</Badge>
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="dark">
|
||||||
|
<template #icon>
|
||||||
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge size="sm" type="green">
|
||||||
|
<template #icon>
|
||||||
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-badge>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
<BadgeOnlyIconsExample />
|
<script setup>
|
||||||
|
import { FwbBadge } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex items-end">
|
|
||||||
<Badge>
|
|
||||||
<template #icon>
|
|
||||||
<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
Default
|
|
||||||
</Badge>
|
|
||||||
<Badge type="dark" size="sm">
|
|
||||||
<template #icon>
|
|
||||||
<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
Dark
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Badge from '@/components/Badge/Badge.vue'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex items-end">
|
|
||||||
<Badge href="#">Link</Badge>
|
|
||||||
<Badge size="sm" href="#">Link</Badge>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Badge } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex items-end">
|
|
||||||
<Badge>
|
|
||||||
<template #icon>
|
|
||||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
</Badge>
|
|
||||||
<Badge type="dark">
|
|
||||||
<template #icon>
|
|
||||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
</Badge>
|
|
||||||
<Badge type="green" size="sm">
|
|
||||||
<template #icon>
|
|
||||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Badge from '@/components/Badge/Badge.vue'
|
|
||||||
</script>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Badge size="sm">Default</Badge>
|
|
||||||
<Badge type="dark" size="sm">Dark</Badge>
|
|
||||||
<Badge type="red" size="sm">Red</Badge>
|
|
||||||
<Badge type="green" size="sm">Green</Badge>
|
|
||||||
<Badge type="yellow" size="sm">Yellow</Badge>
|
|
||||||
<Badge type="indigo" size="sm">Indigo</Badge>
|
|
||||||
<Badge type="purple" size="sm">Purple</Badge>
|
|
||||||
<Badge type="pink" size="sm">Pink</Badge>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Badge } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex">
|
|
||||||
<Badge>Default</Badge>
|
|
||||||
<Badge type="dark">Dark</Badge>
|
|
||||||
<Badge type="red">Red</Badge>
|
|
||||||
<Badge type="green">Green</Badge>
|
|
||||||
<Badge type="yellow">Yellow</Badge>
|
|
||||||
<Badge type="indigo">Indigo</Badge>
|
|
||||||
<Badge type="purple">Purple</Badge>
|
|
||||||
<Badge type="pink">Pink</Badge>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Badge } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
32
docs/components/badge/examples/FwbBadgeExample.vue
Normal file
32
docs/components/badge/examples/FwbBadgeExample.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex">
|
||||||
|
<fwb-badge>
|
||||||
|
Default
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="dark">
|
||||||
|
Dark
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="red">
|
||||||
|
Red
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="green">
|
||||||
|
Green
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="yellow">
|
||||||
|
Yellow
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="indigo">
|
||||||
|
Indigo
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="purple">
|
||||||
|
Purple
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="pink">
|
||||||
|
Pink
|
||||||
|
</fwb-badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
43
docs/components/badge/examples/FwbBadgeExampleIcon.vue
Normal file
43
docs/components/badge/examples/FwbBadgeExampleIcon.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex items-end">
|
||||||
|
<fwb-badge>
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="mr-1 w-3 h-3"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
Default
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="sm"
|
||||||
|
type="dark"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="mr-1 w-3 h-3"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
Dark
|
||||||
|
</fwb-badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
56
docs/components/badge/examples/FwbBadgeExampleIconOnly.vue
Normal file
56
docs/components/badge/examples/FwbBadgeExampleIconOnly.vue
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex items-end">
|
||||||
|
<fwb-badge>
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge type="dark">
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="sm"
|
||||||
|
type="green"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
</fwb-badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
17
docs/components/badge/examples/FwbBadgeExampleLink.vue
Normal file
17
docs/components/badge/examples/FwbBadgeExampleLink.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex items-end">
|
||||||
|
<fwb-badge href="#">
|
||||||
|
Link
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
href="#"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Link small
|
||||||
|
</fwb-badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
53
docs/components/badge/examples/FwbBadgeExampleSize.vue
Normal file
53
docs/components/badge/examples/FwbBadgeExampleSize.vue
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex items-end">
|
||||||
|
<fwb-badge size="xs">
|
||||||
|
Default
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="xs"
|
||||||
|
type="dark"
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="xs"
|
||||||
|
type="red"
|
||||||
|
>
|
||||||
|
Red
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="xs"
|
||||||
|
type="green"
|
||||||
|
>
|
||||||
|
Green
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="sm"
|
||||||
|
type="yellow"
|
||||||
|
>
|
||||||
|
Yellow
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="sm"
|
||||||
|
type="indigo"
|
||||||
|
>
|
||||||
|
Indigo
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="sm"
|
||||||
|
type="purple"
|
||||||
|
>
|
||||||
|
Purple
|
||||||
|
</fwb-badge>
|
||||||
|
<fwb-badge
|
||||||
|
size="sm"
|
||||||
|
type="pink"
|
||||||
|
>
|
||||||
|
Pink
|
||||||
|
</fwb-badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBadge } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import BreadcrumbExample from './breadcrumb/examples/BreadcrumbExample.vue'
|
import FwbBreadcrumbExample from './breadcrumb/examples/FwbBreadcrumbExample.vue'
|
||||||
import BreadcrumbSolidExample from './breadcrumb/examples/BreadcrumbSolidExample.vue'
|
import FwbBreadcrumbExampleSolid from './breadcrumb/examples/FwbBreadcrumbExampleSolid.vue'
|
||||||
import BreadcrumbCustomIconsExample from './breadcrumb/examples/BreadcrumbCustomIconsExample.vue'
|
import FwbBreadcrumbExampleCustomIcons from './breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue'
|
||||||
</script>
|
</script>
|
||||||
# Vue Breadcrumb - Flowbite
|
# Vue Breadcrumb - Flowbite
|
||||||
The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
|
The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
|
||||||
@@ -10,50 +10,84 @@ Flowbite includes two styles of breadcrumb elements, one that has a transparent
|
|||||||
|
|
||||||
## Default breadcrumb
|
## Default breadcrumb
|
||||||
|
|
||||||
<BreadcrumbExample />
|
<fwb-breadcrumb-example />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Breadcrumb } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Breadcrumb>
|
<fwb-breadcrumb>
|
||||||
<BreadcrumbItem href="#" home>
|
<fwb-breadcrumb-item home href="#">
|
||||||
Home
|
Home
|
||||||
</BreadcrumbItem>
|
</fwb-breadcrumb-item>
|
||||||
<BreadcrumbItem href="#">
|
<fwb-breadcrumb-item href="#">
|
||||||
Projects
|
Projects
|
||||||
</BreadcrumbItem>
|
</fwb-breadcrumb-item>
|
||||||
<BreadcrumbItem>
|
<fwb-breadcrumb-item>
|
||||||
Flowbite
|
Flowbite
|
||||||
</BreadcrumbItem>
|
</fwb-breadcrumb-item>
|
||||||
</Breadcrumb>
|
</fwb-breadcrumb>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Solid Breadcrumb
|
## Solid Breadcrumb
|
||||||
|
|
||||||
<BreadcrumbSolidExample />
|
<fwb-breadcrumb-example-solid />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Breadcrumb } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Breadcrumb solid>
|
<fwb-breadcrumb solid>
|
||||||
<BreadcrumbItem href="#" home>
|
<fwb-breadcrumb-item home href="#">
|
||||||
Home
|
Home
|
||||||
</BreadcrumbItem>
|
</fwb-breadcrumb-item>
|
||||||
<BreadcrumbItem href="#">
|
<fwb-breadcrumb-item href="#">
|
||||||
Projects
|
Projects
|
||||||
</BreadcrumbItem>
|
</fwb-breadcrumb-item>
|
||||||
<BreadcrumbItem>
|
<fwb-breadcrumb-item>
|
||||||
Flowbite
|
Flowbite
|
||||||
</BreadcrumbItem>
|
</fwb-breadcrumb-item>
|
||||||
</Breadcrumb>
|
</fwb-breadcrumb>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Custom Icons
|
## Custom Icons
|
||||||
|
|
||||||
<BreadcrumbCustomIconsExample />
|
<fwb-breadcrumb-example-custom-icons />
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<fwb-breadcrumb>
|
||||||
|
<fwb-breadcrumb-item home href="#">
|
||||||
|
<template #home-icon>
|
||||||
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
Home
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item href="#">
|
||||||
|
<template #arrow-icon>
|
||||||
|
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
Projects
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item>
|
||||||
|
<template #arrow-icon>
|
||||||
|
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
Flowbite
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
</fwb-breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbItem href="#" home>
|
|
||||||
<template #home-icon>
|
|
||||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg> </template>
|
|
||||||
Home
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem href="#">
|
|
||||||
<template #arrow-icon>
|
|
||||||
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
||||||
</template>
|
|
||||||
Projects
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<template #arrow-icon>
|
|
||||||
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
||||||
</template>
|
|
||||||
Flowbite
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbItem href="#" home>
|
|
||||||
Home
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem href="#">
|
|
||||||
Projects
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem>
|
|
||||||
Flowbite
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw flex flex-col">
|
|
||||||
<Breadcrumb solid>
|
|
||||||
<BreadcrumbItem href="#" home>
|
|
||||||
Home
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem href="#">
|
|
||||||
Projects
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem>
|
|
||||||
Flowbite
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
22
docs/components/breadcrumb/examples/FwbBreadcrumbExample.vue
Normal file
22
docs/components/breadcrumb/examples/FwbBreadcrumbExample.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-breadcrumb>
|
||||||
|
<fwb-breadcrumb-item
|
||||||
|
home
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item href="#">
|
||||||
|
Projects
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item>
|
||||||
|
Flowbite
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
</fwb-breadcrumb>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBreadcrumb, FwbBreadcrumbItem } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-breadcrumb>
|
||||||
|
<fwb-breadcrumb-item
|
||||||
|
home
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<template #home-icon>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
Home
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item href="#">
|
||||||
|
<template #arrow-icon>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-400 mr-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M14 5l7 7m0 0l-7 7m7-7H3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
Projects
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item>
|
||||||
|
<template #arrow-icon>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-400 mr-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M14 5l7 7m0 0l-7 7m7-7H3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
Flowbite
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
</fwb-breadcrumb>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBreadcrumb, FwbBreadcrumbItem } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-breadcrumb solid>
|
||||||
|
<fwb-breadcrumb-item
|
||||||
|
home
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item href="#">
|
||||||
|
Projects
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
<fwb-breadcrumb-item>
|
||||||
|
Flowbite
|
||||||
|
</fwb-breadcrumb-item>
|
||||||
|
</fwb-breadcrumb>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbBreadcrumb, FwbBreadcrumbItem } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import ButtonGroupBasicExample from './buttonGroup/examples/ButtonGroupBasicExample.vue';
|
import FwbButtonGroupExample from './buttonGroup/examples/FwbButtonGroupExample.vue'
|
||||||
import ButtonGroupIconExample from './buttonGroup/examples/ButtonGroupIconExample.vue';
|
import FwbButtonGroupExampleIcon from './buttonGroup/examples/FwbButtonGroupExampleIcon.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# Vue Button Group - Flowbite
|
# Vue Button Group - Flowbite
|
||||||
@@ -17,41 +17,43 @@ The button group component from Flowbite can be used to stack together multiple
|
|||||||
|
|
||||||
## Basic example
|
## Basic example
|
||||||
|
|
||||||
<ButtonGroupBasicExample />
|
<fwb-button-group-example />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { ButtonGroup, Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<button-group>
|
<fwb-button-group>
|
||||||
<Button>hello world</Button>
|
<fwb-button>Button Default</fwb-button>
|
||||||
<Button color="purple">hello world</Button>
|
<fwb-button color="purple">Button Purple</fwb-button>
|
||||||
<Button color="alternative">hello world</Button>
|
<fwb-button color="alternative">Button Alternative</fwb-button>
|
||||||
<Button color="red">hello world</Button>
|
<fwb-button color="red">Button Red</fwb-button>
|
||||||
</button-group>
|
</fwb-button-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Buttons with icons
|
## Buttons with icons
|
||||||
|
|
||||||
<ButtonGroupIconExample />
|
<fwb-button-group-example-icon />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { ButtonGroup, Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<button-group>
|
<fwb-button-group>
|
||||||
<Button outline>Button1</Button>
|
<fwb-button outline>Button 1</fwb-button>
|
||||||
<Button outline>Button2</Button>
|
<fwb-button outline>Button 2</fwb-button>
|
||||||
<Button outline>Button3</Button>
|
<fwb-button outline>Button 3</fwb-button>
|
||||||
<Button outline>
|
<fwb-button outline>
|
||||||
hello world
|
Button 4
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</fwb-button>
|
||||||
</button-group>
|
</fwb-button-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import ButtonColorExample from './button/examples/ButtonColorExample.vue';
|
import FwbButtonExampleColor from './button/examples/FwbButtonExampleColor.vue';
|
||||||
import ButtonSizeExample from './button/examples/ButtonSizeExample.vue';
|
import FwbButtonExampleDisabled from './button/examples/FwbButtonExampleDisabled.vue';
|
||||||
import ButtonPillExample from './button/examples/ButtonPillExample.vue';
|
import FwbButtonExampleGradientDuotone from './button/examples/FwbButtonExampleGradientDuotone.vue';
|
||||||
import ButtonGradientMonochromeExample from './button/examples/ButtonGradientMonochromeExample.vue';
|
import FwbButtonExampleGradientMonochrome from './button/examples/FwbButtonExampleGradientMonochrome.vue';
|
||||||
import ButtonGradientDuotoneExample from './button/examples/ButtonGradientDuotoneExample.vue';
|
import FwbButtonExampleLink from './button/examples/FwbButtonExampleLink.vue';
|
||||||
import ButtonOutlineColorExample from './button/examples/ButtonOutlineColorExample.vue';
|
import FwbButtonExampleLoading from './button/examples/FwbButtonExampleLoading.vue';
|
||||||
import ButtonPrefixExample from './button/examples/ButtonPrefixExample.vue';
|
import FwbButtonExampleOutline from './button/examples/FwbButtonExampleOutline.vue';
|
||||||
import ButtonSuffixExample from './button/examples/ButtonSuffixExample.vue';
|
import FwbButtonExampleOutlineGradient from './button/examples/FwbButtonExampleOutlineGradient.vue';
|
||||||
import ButtonOutlineGradientExample from './button/examples/ButtonOutlineGradientExample.vue';
|
import FwbButtonExamplePill from './button/examples/FwbButtonExamplePill.vue';
|
||||||
import ButtonGradientShadowExample from './button/examples/ButtonGradientShadowExample.vue';
|
import FwbButtonExampleShadow from './button/examples/FwbButtonExampleShadow.vue';
|
||||||
import ButtonIconExample from './button/examples/ButtonIconExample.vue';
|
import FwbButtonExampleSize from './button/examples/FwbButtonExampleSize.vue';
|
||||||
import ButtonSquareExample from './button/examples/ButtonSquareExample.vue';
|
import FwbButtonExampleSlot from './button/examples/FwbButtonExampleSlot.vue';
|
||||||
import ButtonDisabledExample from './button/examples/ButtonDisabledExample.vue';
|
import FwbButtonExampleSlotPrefix from './button/examples/FwbButtonExampleSlotPrefix.vue';
|
||||||
import ButtonLoadingExample from './button/examples/ButtonLoadingExample.vue';
|
import FwbButtonExampleSlotSuffix from './button/examples/FwbButtonExampleSlotSuffix.vue';
|
||||||
import ButtonLinkExample from './button/examples/ButtonLinkExample.vue';
|
import FwbButtonExampleSquare from './button/examples/FwbButtonExampleSquare.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# Vue Button - Flowbite
|
# Vue Button - Flowbite
|
||||||
@@ -32,413 +32,360 @@ Flowbite provides a large variety of styles and sizes for the button component i
|
|||||||
|
|
||||||
## Prop - color
|
## Prop - color
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-color />
|
||||||
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
|
|
||||||
defineProps({
|
|
||||||
color: {
|
|
||||||
type: String as PropType<ButtonVariant>,
|
|
||||||
default: 'default',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonColorExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default">Default</Button>
|
<fwb-button color="default">Default</fwb-button>
|
||||||
<Button color="alternative">Alternative</Button>
|
<fwb-button color="alternative">Alternative</fwb-button>
|
||||||
<Button color="dark">Dark</Button>
|
<fwb-button color="dark">Dark</fwb-button>
|
||||||
<Button color="light">Light</Button>
|
<fwb-button color="light">Light</fwb-button>
|
||||||
<Button color="green">Green</Button>
|
<fwb-button color="green">Green</fwb-button>
|
||||||
<Button color="red">Red</Button>
|
<fwb-button color="red">Red</fwb-button>
|
||||||
<Button color="yellow">Yellow</Button>
|
<fwb-button color="yellow">Yellow</fwb-button>
|
||||||
<Button color="purple">Purple</Button>
|
<fwb-button color="purple">Purple</fwb-button>
|
||||||
|
<fwb-button color="pink">Pink</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
|
|
||||||
## Prop - size
|
## Prop - size
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-size />
|
||||||
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
||||||
defineProps({
|
|
||||||
size: {
|
|
||||||
type: String as PropType<ButtonSize>,
|
|
||||||
default: 'md',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonSizeExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button size="xs">XS</Button>
|
<fwb-button size="xs">Extra Small - xs</fwb-button>
|
||||||
<Button size="sm">SM</Button>
|
<fwb-button size="sm">Small - sm</fwb-button>
|
||||||
<Button size="md">MD</Button>
|
<fwb-button size="md">Medium - md</fwb-button>
|
||||||
<Button size="lg">LG</Button>
|
<fwb-button size="lg">Large - lg</fwb-button>
|
||||||
<Button size="xl">XL</Button>
|
<fwb-button size="xl">Extra Large - xl</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - pill
|
## Prop - pill
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-pill />
|
||||||
defineProps({
|
|
||||||
pill: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonPillExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default" pill>Default</Button>
|
<fwb-button color="default" pill>Default</fwb-button>
|
||||||
<Button color="alternative" pill>Alternative</Button>
|
<fwb-button color="alternative" pill>Alternative</fwb-button>
|
||||||
<Button color="dark" pill>Dark</Button>
|
<fwb-button color="dark" pill>Dark</fwb-button>
|
||||||
<Button color="light" pill>Light</Button>
|
<fwb-button color="light" pill>Light</fwb-button>
|
||||||
<Button color="green" pill>Green</Button>
|
<fwb-button color="green" pill>Green</fwb-button>
|
||||||
<Button color="red" pill>Red</Button>
|
<fwb-button color="red" pill>Red</fwb-button>
|
||||||
<Button color="yellow" pill>Yellow</Button>
|
<fwb-button color="yellow" pill>Yellow</fwb-button>
|
||||||
<Button color="purple" pill>Purple</Button>
|
<fwb-button color="purple" pill>Purple</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
|
|
||||||
## Prop - gradient (monochrome)
|
## Prop - gradient (monochrome)
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-gradient-monochrome />
|
||||||
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
|
|
||||||
type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
|
|
||||||
type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
gradient: {
|
|
||||||
type: [String, null] as PropType<ButtonGradient | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonGradientMonochromeExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="blue">Blue</Button>
|
<fwb-button gradient="blue">Blue</fwb-button>
|
||||||
<Button gradient="cyan">Cyan</Button>
|
<fwb-button gradient="cyan">Cyan</fwb-button>
|
||||||
<Button gradient="green">Green</Button>
|
<fwb-button gradient="green">Green</fwb-button>
|
||||||
<Button gradient="lime">Lime</Button>
|
<fwb-button gradient="lime">Lime</fwb-button>
|
||||||
<Button gradient="pink">Pink</Button>
|
<fwb-button gradient="pink">Pink</fwb-button>
|
||||||
<Button gradient="purple">Purple</Button>
|
<fwb-button gradient="purple">Purple</fwb-button>
|
||||||
<Button gradient="red">Red</Button>
|
<fwb-button gradient="red">Red</fwb-button>
|
||||||
<Button gradient="teal">Teal</Button>
|
<fwb-button gradient="teal">Teal</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - gradient (duotone)
|
## Prop - gradient (duotone)
|
||||||
|
|
||||||
<ButtonGradientDuotoneExample />
|
|
||||||
|
|
||||||
|
<fwb-button-example-gradient-duotone />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="purple-blue">Purple to blue</Button>
|
<fwb-button gradient="purple-blue">Purple to blue</fwb-button>
|
||||||
<Button gradient="cyan-blue">Cyan to blue</Button>
|
<fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
|
||||||
<Button gradient="green-blue">Green to blue</Button>
|
<fwb-button gradient="green-blue">Green to blue</fwb-button>
|
||||||
<Button gradient="purple-pink">Purple to pink</Button>
|
<fwb-button gradient="purple-pink">Purple to pink</fwb-button>
|
||||||
<Button gradient="pink-orange">Pink to orange</Button>
|
<fwb-button gradient="pink-orange">Pink to orange</fwb-button>
|
||||||
<Button gradient="teal-lime">Teal to lime</Button>
|
<fwb-button gradient="teal-lime">Teal to lime</fwb-button>
|
||||||
<Button gradient="red-yellow">Red to yellow</Button>
|
<fwb-button gradient="red-yellow">Red to yellow</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
## Prop - outline (color)
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
```typescript
|
````
|
||||||
defineProps({
|
|
||||||
outline: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonOutlineColorExample />
|
## Prop - outline
|
||||||
|
|
||||||
|
<fwb-button-example-outline />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default" outline>Default</Button>
|
<fwb-button color="default" outline>Default</fwb-button>
|
||||||
<Button color="dark" outline>Dark</Button>
|
<fwb-button color="dark" outline>Dark</fwb-button>
|
||||||
<Button color="green" outline>Green</Button>
|
<fwb-button color="green" outline>Green</fwb-button>
|
||||||
<Button color="red" outline>Red</Button>
|
<fwb-button color="red" outline>Red</fwb-button>
|
||||||
<Button color="yellow" outline>Yellow</Button>
|
<fwb-button color="yellow" outline>Yellow</fwb-button>
|
||||||
<Button color="purple" outline>Purple</Button>
|
<fwb-button color="purple" outline>Purple</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - outline (gradient)
|
## Prop - outline (gradient)
|
||||||
|
|
||||||
<ButtonOutlineGradientExample />
|
<fwb-button-example-outline-gradient />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="purple-blue" outline>Purple to blue</Button>
|
<fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
|
||||||
<Button gradient="cyan-blue" outline>Cyan to blue</Button>
|
<fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
|
||||||
<Button gradient="green-blue" outline>Green to blue</Button>
|
<fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
|
||||||
<Button gradient="purple-pink" outline>Purple to pink</Button>
|
<fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
|
||||||
<Button gradient="pink-orange" outline>Pink to orange</Button>
|
<fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
|
||||||
<Button gradient="teal-lime" outline>Teal to lime</Button>
|
<fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
|
||||||
<Button gradient="red-yellow" outline>Red to yellow</Button>
|
<fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - shadow
|
## Prop - shadow
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-shadow />
|
||||||
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
shadow: {
|
|
||||||
type: [String, null] as PropType<ButtonMonochromeGradient | '' | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
<ButtonGradientShadowExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="blue" shadow>Blue</Button>
|
<fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
|
||||||
<Button gradient="cyan" shadow>Cyan</Button>
|
<fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
|
||||||
<Button gradient="green" shadow>Green</Button>
|
<fwb-button gradient="green" shadow>Green with green</fwb-button>
|
||||||
<Button gradient="lime" shadow>Lime</Button>
|
<fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
|
||||||
<Button gradient="pink" shadow>Pink</Button>
|
<fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
|
||||||
<Button gradient="purple" shadow>Purple</Button>
|
<fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
|
||||||
<Button gradient="red" shadow>Red</Button>
|
<fwb-button gradient="red" shadow>Red with red</fwb-button>
|
||||||
<Button gradient="teal" shadow>Teal</Button>
|
<fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
|
||||||
|
<fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
|
||||||
|
<fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
|
||||||
|
<fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - square
|
## Prop - square
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-square />
|
||||||
defineProps({
|
|
||||||
square: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonSquareExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="red-yellow" square>
|
<fwb-button gradient="red-yellow" square>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
</Button>
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
<Button color="default" pill square>
|
</svg>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
</fwb-button>
|
||||||
</Button>
|
<fwb-button color="default" pill square>
|
||||||
<Button color="dark" outline square>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
</Button>
|
</svg>
|
||||||
<Button color="yellow" pill outline square>
|
</fwb-button>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<fwb-button color="dark" outline square>
|
||||||
</Button>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="yellow" outline pill square>
|
||||||
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - loading
|
## Prop - loading
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-loading />
|
||||||
defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
loadingPosition: {
|
|
||||||
type: String as PropType<'suffix' | 'prefix'>,
|
|
||||||
default: 'prefix',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonLoadingExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
const loading = ref(false)
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
|
<fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
|
||||||
Click me
|
Click me
|
||||||
</Button>
|
</fwb-button>
|
||||||
<Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
|
<fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
|
||||||
Click me
|
Click me
|
||||||
</Button>
|
</fwb-button>
|
||||||
<Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
|
<fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
|
||||||
Click me
|
Click me
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path fill-rule="evenodd"
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</fwb-button>
|
||||||
<Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
|
<fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
|
||||||
Click me
|
Click me
|
||||||
</Button>
|
</fwb-button>
|
||||||
<Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
|
<fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
|
||||||
Click me
|
Click me
|
||||||
</Button>
|
</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - disabled
|
## Prop - disabled
|
||||||
|
|
||||||
```typescript
|
<fwb-button-example-disabled />
|
||||||
defineProps({
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonDisabledExample />
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default" disabled>Default</Button>
|
<fwb-button color="default" disabled>Default</fwb-button>
|
||||||
<Button color="default" outline disabled>Default outline</Button>
|
<fwb-button color="default" outline disabled>Default outline</fwb-button>
|
||||||
<Button gradient="red" disabled>Red gradient</Button>
|
<fwb-button gradient="red" disabled>Red gradient</fwb-button>
|
||||||
<Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
|
<fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
|
||||||
<Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
|
<fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
## Prop - href
|
## Prop - href
|
||||||
You can add a link to a `Button` component.
|
You can add a link to a `Button` component.
|
||||||
Additionally you can add `tag` prop to change button component to `router-link`
|
Additionally you can add `tag` prop to change button component to `router-link`
|
||||||
<ButtonLinkExample />
|
|
||||||
|
|
||||||
|
<fwb-button-example-link />
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default" href="https://google.com" target="_blank">Default</Button>
|
<fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
|
||||||
<Button href="/about" tag="router-link">Router link</Button>
|
<fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Slot - default
|
## Slot - default
|
||||||
|
|
||||||
<ButtonIconExample />
|
<fwb-button-example-slot />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button gradient="purple-blue" square>
|
<fwb-button gradient="purple-blue" square>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
</Button>
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
<Button color="default" pill square>
|
</svg>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
</fwb-button>
|
||||||
</Button>
|
<fwb-button color="default" pill square>
|
||||||
<Button gradient="green-blue" square>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="green-blue" square>
|
||||||
Close something
|
Close something
|
||||||
</Button>
|
</fwb-button>
|
||||||
<Button color="default" pill outline square>
|
<fwb-button color="default" outline pill square>
|
||||||
Open something
|
Open something
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
## Slot - prefix
|
## Slot - prefix
|
||||||
|
|
||||||
<ButtonPrefixExample />
|
<fwb-button-example-slot-prefix />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default">
|
<fwb-button>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||||
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
Buy
|
Buy
|
||||||
</Button>
|
</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
```
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
````
|
||||||
|
|
||||||
## Slot - suffix
|
## Slot - suffix
|
||||||
|
|
||||||
<ButtonSuffixExample />
|
<fwb-button-example-slot-suffix />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
|
||||||
import { Button } from 'flowbite-vue'
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<Button color="default">
|
<fwb-button>
|
||||||
Choose plan
|
Choose plan
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</fwb-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Button API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
| Name | Type | Values | Default |
|
||||||
|
|------------------|---------|------------------------------------------------------------------------------------------------|-----------|
|
||||||
|
| color | String | `default`, `alternative`, `dark`, `light`, `green`, `red`, `yellow`, `purple`, `pink`, `blue` | `default` |
|
||||||
|
| disabled | Boolean | | `false` |
|
||||||
|
| gradient | String | monochrome:<br>`blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple`<br>duotone:<br>`purple-blue`, `cyan-blue`, `green-blue`, `purple-pink`, `pink-orange`, `teal-lime`, `red-yellow` | `null` |
|
||||||
|
| href | String | | `''` |
|
||||||
|
| loading | Boolean | | `false` |
|
||||||
|
| loading-position | String | `prefix`, `suffix` | `prefix` |
|
||||||
|
| outline | Boolean | | `false` |
|
||||||
|
| pill | Boolean | | `false` |
|
||||||
|
| shadow | String | `blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple` | `null` |
|
||||||
|
| size | String | `xs`, `sm`, `md`, `lg`, `xl` | `md` |
|
||||||
|
| square | Boolean | | `false` |
|
||||||
|
| tag | String | | `a` |
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button color="default">Default</Button>
|
|
||||||
<Button color="alternative">Alternative</Button>
|
|
||||||
<Button color="dark">Dark</Button>
|
|
||||||
<Button color="light">Light</Button>
|
|
||||||
<Button color="green">Green</Button>
|
|
||||||
<Button color="red">Red</Button>
|
|
||||||
<Button color="yellow">Yellow</Button>
|
|
||||||
<Button color="purple">Purple</Button>
|
|
||||||
<Button color="pink">Pink</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button color="default" disabled>Default</Button>
|
|
||||||
<Button color="default" outline disabled>Default outline</Button>
|
|
||||||
<Button gradient="red" disabled>Red gradient</Button>
|
|
||||||
<Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
|
|
||||||
<Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="purple-blue">Purple to blue</Button>
|
|
||||||
<Button gradient="cyan-blue">Cyan to blue</Button>
|
|
||||||
<Button gradient="green-blue">Green to blue</Button>
|
|
||||||
<Button gradient="purple-pink">Purple to pink</Button>
|
|
||||||
<Button gradient="pink-orange">Pink to orange</Button>
|
|
||||||
<Button gradient="teal-lime">Teal to lime</Button>
|
|
||||||
<Button gradient="red-yellow">Red to yellow</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="blue">Blue</Button>
|
|
||||||
<Button gradient="cyan">Cyan</Button>
|
|
||||||
<Button gradient="green">Green</Button>
|
|
||||||
<Button gradient="lime">Lime</Button>
|
|
||||||
<Button gradient="pink">Pink</Button>
|
|
||||||
<Button gradient="purple">Purple</Button>
|
|
||||||
<Button gradient="red">Red</Button>
|
|
||||||
<Button gradient="teal">Teal</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="blue" shadow>Blue with blue</Button>
|
|
||||||
<Button gradient="cyan" shadow>Cyan with cyan</Button>
|
|
||||||
<Button gradient="green" shadow>Green with green</Button>
|
|
||||||
<Button gradient="lime" shadow>Lime with lime</Button>
|
|
||||||
<Button gradient="pink" shadow>Pink with pink</Button>
|
|
||||||
<Button gradient="purple" shadow>Purple with purple</Button>
|
|
||||||
<Button gradient="red" shadow>Red with red</Button>
|
|
||||||
<Button gradient="teal" shadow>Teal with teal</Button>
|
|
||||||
<Button gradient="blue" shadow="red">Blue with red</Button>
|
|
||||||
<Button gradient="cyan" shadow="teal">Cyan with teal</Button>
|
|
||||||
<Button gradient="teal" shadow="purple">Teal with purple</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="purple-blue" square>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</Button>
|
|
||||||
<Button color="default" pill square>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</Button>
|
|
||||||
<Button gradient="green-blue" square>
|
|
||||||
Close something
|
|
||||||
</Button>
|
|
||||||
<Button color="default" pill outline square>
|
|
||||||
Open something
|
|
||||||
<template #suffix>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,9 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
||||||
<Button color="default" href="https://google.com" target="_blank">Default</Button>
|
<fwb-button
|
||||||
<Button href="/about" tag="router-link">Router link</Button>
|
color="default"
|
||||||
|
href="https://google.com"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Default
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
href="/about"
|
||||||
|
tag="router-link"
|
||||||
|
>
|
||||||
|
Router link
|
||||||
|
</fwb-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Button } from '../../../../src/index'
|
import { FwbButton } from '../../../../src/index'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex items-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
|
|
||||||
Click me
|
|
||||||
</Button>
|
|
||||||
<Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
|
|
||||||
Click me
|
|
||||||
</Button>
|
|
||||||
<Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
|
|
||||||
Click me
|
|
||||||
<template #suffix>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"></path>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
<Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
|
|
||||||
Click me
|
|
||||||
</Button>
|
|
||||||
<Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
|
|
||||||
Click me
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
</script>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button color="default" outline>Default</Button>
|
|
||||||
<Button color="dark" outline>Dark</Button>
|
|
||||||
<Button color="green" outline>Green</Button>
|
|
||||||
<Button color="red" outline>Red</Button>
|
|
||||||
<Button color="yellow" outline>Yellow</Button>
|
|
||||||
<Button color="purple" outline>Purple</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="purple-blue" outline>Purple to blue</Button>
|
|
||||||
<Button gradient="cyan-blue" outline>Cyan to blue</Button>
|
|
||||||
<Button gradient="green-blue" outline>Green to blue</Button>
|
|
||||||
<Button gradient="purple-pink" outline>Purple to pink</Button>
|
|
||||||
<Button gradient="pink-orange" outline>Pink to orange</Button>
|
|
||||||
<Button gradient="teal-lime" outline>Teal to lime</Button>
|
|
||||||
<Button gradient="red-yellow" outline>Red to yellow</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button color="default" pill>Default</Button>
|
|
||||||
<Button color="alternative" pill>Alternative</Button>
|
|
||||||
<Button color="dark" pill>Dark</Button>
|
|
||||||
<Button color="light" pill>Light</Button>
|
|
||||||
<Button color="green" pill>Green</Button>
|
|
||||||
<Button color="red" pill>Red</Button>
|
|
||||||
<Button color="yellow" pill>Yellow</Button>
|
|
||||||
<Button color="purple" pill>Purple</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button color="default">
|
|
||||||
<template #prefix>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
|
|
||||||
</template>
|
|
||||||
Buy
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex items-center gap-2 flex-wrap">
|
|
||||||
<Button size="xs">Extra small - xs</Button>
|
|
||||||
<Button size="sm">Small - sm</Button>
|
|
||||||
<Button size="md">Medium - md</Button>
|
|
||||||
<Button size="lg">Large - lg</Button>
|
|
||||||
<Button size="xl">Extra Large - xl</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button gradient="red-yellow" square>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</Button>
|
|
||||||
<Button color="default" pill square>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</Button>
|
|
||||||
<Button color="dark" outline square>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</Button>
|
|
||||||
<Button color="yellow" pill outline square>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
|
|
||||||
<Button color="default">
|
|
||||||
Choose plan
|
|
||||||
<template #suffix>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
35
docs/components/button/examples/FwbButtonExampleColor.vue
Normal file
35
docs/components/button/examples/FwbButtonExampleColor.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button color="default">
|
||||||
|
Default
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="alternative">
|
||||||
|
Alternative
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="dark">
|
||||||
|
Dark
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="light">
|
||||||
|
Light
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="green">
|
||||||
|
Green
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="red">
|
||||||
|
Red
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="yellow">
|
||||||
|
Yellow
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="purple">
|
||||||
|
Purple
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button color="pink">
|
||||||
|
Pink
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
40
docs/components/button/examples/FwbButtonExampleDisabled.vue
Normal file
40
docs/components/button/examples/FwbButtonExampleDisabled.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
Default
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
outline
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
Default outline
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="red"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
Red gradient
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="red-yellow"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
Red to yellow gradient
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="red-yellow"
|
||||||
|
outline
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
Red to yellow outline
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button gradient="purple-blue">
|
||||||
|
Purple to blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="cyan-blue">
|
||||||
|
Cyan to blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="green-blue">
|
||||||
|
Green to blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="purple-pink">
|
||||||
|
Purple to pink
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="pink-orange">
|
||||||
|
Pink to orange
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="teal-lime">
|
||||||
|
Teal to lime
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="red-yellow">
|
||||||
|
Red to yellow
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button gradient="blue">
|
||||||
|
Blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="cyan">
|
||||||
|
Cyan
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="green">
|
||||||
|
Green
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="lime">
|
||||||
|
Lime
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="pink">
|
||||||
|
Pink
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="purple">
|
||||||
|
Purple
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="red">
|
||||||
|
Red
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button gradient="teal">
|
||||||
|
Teal
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
21
docs/components/button/examples/FwbButtonExampleLink.vue
Normal file
21
docs/components/button/examples/FwbButtonExampleLink.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
href="https://google.com"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Google.com
|
||||||
|
</fwb-button>
|
||||||
|
<!-- we're missing `vue-router` dependency for this to work-->
|
||||||
|
<!-- <fwb-button
|
||||||
|
href="/pages/getting-started"
|
||||||
|
tag="router-link"
|
||||||
|
>
|
||||||
|
Quickstart
|
||||||
|
</fwb-button> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
68
docs/components/button/examples/FwbButtonExampleLoading.vue
Normal file
68
docs/components/button/examples/FwbButtonExampleLoading.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap items-center gap-2">
|
||||||
|
<fwb-button
|
||||||
|
:disabled="loading"
|
||||||
|
:loading="loading"
|
||||||
|
gradient="purple-blue"
|
||||||
|
outline
|
||||||
|
size="xs"
|
||||||
|
@click="loading = !loading"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
:loading="loading"
|
||||||
|
gradient="red-yellow"
|
||||||
|
size="sm"
|
||||||
|
@click="loading = !loading"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
:loading="loading"
|
||||||
|
color="default"
|
||||||
|
loading-position="suffix"
|
||||||
|
outline
|
||||||
|
@click="loading = !loading"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
<template #suffix>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
:loading="loading"
|
||||||
|
gradient="green-blue"
|
||||||
|
size="lg"
|
||||||
|
@click="loading = !loading"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
:loading="loading"
|
||||||
|
gradient="pink"
|
||||||
|
size="xl"
|
||||||
|
@click="loading = !loading"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
</script>
|
||||||
44
docs/components/button/examples/FwbButtonExampleOutline.vue
Normal file
44
docs/components/button/examples/FwbButtonExampleOutline.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Default
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="dark"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="green"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Green
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="red"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Red
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="yellow"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Yellow
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="purple"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Purple
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
gradient="purple-blue"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Purple to blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="cyan-blue"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Cyan to blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="green-blue"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Green to blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="purple-pink"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Purple to pink
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="pink-orange"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Pink to orange
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="teal-lime"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Teal to lime
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="red-yellow"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
Red to yellow
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
56
docs/components/button/examples/FwbButtonExamplePill.vue
Normal file
56
docs/components/button/examples/FwbButtonExamplePill.vue
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Default
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="alternative"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Alternative
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="dark"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="light"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Light
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="green"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Green
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="red"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Red
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="yellow"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Yellow
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="purple"
|
||||||
|
pill
|
||||||
|
>
|
||||||
|
Purple
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
74
docs/components/button/examples/FwbButtonExampleShadow.vue
Normal file
74
docs/components/button/examples/FwbButtonExampleShadow.vue
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
gradient="blue"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Blue with blue
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="cyan"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Cyan with cyan
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="green"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Green with green
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="lime"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Lime with lime
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="pink"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Pink with pink
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="purple"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Purple with purple
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="red"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Red with red
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="teal"
|
||||||
|
shadow
|
||||||
|
>
|
||||||
|
Teal with teal
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="blue"
|
||||||
|
shadow="red"
|
||||||
|
>
|
||||||
|
Blue with red
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="cyan"
|
||||||
|
shadow="teal"
|
||||||
|
>
|
||||||
|
Cyan with teal
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="teal"
|
||||||
|
shadow="purple"
|
||||||
|
>
|
||||||
|
Teal with purple
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
23
docs/components/button/examples/FwbButtonExampleSize.vue
Normal file
23
docs/components/button/examples/FwbButtonExampleSize.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2 items-center">
|
||||||
|
<fwb-button size="xs">
|
||||||
|
Extra Small - xs
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button size="sm">
|
||||||
|
Small - sm
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button size="md">
|
||||||
|
Medium - md
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button size="lg">
|
||||||
|
Large - lg
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button size="xl">
|
||||||
|
Extra Large - xl
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
65
docs/components/button/examples/FwbButtonExampleSlot.vue
Normal file
65
docs/components/button/examples/FwbButtonExampleSlot.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
gradient="purple-blue"
|
||||||
|
square
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
pill
|
||||||
|
square
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
gradient="green-blue"
|
||||||
|
square
|
||||||
|
>
|
||||||
|
Close something
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
outline
|
||||||
|
pill
|
||||||
|
square
|
||||||
|
>
|
||||||
|
Open something
|
||||||
|
<template #suffix>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</template>
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-button>
|
||||||
|
<template #prefix>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
Buy
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<fwb-button>
|
||||||
|
Choose plan
|
||||||
|
<template #suffix>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
72
docs/components/button/examples/FwbButtonExampleSquare.vue
Normal file
72
docs/components/button/examples/FwbButtonExampleSquare.vue
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-wrap gap-2">
|
||||||
|
<fwb-button
|
||||||
|
gradient="red-yellow"
|
||||||
|
square
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="default"
|
||||||
|
pill
|
||||||
|
square
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="dark"
|
||||||
|
outline
|
||||||
|
square
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</fwb-button>
|
||||||
|
<fwb-button
|
||||||
|
color="yellow"
|
||||||
|
outline
|
||||||
|
pill
|
||||||
|
square
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/></svg>
|
||||||
|
</fwb-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { FwbButton } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw">
|
|
||||||
<button-group>
|
|
||||||
<Button>hello world</Button>
|
|
||||||
<Button color="purple">hello world</Button>
|
|
||||||
<Button color="alternative">hello world</Button>
|
|
||||||
<Button color="red">hello world</Button>
|
|
||||||
</button-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ButtonGroup, Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vp-raw">
|
|
||||||
<button-group>
|
|
||||||
<Button outline>Button1</Button>
|
|
||||||
<Button outline>Button2</Button>
|
|
||||||
<Button outline>Button3</Button>
|
|
||||||
<Button outline>
|
|
||||||
hello world
|
|
||||||
<template #suffix>
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</button-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ButtonGroup, Button } from '../../../../src/index'
|
|
||||||
</script>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user