Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit cbbcf6a

Browse files
codebender828codebender828
committed
docs(v-chakra): add documentation for v-chakra directive
1 parent bccf352 commit cbbcf6a

File tree

6 files changed

+117
-7
lines changed

6 files changed

+117
-7
lines changed

‎packages/chakra-ui-docs/components/BottomLink.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div v-show="visible === true">
3-
<CFlex justify="space-between">
3+
<CFlex justify="space-between" pb="20">
44
<div>
55
<CLink v-if="prevName" as="router-link" class="link" :to="prevPath">
66
<c-button left-icon="chevron-left" border-color="green.500" variant-color="green" variant="outline">

‎packages/chakra-ui-docs/components/Hero.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,16 @@
4949
Github
5050
</CButton>
5151
</CFlex>
52+
<CLink
53+
color="gray.600"
54+
mt="4"
55+
font-size="sm"
56+
:_hover="{ color : 'vue.400' }"
57+
is-external
58+
href="https://chakra-ui.com/"
59+
>
60+
Looking for React.js verison?
61+
</CLink>
5262
</CFlex>
5363
</CFlex>
5464
</CBox>

‎packages/chakra-ui-docs/components/Navbar.vue

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,6 @@
1818
list-style-type="none"
1919
ml="auto"
2020
>
21-
<CBox as="li" mr="4">
22-
<CLink color="gray.600" :_hover="{ color : 'vue.400' }" is-external href="https://chakra-ui.com/">
23-
Chakra UI React
24-
</CLink>
25-
</CBox>
2621
<CBox as="li" mr="4">
2722
<CLink color="gray.500" :_hover="{ color : 'vue.400' }" is-external href="https://github.com/chakra-ui/chakra-ui-vue">
2823
<CIcon name="github" size="20px" />

‎packages/chakra-ui-docs/nuxt.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import dotenv from 'dotenv-defaults'
2+
import { createServerDirective } from '@chakra-ui/vue/src/directives'
3+
import { defaultTheme } from '@chakra-ui/vue'
24

35
// Configuring dotenv variables.
46
dotenv.config({
@@ -63,6 +65,13 @@ export default {
6365
extensions: [
6466
'mdx'
6567
],
68+
render: {
69+
bundleRenderer: {
70+
directives: {
71+
chakra: createServerDirective(defaultTheme)
72+
}
73+
}
74+
},
6675
build: {
6776
transpile: [
6877
'vue-lorem-ipsum',

‎packages/chakra-ui-docs/pages/v-chakra.mdx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import SEO from '../components/SEO'
2+
3+
<SEO
4+
title="v-chakra directive"
5+
description="The v-chakra directive enables using Chakra UI Vue's styling strategy for native HTML elements"
6+
/>
7+
8+
# The `v-chakra` directive
9+
10+
Chakra UI Vue also provides a handy directive that allows you to style non-Chakra UI Vue components with values in your theme.
11+
This makes it very convenient for styling basic HTML elements without having to consume a Chakra component.
12+
13+
14+
## Basic usage
15+
The basic way to use this is the add the `v-chakra` directive to any HTML element and then add Chakra style props like you would
16+
to any other Chakra UI Vue component.
17+
18+
```vue live=true
19+
<div
20+
v-chakra
21+
p="3"
22+
bg="red.100"
23+
rounded="md"
24+
color="red.500"
25+
font-weight="bold"
26+
>
27+
Welcome to Chakra directive
28+
</div>
29+
```
30+
31+
## Styles Object
32+
The `v-chakra` directive can also accept an object of styles, including pseudo styles.
33+
34+
```vue live=true
35+
<div
36+
v-chakra="{
37+
p: 3,
38+
shadow: 'sm',
39+
header: {
40+
bg: 'blue.100',
41+
fontSize: 'lg',
42+
fontWeight: 'bold'
43+
},
44+
'& > p': {
45+
fontStyle: 'italic'
46+
}
47+
}"
48+
>
49+
<header>Title</header>
50+
<p>Text</p>
51+
</div>
52+
```
53+
54+
## Callback function
55+
The `v-chakra` directive can also accept an function that provides your theme as an argument.
56+
This function should return an object of styles.
57+
58+
```vue live=true
59+
<div
60+
v-chakra="theme => ({
61+
shadow: 'sm',
62+
bg: theme.colors.blue[800],
63+
color: theme.colors.yellow[300],
64+
p: {
65+
fontWeight: 'bold',
66+
p: 3
67+
}
68+
})"
69+
>
70+
<p>Computed styles</p>
71+
</div>
72+
```
73+
74+
## Button Example
75+
Here's an example of a simple button styled with the `v-chakra` directive.
76+
77+
```vue live=true
78+
<button
79+
v-chakra="{
80+
':hover': { bg: 'blue.500' },
81+
':active': { bg: 'blue.600' },
82+
':focus': { shadow: 'outline' }
83+
}"
84+
transition="all .2s ease-in"
85+
font-weight="bold"
86+
px="4"
87+
py="3"
88+
color="white"
89+
rounded="md"
90+
bg="blue.400"
91+
outline="none"
92+
>
93+
Button
94+
</button>
95+
```

‎packages/chakra-ui-docs/utils/all-routes.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ export const components = [
5353
'Text',
5454
'Textarea',
5555
'Toast',
56-
'Tooltip'
56+
'Tooltip',
57+
'v-chakra'
5758
]
5859

5960
export const topNavLinks = [

0 commit comments

Comments
 (0)