Skip to content

Commit 7a0c459

Browse files
Ojochogwu866Ojochogwu866
authored
docs(button):add-button-documentation (#31)
* docs(button):add-button-documentation * docs(breadcrumb):add-breadcrumb-documentation * docs(button):add-button-documentation(clean-up) * docs(button):add-button-documentation(clean-up) * docs(close-button):add-close-button-documentation
1 parent 3b997c4 commit 7a0c459

21 files changed

+776
-44
lines changed

‎components/content/examples/breadcrumb/BreadcrumbComposition.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<c-breadcrumb font-size="sm" font-weight="semibold" color="red.500">
3+
<c-breadcrumb-item>
4+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
5+
</c-breadcrumb-item>
6+
<c-breadcrumb-item>
7+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
8+
</c-breadcrumb-item>
9+
<c-breadcrumb-item is-current-page>
10+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
11+
</c-breadcrumb-item>
12+
</c-breadcrumb>
13+
</template>
14+
<script setup>
15+
import {
16+
CBreadcrumb,
17+
CBreadcrumbItem,
18+
CBreadcrumbLink
19+
} from '@chakra-ui/vue-next';
20+
</script>

‎components/content/examples/breadcrumb/DefaultSeparator.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<c-breadcrumb>
3+
<c-breadcrumb-item>
4+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
5+
</c-breadcrumb-item>
6+
<c-breadcrumb-item>
7+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
8+
</c-breadcrumb-item>
9+
<c-breadcrumb-item is-current-page>
10+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
11+
</c-breadcrumb-item>
12+
</c-breadcrumb>
13+
</template>
14+
<script setup>
15+
import {
16+
CBreadcrumb,
17+
CBreadcrumbItem,
18+
CBreadcrumbLink
19+
} from '@chakra-ui/vue-next';
20+
</script>

‎components/content/examples/breadcrumb/FunctionalSeparator.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<c-breadcrumb :separator="Sun">
3+
<c-breadcrumb-item>
4+
<c-breadcrumb-link href="#"
5+
>Home</c-breadcrumb-link
6+
>
7+
</c-breadcrumb-item>
8+
<c-breadcrumb-item>
9+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
10+
</c-breadcrumb-item>
11+
<c-breadcrumb-item is-current-page>
12+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
13+
</c-breadcrumb-item>
14+
</c-breadcrumb>
15+
</template>
16+
<script setup>
17+
import {
18+
CBreadcrumb,
19+
CBreadcrumbItem,
20+
CBreadcrumbLink,
21+
CIcon
22+
} from '@chakra-ui/vue-next';
23+
24+
const Sun = () => {
25+
return h(CIcon, {
26+
name: 'sun'
27+
});
28+
};
29+
</script>

‎components/content/examples/breadcrumb/SimpleBreadcrumb.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<c-breadcrumb>
3+
<c-breadcrumb-item>
4+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
5+
</c-breadcrumb-item>
6+
<c-breadcrumb-item>
7+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
8+
</c-breadcrumb-item>
9+
<c-breadcrumb-item is-current-page>
10+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
11+
</c-breadcrumb-item>
12+
</c-breadcrumb>
13+
</template>
14+
<script setup>
15+
import {
16+
CBreadcrumb,
17+
CBreadcrumbItem,
18+
CBreadcrumbLink
19+
} from '@chakra-ui/vue-next';
20+
</script>

‎components/content/examples/breadcrumb/SlotSeparator.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<c-breadcrumb>
3+
<template v-slot:#separator>
4+
<c-icon name="chevron-right" />
5+
</template>
6+
<c-breadcrumb-item>
7+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
8+
</c-breadcrumb-item>
9+
<c-breadcrumb-item>
10+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
11+
</c-breadcrumb-item>
12+
<c-breadcrumb-item is-current-page>
13+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
14+
</c-breadcrumb-item>
15+
</c-breadcrumb>
16+
</template>
17+
<script setup>
18+
import {
19+
CBreadcrumb,
20+
CBreadcrumbItem,
21+
CBreadcrumbLink,
22+
CIcon
23+
} from '@chakra-ui/vue-next';
24+
</script>

‎components/content/examples/breadcrumb/StringSeparator.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<c-breadcrumb separator=">">
3+
<c-breadcrumb-item>
4+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
5+
</c-breadcrumb-item>
6+
<c-breadcrumb-item>
7+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
8+
</c-breadcrumb-item>
9+
<c-breadcrumb-item is-current-page>
10+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
11+
</c-breadcrumb-item>
12+
</c-breadcrumb>
13+
</template>
14+
<script setup>
15+
import {
16+
CBreadcrumb,
17+
CBreadcrumbItem,
18+
CBreadcrumbLink
19+
} from '@chakra-ui/vue-next';
20+
</script>

‎components/content/examples/button/BaseButton.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<CButton>Button</CButton>
3+
</template>
4+
<script setup>
5+
import { CButton } from '@chakra-ui/vue-next';
6+
</script>

‎components/content/examples/button/ButtonComposition.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<c-button
3+
size="md"
4+
height="48px"
5+
width="200px"
6+
border="2px"
7+
border-radius="sm"
8+
color-scheme="blue"
9+
variant="outline"
10+
>
11+
Button
12+
</c-button>
13+
</template>
14+
<script setup>
15+
import { CButton } from '@chakra-ui/vue-next';
16+
</script>

‎components/content/examples/button/ButtonGroup.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<c-button-group variant="outline">
3+
<c-button color-scheme="blue">Proceed</c-button>
4+
<c-button>Cancel</c-button>
5+
</c-button-group>
6+
</template>
7+
<script setup>
8+
import { CButtonGroup } from '@chakra-ui/vue-next';
9+
</script>

‎components/content/examples/button/CustomButton.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<c-button
3+
border="1px solid rgba(47, 43, 67, 0.1)"
4+
border-radius="12px"
5+
mr="3"
6+
variant="outline"
7+
box-shadow="0px 1px 3px rgba(47, 43, 67, 0.1), inset 0px -1px 0px rgba(47, 43, 67, 0.1)"
8+
bg="transparent"
9+
size="lg"
10+
>
11+
Button
12+
</c-button>
13+
</template>
14+
<script setup>
15+
import { CButton } from '@chakra-ui/vue-next';
16+
</script>

0 commit comments

Comments
 (0)