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

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>