feat: more examples
This commit is contained in:
Alexandr
385
README.md
385
README.md
@@ -0,0 +1,385 @@
|
|||||||
|
<div align="center">
|
||||||
|
<h1>:construction: flowbite-vue (unreleased) :construction:</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://flowbite.com">
|
||||||
|
<img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github.png">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Build websites even faster with components on top of Vue and Tailwind CSS
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://codecov.io/gh/themesberg/flowbite-vue">
|
||||||
|
<img src="https://codecov.io/gh/themesberg/flowbite-vue/branch/main/graph/badge.svg?token=wnw40SeY4k"/>
|
||||||
|
</a>
|
||||||
|
<a href="https://discord.com/invite/4eeurUVvTy">
|
||||||
|
<img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord">
|
||||||
|
</a>
|
||||||
|
<a href="https://www.npmjs.com/package/flowbite-vue">
|
||||||
|
<img src="https://img.shields.io/npm/dt/flowbite-vue.svg" alt="Total Downloads">
|
||||||
|
</a>
|
||||||
|
<a href="https://badge.fury.io/js/flowbite-vue">
|
||||||
|
<img alt="Latest release" src="https://badge.fury.io/js/flowbite-vue.svg">
|
||||||
|
</a>
|
||||||
|
<a href="https://flowbite.com/getting-started/license/">
|
||||||
|
<img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `flowbite-vue` is an open source collection of UI components, built in Vue, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
- [Documentation](#documentation)
|
||||||
|
- [Getting started](#getting-started)
|
||||||
|
- [Require via `npm`](#require-via--npm-)
|
||||||
|
- [Include via CDN](#include-via-cdn)
|
||||||
|
- [Components](#components)
|
||||||
|
- [Community](#community)
|
||||||
|
- [Contributing](#contributing)
|
||||||
|
- [Figma](#figma)
|
||||||
|
- [Copyright and license](#copyright-and-license)
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
Documentation for `flowbite-vue` is not yet finished.
|
||||||
|
|
||||||
|
If you want to browse the components, visit [flowbite.com](https://flowbite.com/).
|
||||||
|
|
||||||
|
If you want to learn more about Flowbite, visit [Flowbite docs](https://flowbite.com/getting-started/introduction/).
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
|
||||||
|
To use `flowbite-vue`, you just need to setup `flowbite` normally and install `flowbite-vue` from `npm`.
|
||||||
|
|
||||||
|
`flowbite` can be included as a plugin into an existing Tailwind CSS project.
|
||||||
|
|
||||||
|
### Require via `npm`
|
||||||
|
|
||||||
|
Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" >Node.js</a> and <a href="https://tailwindcss.com/" rel="nofollow" >Tailwind CSS</a> installed.
|
||||||
|
|
||||||
|
1. Install `flowbite` as a dependency using `npm` by running the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm i flowbite flowbite-vue
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Require `flowbite` as a plugin inside the `tailwind.config.js` file:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
...,
|
||||||
|
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}'
|
||||||
|
],
|
||||||
|
plugins: [..., require('flowbite/plugin')],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Alerts</td>
|
||||||
|
<td width="33.3333%">:construction: Badge</td>
|
||||||
|
<td width="33.3333%">:construction: Breadcrumbs</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/alerts/">
|
||||||
|
<img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/badges/">
|
||||||
|
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/breadcrumb/">
|
||||||
|
<img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Buttons</td>
|
||||||
|
<td width="33.3333%">:construction: Button group</td>
|
||||||
|
<td width="33.3333%">:construction: Cards</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/buttons/">
|
||||||
|
<img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/button-group/">
|
||||||
|
<img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/card/">
|
||||||
|
<img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Dropdown</td>
|
||||||
|
<td width="33.3333%">:construction: Forms</td>
|
||||||
|
<td width="33.3333%">:construction: List group</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/dropdown/">
|
||||||
|
<img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms/">
|
||||||
|
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/list-group/">
|
||||||
|
<img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Typography</td>
|
||||||
|
<td width="33.3333%">:construction: Modal</td>
|
||||||
|
<td width="33.3333%">:construction: Tabs</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite.com/docs/components/typography/">
|
||||||
|
<img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/modal/">
|
||||||
|
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/tabs/">
|
||||||
|
<img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Navbar</td>
|
||||||
|
<td width="33.3333%">:construction: Pagination</td>
|
||||||
|
<td width="33.3333%">:construction: Timeline</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/navbars/">
|
||||||
|
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/pagination/">
|
||||||
|
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/timeline/">
|
||||||
|
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Progress bar</td>
|
||||||
|
<td width="33.3333%">:construction: Tables</td>
|
||||||
|
<td width="33.3333%">:construction: Toast</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/progress/">
|
||||||
|
<img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/tables/">
|
||||||
|
<img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/toast/">
|
||||||
|
<img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Tooltips</td>
|
||||||
|
<td width="33.3333%">:construction: Datepicker</td>
|
||||||
|
<td width="33.3333%">:construction: Spinner</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/tooltips/">
|
||||||
|
<img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite.com/docs/plugins/datepicker/">
|
||||||
|
<img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/spinners/">
|
||||||
|
<img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Footer</td>
|
||||||
|
<td width="33.3333%">:construction: Accordion</td>
|
||||||
|
<td width="33.3333%">:construction: Sidebar</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/footer/">
|
||||||
|
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/accordion/">
|
||||||
|
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/sidebar/">
|
||||||
|
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Carousel</td>
|
||||||
|
<td width="33.3333%">:construction: Avatar</td>
|
||||||
|
<td width="33.3333%">:construction: Rating</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/carousel/">
|
||||||
|
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/avatar/">
|
||||||
|
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/rating/">
|
||||||
|
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Input Field</td>
|
||||||
|
<td width="33.3333%">:construction: File Input</td>
|
||||||
|
<td width="33.3333%">:construction: Search Input</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms">
|
||||||
|
<img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms#fileUpload">
|
||||||
|
<img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite.com/docs/forms/search-input/">
|
||||||
|
<img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Select</td>
|
||||||
|
<td width="33.3333%">:construction: Textarea</td>
|
||||||
|
<td width="33.3333%">:construction: Checkbox</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms#select">
|
||||||
|
<img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms#textarea">
|
||||||
|
<img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms#checkbox">
|
||||||
|
<img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Radio</td>
|
||||||
|
<td width="33.3333%">:construction: Toggle</td>
|
||||||
|
<td width="33.3333%">:construction: Range Slider</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms#radio">
|
||||||
|
<img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite-react.com/forms#toggle">
|
||||||
|
<img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite.com/docs/forms/range/">
|
||||||
|
<img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">:construction: Floating Label</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="33.3333%">
|
||||||
|
<a href="https://flowbite.com/docs/forms/floating-label/">
|
||||||
|
<img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
## Community
|
||||||
|
|
||||||
|
If you need help or just want to discuss about the library join the community on Github:
|
||||||
|
|
||||||
|
⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)
|
||||||
|
|
||||||
|
For casual chatting with others using the library:
|
||||||
|
|
||||||
|
💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Thank you for your interest in helping! Visit our [guide on contributing](https://github.com/themesberg/flowbite-vue/blob/main/CONTRIBUTING.md) to get started.
|
||||||
|
|
||||||
|
## Figma
|
||||||
|
|
||||||
|
If you need the Figma files for the components you can check out our website for more information:
|
||||||
|
|
||||||
|
🎨 [Get access to the Figma design files](https://flowbite.com/figma/)
|
||||||
|
|
||||||
|
## Copyright and license
|
||||||
|
|
||||||
|
The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
|
||||||
|
|
||||||
|
📝 [Read about the licensing terms](https://flowbite.com/getting-started/license/)
|
||||||
|
|||||||
17
docs/guide/button/ButtonColorExample.vue
Normal file
17
docs/guide/button/ButtonColorExample.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Button } from "../../../src/index";
|
||||||
|
</script>
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Button variant="default">
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Button } from "../../../src/index";
|
|
||||||
</script>
|
|
||||||
17
docs/guide/button/ButtonPillExample.vue
Normal file
17
docs/guide/button/ButtonPillExample.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="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>
|
||||||
14
docs/guide/button/ButtonSizeExample.vue
Normal file
14
docs/guide/button/ButtonSizeExample.vue
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div class="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,7 +1,103 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import ButtonExample from './ButtonExample.vue'
|
import ButtonColorExample from './ButtonColorExample.vue';
|
||||||
|
import ButtonSizeExample from './ButtonSizeExample.vue';
|
||||||
|
import ButtonPillExample from './ButtonPillExample.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# Button
|
# Button
|
||||||
|
|
||||||
<ButtonExample />
|
reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Color
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
|
||||||
|
defineProps({
|
||||||
|
color: {
|
||||||
|
type: String as PropType<ButtonVariant>,
|
||||||
|
default: 'default',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
<ButtonColorExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Button } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Size
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||||
|
defineProps({
|
||||||
|
size: {
|
||||||
|
type: String as PropType<ButtonSize>,
|
||||||
|
default: 'md',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
<ButtonSizeExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Button } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Button size="xs">XS</Button>
|
||||||
|
<Button size="sm">SM</Button>
|
||||||
|
<Button size="md">MD</Button>
|
||||||
|
<Button size="lg">LG</Button>
|
||||||
|
<Button size="xl">XL</Button>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Pill
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
defineProps({
|
||||||
|
pill: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
<ButtonPillExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Button } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
15
package-lock.json
generated
15
package-lock.json
generated
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "flowbite-vue",
|
"name": "flowbite-vue",
|
||||||
"version": "0.4.1",
|
"version": "1.0.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -689,6 +689,19 @@
|
|||||||
"readdirp": "~3.6.0"
|
"readdirp": "~3.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"class-names": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/class-names/-/class-names-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-AQL0OLcu6D5hTwPcY78UgQ0JMS5cR1eYFV60C6V9WNMKVgyXi+CSGYuuWUAVo/6+Z2JRk6VBTn1XO5U94SqBww==",
|
||||||
|
"requires": {
|
||||||
|
"classnames": "^2.2.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"classnames": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
|
||||||
|
},
|
||||||
"color-convert": {
|
"color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
|
|||||||
@@ -46,5 +46,8 @@
|
|||||||
"plugins": {
|
"plugins": {
|
||||||
"tailwindcss": {}
|
"tailwindcss": {}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"class-names": "^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,27 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<button type="button" :class="buttonVariantClasses[variant]">
|
<button type="button" :class="bindClasses">
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
|
import { computed } from 'vue'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
defineProps({
|
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
|
||||||
variant: {
|
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
color: {
|
||||||
type: String as PropType<ButtonVariant>,
|
type: String as PropType<ButtonVariant>,
|
||||||
default: 'default',
|
default: 'default',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String as PropType<ButtonSize>,
|
||||||
|
default: 'md',
|
||||||
|
},
|
||||||
|
pill: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonVariantClasses: Record<ButtonVariant, string[]> = {
|
const bindClasses = computed(() => {
|
||||||
default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'.split(' '),
|
return classNames(
|
||||||
alternative: 'py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'.split(' '),
|
buttonColorClasses[props.color],
|
||||||
dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'.split(' '),
|
buttonSizeClasses[props.size],
|
||||||
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'.split(' '),
|
props.pill ? 'rounded-full' : '',
|
||||||
green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'.split(' '),
|
)
|
||||||
red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'.split(' '),
|
})
|
||||||
yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:focus:ring-yellow-900'.split(' '),
|
|
||||||
purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'.split(' ')
|
const buttonColorClasses: Record<ButtonVariant, string[]> = {
|
||||||
|
default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'.split(' '),
|
||||||
|
alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'.split(' '),
|
||||||
|
dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'.split(' '),
|
||||||
|
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'.split(' '),
|
||||||
|
green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'.split(' '),
|
||||||
|
red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'.split(' '),
|
||||||
|
yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900'.split(' '),
|
||||||
|
purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'.split(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttonSizeClasses: Record<ButtonVariant, string[]> = {
|
||||||
|
xs: 'text-xs px-2 py-1',
|
||||||
|
sm: 'text-sm px-3 py-1.5',
|
||||||
|
md: 'text-sm px-4 py-2',
|
||||||
|
lg: 'text-base px-5 py-2.5',
|
||||||
|
xl: 'text-base px-6 py-3'
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: [
|
||||||
'./docs/.vitepress/**/*.{js,ts,vue}',
|
'./docs/.vitepress/**/*.{js,ts,vue}',
|
||||||
'./docs/**/*.md',
|
'./docs/**/*.{js,ts,vue,md}',
|
||||||
'./src/**/*.{js,ts,vue}',
|
'./src/**/*.{js,ts,vue}',
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user