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

feat(new component): Initial typography (#199)

Browse Source 
* feat: typography

* feat: typography

* feat: typography

* Update docs/components/heading.md

* Update src/components/Typography/A.vue

* Update src/components/Typography/Heading.vue

* Update src/components/Typography/Img.vue

* Update src/components/Typography/P.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>
This commit is contained in:
Vasu Singh
2023-09-19 15:13:47 +05:30
committed by GitHub
parent e3fc36606e
commit 7fd3b4f3a6
31 changed files with 735 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
docs/components/heading.md Normal file
View File

@@ -0,0 +1,142 @@
<script setup>
import H1 from './typography/heading/H1.vue'
import H2 from './typography/heading/H2.vue'
import H3 from './typography/heading/H3.vue'
import H4 from './typography/heading/H4.vue'
import H5 from './typography/heading/H5.vue'
import H6 from './typography/heading/H6.vue'
import HColor from './typography/heading/HColor.vue'
import HCustom from './typography/heading/HCustom.vue'
</script>
# Vue Heading - Flowbite
#### The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
## Heading one (H1)
Use the `tag="h1"` as the most important text element to indicate the title of your web page.
```vue
<template>
<Heading tag="h1">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<H1 />
## Heading one (H2)
The H2 tag can be used as subtitles of the page’s sections.
```vue
<template>
<Heading tag="h2">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<H2 />
## Heading one (H3)
Use the H3 tags inside sections that already have a H2 available.
```vue
<template>
<Heading tag="h3">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<H3 />
## Heading one (H4)
The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
```vue
<template>
<Heading tag="h4">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<H4 />
## Heading one (H5)
The H5 tag is most often used in longer articles with other heading already available or in sidebars.
```vue
<template>
<Heading tag="h5">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<H5 />
## Heading one (H6)
Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
```vue
<template>
<Heading tag="h6">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<H6 />
## Color
Use the `color` prop to set the text color.
```vue
<template>
<Heading color="text-green-400" tag="h1">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<HColor />
## Custom classes
Use the `class` attribute to apply the tailwind classes.
```vue
<template>
<Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading>
</template>
<script setup>
import Heading from 'flowbite-vue'
</script>
```
<HCustom />

113
docs/components/image.md Normal file
View File

@@ -0,0 +1,113 @@
<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'
</script>
# Vue Images - Flowbite
#### The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations
## Default image
Use this example to show the a responsive image that won’t grow beyond the maximum original width.
```vue
<template>
<Img src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
</template>
<script setup>
import Img from 'flowbite-vue'
</script>
```
<Img />
## Image caption
This example can be used to add a caption for the image often used inside articles. Use `caption-class` to override the cation.
```vue
<template>
<Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
</template>
<script setup>
import Img from 'flowbite-vue'
</script>
```
<ImgCap />
## Sizes
Set the size of the image using the `w-size` and `h-size` or `max-w-size` utility classes from Tailwind CSS to set the width and height of the element.
```vue
<template>
<Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
</template>
<script setup>
import Img from 'flowbite-vue'
</script>
```
<ImgSize />
## Alignment
Align the image component to the center or right side of the document page using `mx-auto` and `ml-auto` margin styles.
```vue
<template>
<Img align="ml-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
</template>
<script setup>
import Img from 'flowbite-vue'
</script>
```
<ImgAlign />
## Grayscale
Use the filter option and apply a grayscale to the image element using the grayscale class.
```vue
<template>
<Img
size="max-w-lg"
alt="My gallery"
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"
/>
</template>
<script setup>
import Img from 'flowbite-vue'
</script>
```
<ImgBlur />
## Custom classes
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" />
</template>
<script setup>
import Img from 'flowbite-vue'
</script>
```
<ImgCustom />

60
docs/components/link.md Normal file
View File

@@ -0,0 +1,60 @@
<script setup>
import A from './typography/link/A.vue'
import APara from './typography/link/APara.vue'
import ACustom from './typography/link/ACustom.vue'
</script>
# Vue Links - Flowbite
#### The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card
## Default link
Use this example to set default styles to an inline link element.
```vue
<template>
<A href="/"> Flowbite-vue </A>
</template>
<script setup>
import A from 'flowbite-vue'
</script>
```
<A />
## Para link
Use this example to set a link inside a paragraph with an underline style.
```vue
<template>
<P>
The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
extra updates outside of the roadmap as well.
</P>
</template>
<script setup>
import { P, A } from 'flowbite-vue'
</script>
```
<APara />
## Custom classes
Use `class` attribute prop to apply the tailwind classes.
```vue
<template>
<A class="underline italic" href="/"> Flowbite-vue </A>
</template>
<script setup>
import A from 'flowbite-vue'
</script>
```
<ACustom />

86
docs/components/paragraph.md Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
import P from './typography/p/P.vue'
import PWeight from './typography/p/PWeight.vue'
import PAlign from './typography/p/PAlign.vue'
import PCustom from './typography/p/PCustom.vue'
</script>
# Vue Paragraph - Flowbite
#### Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles
## Default paragraph
Use this example of a paragraph element to use inside article content or a landing page.
```vue
<template>
<P>
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from 'flowbite-vue'
</script>
```
<P />
## Weight
Use `weight` prop to set the text-weight.
```vue
<template>
<P weight="light">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from 'flowbite-vue'
</script>
```
<PWeight />
## Alignment
Use `align` prop to set the text alignment.
```vue
<template>
<P align="center">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from 'flowbite-vue'
</script>
```
<PAlign />
## Custom classes
Use `class` attribute to apply the tailwind classes.
```vue
<template>
<P class="!text-green-400 italic">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from 'flowbite-vue'
</script>
```
<PCustom />

7
docs/components/typography/heading/H1.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading tag="h1">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/H2.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading tag="h2">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/H3.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading tag="h3">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/H4.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading tag="h4">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/H5.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading tag="h5">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/H6.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading tag="h6">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/HColor.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading color="text-green-400" tag="h1">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/heading/HCustom.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Heading class="underline italic !text-xl" tag="h1">This is my heading</Heading>
</template>
<script setup>
import Heading from '../../../../src/components/Typography/Heading.vue'
</script>

7
docs/components/typography/image/Img.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Img src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
</template>
<script setup>
import Img from '../../../../src/components/Typography/Img.vue'
</script>

7
docs/components/typography/image/ImgAlign.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Img alignment="mx-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
</template>
<script setup>
import Img from '../../../../src/components/Typography/Img.vue'
</script>

13
docs/components/typography/image/ImgBlur.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<Img
size="max-w-lg"
alt="My gallery"
alignment="mx-auto"
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"
/>
</template>
<script setup>
import Img from '../../../../src/components/Typography/Img.vue'
</script>

7
docs/components/typography/image/ImgCap.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
</template>
<script setup>
import Img from '../../../../src/components/Typography/Img.vue'
</script>

7
docs/components/typography/image/ImgCustom.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Img img-class="rounded-lg border-[1px]" alignment="mx-auto" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
</template>
<script setup>
import Img from '../../../../src/components/Typography/Img.vue'
</script>

7
docs/components/typography/image/ImgSize.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
</template>
<script setup>
import Img from '../../../../src/components/Typography/Img.vue'
</script>

7
docs/components/typography/link/A.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<A href="/">Flowbite-vue </A>
</template>
<script setup>
import A from '../../../../src/components/Typography/A.vue'
</script>

7
docs/components/typography/link/ACustom.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<A class="underline italic" href="/">Flowbite-vue </A>
</template>
<script setup>
import A from '../../../../src/components/Typography/A.vue'
</script>

11
docs/components/typography/link/APara.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<P>
The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
extra updates outside of the roadmap as well.
</P>
</template>
<script setup>
import A from '../../../../src/components/Typography/A.vue'
import P from '../../../../src/components/Typography/P.vue'
</script>

10
docs/components/typography/p/P.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<P>
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from '../../../../src/components/Typography/P.vue'
</script>

10
docs/components/typography/p/PAlign.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<P align="center">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from '../../../../src/components/Typography/P.vue'
</script>

10
docs/components/typography/p/PCustom.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<P class="!text-green-400 italic">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from '../../../../src/components/Typography/P.vue'
</script>

10
docs/components/typography/p/PWeight.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<P weight="light">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
audit trail for every change.
</P>
</template>
<script setup>
import P from '../../../../src/components/Typography/P.vue'
</script>