jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: alert component

Browse Source
This commit is contained in:
Alexandr
2022-07-04 15:43:55 +03:00
parent 9e76cdf938
commit 0794b2afe7
13 changed files with 489 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
docs/guide/alert/alert.md Normal file
View File

@@ -0,0 +1,208 @@
<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
reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
## 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/guide/alert/examples/AlertBorderExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<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>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertClosableExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<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>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertIconExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<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>
<script setup>
import { Alert } from '../../../../src/index'
</script>

33
docs/guide/alert/examples/AlertInlineExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="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/guide/alert/examples/AlertTitleExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<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>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertTypeExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<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>
<script setup>
import { Alert } from '../../../../src/index'
</script>