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

Components renaming (#225)

Browse Source 
* 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
2023-10-23 18:23:14 +03:00
committed by GitHub
parent ea6fcf1a4c
commit d316cf3a12
600 changed files with 16349 additions and 10239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
docs/components/image.md
View File

@@ -1,10 +1,10 @@
<script setup>
import Img from './typography/image/Img.vue'
import ImgCap from './typography/image/ImgCap.vue'
import ImgSize from './typography/image/ImgSize.vue'
import ImgAlign from './typography/image/ImgAlign.vue'
import ImgBlur from './typography/image/ImgBlur.vue'
import ImgCustom from './typography/image/ImgCustom.vue'
import FwbImgExample from './typography/image/FwbImgExample.vue'
import FwbImgExampleCaption from './typography/image/FwbImgExampleCaption.vue'
import FwbImgExampleSize from './typography/image/FwbImgExampleSize.vue'
import FwbImgExampleAlign from './typography/image/FwbImgExampleAlign.vue'
import FwbImgExampleGrayscale from './typography/image/FwbImgExampleGrayscale.vue'
import FwbImgExampleCustom from './typography/image/FwbImgExampleCustom.vue'
</script>
# Vue Images - Flowbite
@@ -17,15 +17,17 @@ Use this example to show the a responsive image that won’t grow beyond the max
```vue
<template>
<Img src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
<fwb-img
alt="flowbite-vue"
src="/images/examples/image.png"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
import { FwbImg } from 'flowbite-vue'
</script>
```
<Img />
<fwb-img-example />
## Image caption
@@ -33,15 +35,19 @@ This example can be used to add a caption for the image often used inside articl
```vue
<template>
<Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
<fwb-img
alt="flowbite-vue"
caption="flowbite-vue"
src="/images/examples/image.png"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
import { FwbImg } from 'flowbite-vue'
</script>
```
<fwb-img-example-caption />
<ImgCap />
## Sizes
@@ -49,15 +55,18 @@ Set the size of the image using the `w-size` and `h-size` or `max-w-size` utilit
```vue
<template>
<Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
<fwb-img
alt="flowbite-vue"
size="max-w-md"
src="/images/examples/image.png"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
import { FwbImg } from 'flowbite-vue'
</script>
```
<ImgSize />
<fwb-img-example-size />
## Alignment
@@ -65,15 +74,19 @@ Align the image component to the center or right side of the document page using
```vue
<template>
<Img align="ml-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
<fwb-img
alignment="mx-auto"
alt="flowbite-vue"
size="max-w-md"
src="/images/examples/image.png"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
import { FwbImg } from 'flowbite-vue'
</script>
```
<ImgAlign />
<fwb-img-example-align />
## Grayscale
@@ -81,20 +94,19 @@ Use the filter option and apply a grayscale to the image element using the grays
```vue
<template>
<Img
size="max-w-lg"
alt="My gallery"
<fwb-img
alt="flowbite-vue"
img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
size="max-w-lg"
src="/images/examples/image.png"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
import { FwbImg } from 'flowbite-vue'
</script>
```
<ImgBlur />
<fwb-img-example-grayscale />
## Custom classes
@@ -102,12 +114,16 @@ Use the `img-class` prop to apply tailwind classes.
```vue
<template>
<Img img-class="rounded-lg border-[1px]" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
<fwb-img
alt="flowbite-vue"
img-class="rounded-lg border-[1px]"
size="max-w-lg"
src="/images/examples/image.png"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
import { FwbImg } from 'flowbite-vue'
</script>
```
<ImgCustom />
<fwb-img-example-custom />