docs: update ready components pages
This commit is contained in:
Alexandr
218
docs/components/alert/alert.md
Normal file
218
docs/components/alert/alert.md
Normal file
@@ -0,0 +1,218 @@
|
||||
<script setup>
|
||||
import AlertTypeExample from './examples/AlertTypeExample.vue';
|
||||
import AlertTitleExample from './examples/AlertTitleExample.vue';
|
||||
import AlertClosableExample from './examples/AlertClosableExample.vue';
|
||||
import AlertBorderExample from './examples/AlertBorderExample.vue';
|
||||
import AlertIconExample from './examples/AlertIconExample.vue';
|
||||
import AlertInlineExample from './examples/AlertInlineExample.vue';
|
||||
</script>
|
||||
|
||||
# Alert
|
||||
|
||||
#### Show contextual information to your users using alert elements based on Tailwind CSS
|
||||
|
||||
---
|
||||
|
||||
:::tip
|
||||
Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
|
||||
:::
|
||||
|
||||
The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
|
||||
|
||||
Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
|
||||
|
||||
## Prop - type
|
||||
|
||||
```typescript
|
||||
export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
|
||||
defineProps({
|
||||
type: {
|
||||
type: String as PropType<AlertType>,
|
||||
default: 'info',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<AlertTypeExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Alert } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<Alert type="info" class="mb-2">Info</Alert>
|
||||
<Alert type="warning" class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" class="mb-2">Dark</Alert>
|
||||
<Alert type="success">Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - title
|
||||
|
||||
```typescript
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<AlertTitleExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Alert } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
|
||||
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
|
||||
<Alert type="success" title="Some success title">Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - closable
|
||||
|
||||
```typescript
|
||||
defineProps({
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<AlertClosableExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Alert } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<Alert type="info" closable class="mb-2">Info</Alert>
|
||||
<Alert type="warning" closable class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" closable class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" closable class="mb-2">Dark</Alert>
|
||||
<Alert type="success" closable>Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - border
|
||||
|
||||
```typescript
|
||||
defineProps({
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<AlertBorderExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Alert } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<Alert type="info" border class="mb-2">Info</Alert>
|
||||
<Alert type="warning" border class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" border class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" border class="mb-2">Dark</Alert>
|
||||
<Alert type="success" border>Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - icon
|
||||
|
||||
```typescript
|
||||
defineProps({
|
||||
icon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<AlertIconExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Alert } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
|
||||
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
|
||||
<Alert type="success" :icon="false">Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Prop - inline
|
||||
|
||||
```typescript
|
||||
defineProps({
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
<AlertInlineExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Alert } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<Alert type="info" title="Info title" :inline="false" class="mb-2">
|
||||
Lorem...
|
||||
</Alert>
|
||||
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
|
||||
Lorem...
|
||||
</Alert>
|
||||
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
|
||||
Lorem...
|
||||
</Alert>
|
||||
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
|
||||
Lorem...
|
||||
</Alert>
|
||||
<Alert type="success" title="Success title" :inline="false">
|
||||
Lorem...
|
||||
<template #actions>
|
||||
<Button size="sm" color="green" class="mr-2">
|
||||
Buttons everywhere
|
||||
</Button>
|
||||
<Button size="sm" outline color="green">
|
||||
<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>
|
||||
And here
|
||||
</Button>
|
||||
</template>
|
||||
</Alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
12
docs/components/alert/examples/AlertBorderExample.vue
Normal file
12
docs/components/alert/examples/AlertBorderExample.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="vp-raw flex flex-col">
|
||||
<Alert type="info" border class="mb-2">Info</Alert>
|
||||
<Alert type="warning" border class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" border class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" border class="mb-2">Dark</Alert>
|
||||
<Alert type="success" border>Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Alert } from '../../../../src/index'
|
||||
</script>
|
||||
12
docs/components/alert/examples/AlertClosableExample.vue
Normal file
12
docs/components/alert/examples/AlertClosableExample.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="vp-raw flex flex-col">
|
||||
<Alert type="info" closable class="mb-2">Info</Alert>
|
||||
<Alert type="warning" closable class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" closable class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" closable class="mb-2">Dark</Alert>
|
||||
<Alert type="success" closable>Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Alert } from '../../../../src/index'
|
||||
</script>
|
||||
12
docs/components/alert/examples/AlertIconExample.vue
Normal file
12
docs/components/alert/examples/AlertIconExample.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="vp-raw flex flex-col">
|
||||
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
|
||||
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
|
||||
<Alert type="success" :icon="false">Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Alert } from '../../../../src/index'
|
||||
</script>
|
||||
33
docs/components/alert/examples/AlertInlineExample.vue
Normal file
33
docs/components/alert/examples/AlertInlineExample.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="vp-raw flex flex-col">
|
||||
<Alert type="info" title="Info title" :inline="false" class="mb-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
|
||||
</Alert>
|
||||
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cupiditate dicta dolore dolores hic sequi tenetur, vero! Blanditiis consequatur culpa nisi ratione repellat! Delectus dolore magni nemo placeat qui sequi.
|
||||
</Alert>
|
||||
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium atque cupiditate, dignissimos dolorum, error inventore iste libero minus nihil possimus quasi quia quibusdam quisquam recusandae repellat reprehenderit temporibus.
|
||||
</Alert>
|
||||
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam dolore et, fuga impedit, iusto nam numquam officiis quas, repellat sapiente sit unde vel? Adipisci delectus dolore eius optio sunt.
|
||||
</Alert>
|
||||
<Alert type="success" title="Success title" :inline="false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at culpa cupiditate deleniti eos ipsam ipsum, nostrum perspiciatis provident tempore? Aspernatur expedita praesentium voluptatibus. Accusamus explicabo iusto nobis reiciendis temporibus!
|
||||
<template #actions>
|
||||
<Button size="sm" color="green" class="mr-2">
|
||||
Buttons everywhere
|
||||
</Button>
|
||||
<Button size="sm" outline color="green">
|
||||
<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>
|
||||
And here
|
||||
</Button>
|
||||
</template>
|
||||
</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Alert, Button } from '../../../../src/index'
|
||||
</script>
|
||||
12
docs/components/alert/examples/AlertTitleExample.vue
Normal file
12
docs/components/alert/examples/AlertTitleExample.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="vp-raw flex flex-col">
|
||||
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
|
||||
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
|
||||
<Alert type="success" title="Some success title">Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Alert } from '../../../../src/index'
|
||||
</script>
|
||||
12
docs/components/alert/examples/AlertTypeExample.vue
Normal file
12
docs/components/alert/examples/AlertTypeExample.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="vp-raw flex flex-col">
|
||||
<Alert type="info" class="mb-2">Info</Alert>
|
||||
<Alert type="warning" class="mb-2">Warning</Alert>
|
||||
<Alert type="danger" class="mb-2">Danger</Alert>
|
||||
<Alert type="dark" class="mb-2">Dark</Alert>
|
||||
<Alert type="success">Success</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Alert } from '../../../../src/index'
|
||||
</script>
|
||||
Reference in New Issue
Block a user