Skip to content

Commit f2b23e8

Browse files
D-LiteD-Lite
authored
heading-component (#43)
* feat: heading component documentation * refactor: change name casing heading * refactor: change name casing heading
1 parent b30643e commit f2b23e8

File tree

6 files changed

+156
-0
lines changed

6 files changed

+156
-0
lines changed

‎components/content/examples/heading/BasicHeading.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<CHeading>I'm a Heading</CHeading>
3+
</template>

‎components/content/examples/heading/CompositionHeading.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<CBox max-w="32rem">
3+
<CHeading mb="4">Modern online and offline payments for Africa</CHeading>
4+
<CText font-size="xl">
5+
Paystack helps businesses in Africa get paid by anyone, anywhere in the
6+
world
7+
</CText>
8+
<CButton size="lg" variant-color="green" mt="24px">
9+
Create a free account
10+
</CButton>
11+
</CBox>
12+
</template>

‎components/content/examples/heading/OverrideHeading.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<CHeading size="lg" fontSize="50px">
3+
I'm overriding this heading
4+
</CHeading>
5+
</template>

‎components/content/examples/heading/SizesHeading.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<CStack spacing="3">
3+
<CHeading as="h1" size="2xl">
4+
In love with Vue & Nuxt
5+
</CHeading>
6+
<CHeading as="h2" size="xl">
7+
In love with Vue & Nuxt
8+
</CHeading>
9+
<CHeading as="h3" size="lg">
10+
In love with Vue & Nuxt
11+
</CHeading>
12+
<CHeading as="h4" size="md">
13+
In love with Vue & Nuxt
14+
</CHeading>
15+
<CHeading as="h5" size="sm">
16+
In love with Vue & Nuxt
17+
</CHeading>
18+
<CHeading as="h6" size="xs">
19+
In love with Vue & Nuxt
20+
</CHeading>
21+
</CStack>
22+
</template>

‎components/content/examples/heading/TruncatedHeading.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<CHeading is-truncated>
3+
Basic text writing, including headings, body text, lists, and more.
4+
</CHeading>
5+
</template>

‎content/4.components/heading.md

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Heading
3+
description: Heading component
4+
version: 2.0+
5+
---
6+
7+
# Heading
8+
9+
Headings are used for rendering semantic HTML heading elements.
10+
11+
Heading composes `CBox` so you can use all the style props and add responsive styles as well. It renders an `<h2>` tag by default.
12+
13+
## Imports
14+
15+
```js
16+
import { CHeading } from '@chakra-ui/vue-next';
17+
```
18+
19+
## Usage
20+
21+
::showcase
22+
:basic-heading
23+
::
24+
25+
26+
```html
27+
<CHeading>I'm a Heading</CHeading>
28+
```
29+
30+
### Changing font size
31+
32+
To increase the size of the heading, you can use the `font-size` or `size` prop. If you use the `size` prop, the font size of the heading will automatically decrease in size for smaller screens.
33+
34+
::showcase
35+
:sizes-heading
36+
::
37+
38+
```html
39+
<CStack spacing="3">
40+
<CHeading as="h1" size="2xl">
41+
In love with Vue & Nuxt
42+
</CHeading>
43+
<CHeading as="h2" size="xl">
44+
In love with Vue & Nuxt
45+
</CHeading>
46+
<CHeading as="h3" size="lg">
47+
In love with Vue & Nuxt
48+
</CHeading>
49+
<CHeading as="h4" size="md">
50+
In love with Vue & Nuxt
51+
</CHeading>
52+
<CHeading as="h5" size="sm">
53+
In love with Vue & Nuxt
54+
</CHeading>
55+
<CHeading as="h6" size="xs">
56+
In love with Vue & Nuxt
57+
</CHeading>
58+
</CStack>
59+
```
60+
61+
### Truncate heading
62+
63+
Pass the `is-truncated` prop to render an ellipsis when the headings exceed
64+
65+
::showcase
66+
:truncated-heading
67+
::
68+
69+
```html
70+
<CHeading is-truncated>
71+
Basic text writing, including headings, body text, lists, and more.
72+
</CHeading>
73+
```
74+
75+
### Override style
76+
77+
You can override the size of the Heading component by passing the `font-size` prop.
78+
79+
::showcase
80+
:override-heading
81+
::
82+
83+
## Composition
84+
85+
::showcase
86+
:composition-heading
87+
::
88+
89+
```html
90+
<CBox max-w="32rem">
91+
<CHeading mb="4">Modern online and offline payments for Africa</CHeading>
92+
<CText font-size="xl">
93+
Paystack helps businesses in Africa get paid by anyone, anywhere in the
94+
world
95+
</CText>
96+
<CButton size="lg" variant-color="green" mt="24px">
97+
Create a free account
98+
</CButton>
99+
</CBox>
100+
```
101+
102+
## Props
103+
104+
> The `CHeading` composes the `CBox` component. So it accepts all Box props along with the related CSS grid props. See Box component for list of props.
105+
106+
| Name | Values | Default | Description |
107+
|--------|-------------------------------------|---------|--------------------------|
108+
| `size` | `2xl`, `xl`, `lg`, `md`, `sm`, `xs` | `xl` | The size of the heading. |
109+
| `as` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `h2` | The final tag rendered. |

0 commit comments

Comments
 (0)