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

docs: Updated typography docs

Browse Source
This commit is contained in:
Ilya Artamonov
2023-09-19 13:20:42 +03:00
parent 7fd3b4f3a6
commit dff5174312
14 changed files with 71 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/components/heading.md
View File

@@ -17,6 +17,8 @@ import HCustom from './typography/heading/HCustom.vue'
Use the `tag="h1"` as the most important text element to indicate the title of your web page. Use the `tag="h1"` as the most important text element to indicate the title of your web page.
<H1 />
```vue ```vue
<template> <template>
<Heading tag="h1">This is my heading</Heading> <Heading tag="h1">This is my heading</Heading>
@@ -27,12 +29,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<H1 />
## Heading one (H2) ## Heading one (H2)
The H2 tag can be used as subtitles of the page’s sections. The H2 tag can be used as subtitles of the page’s sections.
<H2 />
```vue ```vue
<template> <template>
<Heading tag="h2">This is my heading</Heading> <Heading tag="h2">This is my heading</Heading>
@@ -43,12 +46,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<H2 />
## Heading one (H3) ## Heading one (H3)
Use the H3 tags inside sections that already have a H2 available. Use the H3 tags inside sections that already have a H2 available.
<H3 />
```vue ```vue
<template> <template>
<Heading tag="h3">This is my heading</Heading> <Heading tag="h3">This is my heading</Heading>
@@ -59,12 +63,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<H3 />
## Heading one (H4) ## 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. The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
<H4 />
```vue ```vue
<template> <template>
<Heading tag="h4">This is my heading</Heading> <Heading tag="h4">This is my heading</Heading>
@@ -75,12 +80,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<H4 />
## Heading one (H5) ## Heading one (H5)
The H5 tag is most often used in longer articles with other heading already available or in sidebars. The H5 tag is most often used in longer articles with other heading already available or in sidebars.
<H5 />
```vue ```vue
<template> <template>
<Heading tag="h5">This is my heading</Heading> <Heading tag="h5">This is my heading</Heading>
@@ -91,12 +97,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<H5 />
## Heading one (H6) ## 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. 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.
<H6 />
```vue ```vue
<template> <template>
<Heading tag="h6">This is my heading</Heading> <Heading tag="h6">This is my heading</Heading>
@@ -107,12 +114,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<H6 />
## Color ## Color
Use the `color` prop to set the text color. Use the `color` prop to set the text color.
<HColor />
```vue ```vue
<template> <template>
<Heading color="text-green-400" tag="h1">This is my heading</Heading> <Heading color="text-green-400" tag="h1">This is my heading</Heading>
@@ -123,12 +131,13 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<HColor />
## Custom classes ## Custom classes
Use the `class` attribute to apply the tailwind classes. Use the `class` attribute to apply the tailwind classes.
<HCustom />
```vue ```vue
<template> <template>
<Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading> <Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading>
@@ -139,4 +148,4 @@ import Heading from 'flowbite-vue'
</script> </script>
``` ```
<HCustom />

8
docs/components/paragraph.md
View File

@@ -15,6 +15,10 @@ Use this example of a paragraph element to use inside article content or a landi
```vue ```vue
<template> <template>
<P class="mb-2">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
have richer contextual information to rapidly respond to requests, incidents, and changes.
</P>
<P> <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 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. audit trail for every change.
@@ -34,6 +38,10 @@ Use `weight` prop to set the text-weight.
```vue ```vue
<template> <template>
<P class="mb-2" weight="light">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
have richer contextual information to rapidly respond to requests, incidents, and changes.
</P>
<P weight="light"> <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 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. audit trail for every change.

2
docs/components/typography/heading/H1.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading tag="h1">This is my heading</Heading> <Heading tag="h1">Heading 1</Heading>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/heading/H2.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading tag="h2">This is my heading</Heading> <Heading tag="h2">Heading 2</Heading>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/heading/H3.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading tag="h3">This is my heading</Heading> <Heading tag="h3">Heading 3</Heading>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/heading/H4.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading tag="h4">This is my heading</Heading> <Heading tag="h4">Heading 4</Heading>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/heading/H5.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading tag="h5">This is my heading</Heading> <Heading tag="h5">Heading 5</Heading>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/heading/H6.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading tag="h6">This is my heading</Heading> <Heading tag="h6">Heading 6</Heading>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/heading/HColor.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Heading color="text-green-400" tag="h1">This is my heading</Heading> <Heading color="text-green-400" tag="h1">Green heading</Heading>
</template> </template>
<script setup> <script setup>

6
docs/components/typography/p/P.vue
View File

@@ -1,8 +1,14 @@
<template> <template>
<div class="vp-raw">
<P class="mb-2">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
have richer contextual information to rapidly respond to requests, incidents, and changes.
</P>
<P> <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 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. audit trail for every change.
</P> </P>
</div>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/p/PAlign.vue
View File

@@ -1,8 +1,10 @@
<template> <template>
<div class="vp-raw">
<P align="center"> <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 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. audit trail for every change.
</P> </P>
</div>
</template> </template>
<script setup> <script setup>

2
docs/components/typography/p/PCustom.vue
View File

@@ -1,8 +1,10 @@
<template> <template>
<div class="vp-raw">
<P class="!text-green-400 italic"> <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 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. audit trail for every change.
</P> </P>
</div>
</template> </template>
<script setup> <script setup>

6
docs/components/typography/p/PWeight.vue
View File

@@ -1,8 +1,14 @@
<template> <template>
<div class="vp-raw">
<P class="mb-2" weight="light">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
have richer contextual information to rapidly respond to requests, incidents, and changes.
</P>
<P weight="light"> <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 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. audit trail for every change.
</P> </P>
</div>
</template> </template>
<script setup> <script setup>

7
src/components/Typography/Img.vue
View File

@@ -1,12 +1,9 @@
<template> <template>
<div> <figure v-if="caption" :class="size">
<figure v-if="caption" :class="figClass">
<img :src="src" :alt="alt" :class="[size, alignment, imgClass]" /> <img :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
<figcaption :class="captionClass">{{ caption }}</figcaption> <figcaption :class="captionClass">{{ caption }}</figcaption>
</figure> </figure>
<img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" /> <img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -18,7 +15,6 @@ interface ImageProps {
imgClass?: string imgClass?: string
alignment?: string alignment?: string
captionClass?: string captionClass?: string
figClass?: string
} }
withDefaults(defineProps<ImageProps>(), { withDefaults(defineProps<ImageProps>(), {
@@ -29,6 +25,5 @@ withDefaults(defineProps<ImageProps>(), {
imgClass: 'h-auto', imgClass: 'h-auto',
alignment: '', alignment: '',
captionClass: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400', captionClass: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400',
figClass: 'max-w-lg',
}) })
</script> </script>