28 |
29 |
30 |
31 |
32 |
43 |
--------------------------------------------------------------------------------
/components/navigation/table-of-contents.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 | {{ content.page?.title || "On this page" }}
15 |
16 |
25 |
26 |
58 |
64 |
71 | {{ item.text }}
72 |
73 |
74 |
75 |
106 |
112 |
119 | — {{ nestedItem.text }}
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
139 |
--------------------------------------------------------------------------------
/components/navigation/top-navigation.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
42 |
43 |
44 |
45 |
46 |
47 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
64 |
65 |
70 |
75 |
83 |
84 |
89 |
97 |
98 |
103 |
111 |
112 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/config/site-config.ts:
--------------------------------------------------------------------------------
1 | const baseUrl = 'https://github.com/chakra-ui/chakra-ui-vue-next';
2 |
3 | const siteUrl = 'https://vue.chakra-ui.com';
4 | const siteDescription =
5 | 'Simple, Modular and Accessible UI Components for your Vue Applications.';
6 | const siteName = 'Chakra UI Vue | Build accessible Vue apps with speed';
7 | const siteLang = 'en';
8 |
9 | const siteConfig = {
10 | repo: {
11 | url: baseUrl,
12 | editUrl: `${baseUrl}/edit/main/website`,
13 | blobUrl: `${baseUrl}/blob/main`
14 | },
15 | openCollective: {
16 | url: 'https://opencollective.com/chakra-ui'
17 | },
18 | discord: 'https://discord.gg/dQHfcWF',
19 | youtube: 'https://www.youtube.com/channel/UC4TmDovH46TB4S0SM0Y4CIg',
20 | twitter: 'https://twitter.com/chakraui_vue',
21 | seo: {
22 | title: 'Chakra UI Vue',
23 | titleTemplate: '%s - Chakra UI Vue',
24 | siteDescription,
25 | siteUrl,
26 | twitter: {
27 | handle: '@chakraui_vue',
28 | site: '@chakraui_vue',
29 | cardType: 'summary_large_image'
30 | },
31 | openGraph: {
32 | type: 'website',
33 | locale: 'en_US',
34 | url: siteUrl,
35 | title: 'Chakra UI',
36 | siteDescription,
37 | site_name: siteName,
38 | images: [
39 | {
40 | url: 'https://chakra-ui.com/og-image.png',
41 | width: 1240,
42 | height: 480,
43 | alt: siteName
44 | },
45 | {
46 | url: 'https://chakra-ui.com/twitter-og-image.png',
47 | width: 1012,
48 | height: 506,
49 | alt: siteName
50 | }
51 | ]
52 | }
53 | }
54 | };
55 |
56 | export default siteConfig;
57 | export { baseUrl, siteDescription, siteLang, siteName, siteUrl };
58 |
--------------------------------------------------------------------------------
/content/1.getting-started/0.index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Chakra UI Vue
3 | description: Introduction to Chakra UI Vue
4 | version: 2.0+
5 | ---
6 |
7 | # Chakra UI Vue
8 |
9 | Welcome to the documentation of Chakra UI Vue. Here you can find more about Chakra UI Vue, what it is, how it can help you build applications, explore the components and theme, etc.
10 |
11 | ## What is Chakra UI Vue?
12 |
13 | Chakra UI Vue is a design system implementation that allows you to build applications and design systems with **speed**. Chakra UI Vue comes with a list of `components`, like a button, accordion component, etc. All the components are build with accessibility in mind and will ship with the needed `ARIA-labels` and `keyboard interactions` out of the box.
14 |
15 | Chakra UI Vue also comes with a default `theme`, with colors, sizes, component styles, to get you started. But allows for a fully customization to make your application look exactly as you want it, thanks to the `extensive` theming API.
16 |
17 | Chakra UI Vue is build for [Vue.js 3](https://vuejs.org/) and is part of the `Chakra-verse` ecosystem, along with [Chakra UI](https://chakra-ui.com/) and [Zag.js](https://zagjs.com/).
18 |
19 | ## Why Chakra UI Vue?
20 |
21 | **@chakra-ui/vue-next** is a design system implementation whose mission is to make building accessible
22 | and composable Vue.js web applications fun.
23 |
24 | In order to make our components as accessible as possible, we've carefully crafted each component
25 | to be WAI-ARIA compliant while still making it possible to customize Chakra components based on
26 | constraint-based design principles.
27 |
28 | Chakra UI Vue is able to do this because of principles adopted from patterns in the web development space
29 | that proved to be successful. We've borrowed tons of knowledge and inspiration from React's
30 | [Chakra UI](http://chakra-ui.com) (The mother ship 😁) by Segun Adebayo,
31 | [Tailwind CSS](https://tailwindcss.com) by Adam Wathan, [Vuetify](https://vuetifyjs.com) by
32 | John Leider, [Buefy](https://buefy.org) by Walter Thomasi, [Reach UI](https://reacttraining.com/reach-ui/)
33 | from the folks over at React Training, and many other tools that make web development a colorful field.
34 |
35 | ## Core Concepts
36 |
37 | Chakra UI is built from the ground up with two main guiding principles in mind:
38 |
39 | 1. Accessibility
40 | 2. Constraint based design
41 |
42 | ## Vision
43 |
44 | - Provide accessible components out of the box.
45 | - Bridge the gap between design and development, by providing a styling API that utilizes constraint-based design principles.
46 | - Provide composable components that consumers can extend to create their own custom components.
47 | - Find new ways to make building accessible Vue applications fun and fast.
48 |
49 | ## Getting started
50 |
51 | To get started, you can use the [Codesandbox](https://codesandbox.io/s/vue-chakra-next-with-autoimport-r1shkt?from-embed){:target="\_blank"} starter template:
52 |
53 |
59 |
60 | Stackblitz starter template is coming soon.
61 |
62 | There are starter demo's available on GitHub thanks to @Codebender828:
63 |
64 | - Vue 3: [https://github.com/codebender828/chakra-vue-v1-demo](https://github.com/codebender828/chakra-vue-v1-demo)
65 | - Nuxt 3: [https://github.com/codebender828/chakra-nuxt-v1-demo](https://github.com/codebender828/chakra-nuxt-v1-demo)
66 |
67 | Or follow along with the [installation](1.installation.md) guide.
68 |
69 | ## Community
70 |
71 | Please feel free to connect with the **Chakra UI** community on [Discord](https://discord.gg/sq2Kp6x).
72 | ::DiscordBanner
73 | ::
74 |
--------------------------------------------------------------------------------
/content/1.getting-started/1.installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Installation
3 | description: How to install and set up Chakra UI in your project
4 | version: 2.0+
5 | ---
6 |
7 | # Getting Started with Chakra UI Vue
8 |
9 | > Please note that our docs are still under development.
10 |
11 | Let's see how you can get started with **Chakra UI Vue** 🥳.
12 |
13 | You will start from a [Vue 3](https://vuejs.org/) project. Don't worry, this can be a new or existing project.
14 | If you are looking to install `Chakra UI Vue` in [Nuxt 3](https://nuxt.com/), you can take a look [here](./2.nuxt.md).
15 |
16 | The first thing you will need to do is install the `Chakra UI Vue` package and its dependencies in the Vue project.
17 | This can be achieved with the following terminal command:
18 |
19 | ```bash
20 | pnpm install @chakra-ui/vue-next
21 | ```
22 |
23 | Or if you prefer using yarn:
24 |
25 | ```bash
26 | yarn add @chakra-ui/vue-next
27 | ```
28 |
29 | ## Usage
30 |
31 | Perfect, now before you can use the features of Chakra UI, you will have to add it to the app instance.
32 | For this, you have to import the `createChakra` function from the `Chakra UI Vue` package in the `main.ts` file.
33 | This allows you to create the `Chakra UI Vue` plugin instance and will make it easy to add plugin options like `extendTheme` for example.
34 | Then you need to tell the application that you want to use the plugin, this will make the Chakra UI Vue features available to use in your Vue app.
35 |
36 | ```tsx
37 | // main.ts
38 | import { createChakra } from "@chakra-ui/vue-next"
39 | import { createApp } from 'vue'
40 | import App from './App.vue'
41 |
42 | const chakra = createChakra()
43 |
44 | const app = createApp(App).use(chakra)
45 | app.mount('#app')
46 | ```
47 |
48 | This will also be the place where you can add extra `options` to the Chakra UI Vue plugin to extend Chakra's features for the application.
49 | But let's not dive into that yet, let's first see how you can use Chakra UI Components. An overview of all the components can be found here.
50 |
51 | ## Using Chakra Components
52 |
53 | Once you've installed and imported Chakra UI Vue, you can start using its components in your app.
54 | Let's pick the `Button` component, which is called `CButton` from the package.
55 | (Note the use of the [script setup](https://vuejs.org/api/sfc-script-setup.html) here)
56 |
57 | ```tsx
58 | // App.vue
59 |
62 | ```
63 |
64 | Next, you want to display the button on the page. After it is imported, the button will be available in the template.
65 |
66 | ```tsx
67 | // App.vue
68 |
69 | Button
70 |
71 | ```
72 |
73 | There you go! 🚀
74 |
75 | You have a working button with some styling. Thanks to styled props, you can style `Chakra UI Vue` components.
76 | Like you did here with our button, making it use the `green` color scheme.
77 | Let's learn about styled props and the theming API of Chakra UI Vue here.
78 |
--------------------------------------------------------------------------------
/content/1.getting-started/2.nuxt.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using Nuxt
3 | description: How to use Chakra UI Vue with Nuxt
4 | version: 2.0+
5 | ---
6 | # Chakra UI Nuxt
7 |
8 | 💚 We all love [Nuxt 3](https://nuxt.com/)! Getting started with Chakra UI Nuxt is also just as simple.
9 |
10 | ## Installation
11 |
12 | If you wish to use Chakra UI Vue with Nuxt, you will have to install the `@Chakra-ui/nuxt-next` package. This package will install all the required dependencies.
13 |
14 | ```bash
15 | pnpm install @chakra-ui/nuxt-next
16 | ```
17 |
18 | or
19 |
20 | ```bash
21 | yarn add @chakra-ui/nuxt-next
22 | ```
23 |
24 | ### Registering the Chakra module
25 |
26 | We then register the Chakra UI module in the `modules` key of our `nuxt.config.ts`. [See the Nuxt documentation to learn more about modules in Nuxt.js](https://nuxt.com/docs/api/configuration/nuxt-config#modules)
27 |
28 | Chakra module options are the same as the Vue CLI plugin options. Learn more about the [Chakra plugin options here](./plugin-options).
29 |
30 | ```tsx
31 | //nuxt.config.ts
32 | export default {
33 | modules: [
34 | '@chakra-ui/nuxt-next',
35 | ],
36 | /**
37 | * Add extend the plugin options under the `chakra` key.
38 | **/
39 | chakra: {
40 | extendTheme: {
41 | colors: {
42 | brand: { /* ... */ }
43 | }
44 | }
45 | }
46 | }
47 | ```
48 |
49 | That is it! 🚀
50 | You can now use the Chakra UI components and features in your Nuxt application.
51 |
52 | ### Starters
53 |
54 | Here is a Nuxt 3 Github repo that contains a starter for Chakra UI Nuxt: [https://github.com/codebender828/chakra-nuxt-v1-demo](https://github.com/codebender828/chakra-nuxt-v1-demo).
--------------------------------------------------------------------------------
/content/1.getting-started/3.design-principles.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Design Principles
3 | description: Principles that keeps Chakra's components fairly consistent
4 | tags: ['principles']
5 | ---
6 |
7 | # Design Principles
8 |
9 | Chakra UI Vue is established on principles that keep its components fairly
10 | consistent. Understanding these concepts will help you better contribute to
11 | Chakra UI Vue.
12 |
13 | Our goal is to design simple, composable components that cater to real-life UI
14 | design problems. In order to do that, we developed a set of principles that help
15 | us always be on that path.
16 |
17 | - **Style Props:** All component styles can be overridden or extended via style
18 | props to reduce the use of `css` prop or `styled()`. Compose new components
19 | from `Box`.
20 |
21 | - **Simplicity:** Strive to keep the component API fairly simple and show real
22 | world scenarios of using the component.
23 |
24 | - **Composition:** Break down components into smaller parts with minimal props
25 | to keep complexity low, and compose them together. This will ensure that the
26 | styles and functionality are flexible and extensible.
27 |
28 | - **Accessibility:** When creating a component, keep accessibility top of mind.
29 | This includes keyboard navigation, focus management, color contrast, voice
30 | over, and the correct `aria-*` attributes.
31 |
32 | - **Dark Mode:** Make components dark mode compatible. Use `useColorMode` hook
33 | to handle styling.
34 |
35 | - **Naming Props:** We all know naming is the hardest thing in this industry.
36 | Generally, ensure a prop name is indicative of what it does. Boolean props
37 | should be named using auxiliary verbs such as `does`, `has`, `is` and
38 | `should`. For example, `Button` uses `isDisabled`, `isLoading`, etc.
--------------------------------------------------------------------------------
/content/1.getting-started/_dir.yml:
--------------------------------------------------------------------------------
1 | # navigation.redirect: '/getting-started/installation'
2 |
--------------------------------------------------------------------------------
/content/2.styled-system/0.index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Styled System
3 | description: Introduction to Styled System of Chakra UI Vue
4 | version: 2.0+
5 | ---
6 |
7 | # Styled System
8 |
9 | The styled system of Chakra UI Vue helps you to take care of anything style related.
10 |
11 | ## Constraint Based Design
12 |
13 | In order to help you create clean, consistent layouts, Chakra UI Vue provides building blocks that take
14 | advantage of [constraint-based design principles](https://react-ui.dev/core-concepts/constraints-based-design).
15 |
16 | Chakra UI Vue's design principles are built around two core concepts:
17 |
18 | - Design tokens
19 | - Space scales
20 |
21 | ### Design tokens
22 |
23 | [Design tokens](https://www.lightningdesignsystem.com/design-tokens) are named values that are
24 | used in place of hard-coded values (such as hex values for color or pixel values for spacing)
25 | in order to maintain a scalable and consistent visual system for UI development.
26 |
27 | These constraints help you to create consistent, high-quality user interfaces.
28 |
29 | Chakra UI Vue's theming system leverages design tokens for different style properties
30 | like color, spacing, font sizes, font weights, opacity, radii, shadows, z-indices, border widths, and breakpoints.
31 |
32 | This allows us to create a system that enables us to style our applications in ways that can be scaled
33 | across different scales. These include a typographic (`font-size`)
34 | scale, a spacing scale for `margin` and `padding`, and a color object.
35 |
36 | By default Chakra UI Vue uses the [System UI Theme Specification](https://system-ui.com/theme/)
37 |
38 | ## Space Scales
39 |
40 | Because Chakra UI Vue uses styled system under the hood, it allows you to reliably create consistent
41 | spacing of elements in your applications. The `space` key can directly be referenced by
42 | `padding`, `margin`, `top`, `right`, `bottom`, and `left` style properties.
43 |
44 | By default, Chakra UI Vue uses a comprehensive **4pt grid** as a single unit. So in order to apply a
45 | padding of `32px`, you can use the value `32px / 4px = 8`. i.e. `padding: 8`
46 |
47 | ```jsx
48 | export default {
49 | space: {
50 | px: '1px',
51 | '0': '0',
52 | '1': '0.25rem',
53 | '2': '0.5rem',
54 | '3': '0.75rem',
55 | '4': '1rem',
56 | '5': '1.25rem',
57 | '6': '1.5rem',
58 | '8': '2rem',
59 | '10': '2.5rem',
60 | '12': '3rem',
61 | '16': '4rem',
62 | '20': '5rem',
63 | '24': '6rem',
64 | '32': '8rem',
65 | '40': '10rem',
66 | '48': '12rem',
67 | '56': '14rem',
68 | '64': '16rem'
69 | }
70 | }
71 | ```
72 |
73 | Below are some examples of how to apply spacing values to Chakra components.
74 |
75 | ```html
76 |
77 |
78 | Box
79 |
80 |
81 |
82 |
83 | Box
84 |
85 |
86 |
87 |
88 | Box
89 |
90 | ```
91 |
92 | > Chakra UI Vue's default space scale uses `rems` as the CSS unit which is relative to the default root HTML font size of 16px
93 |
94 | ### Theme
95 |
96 | By default, Chakra UI Vue uses a theme object that you can extend and customize as you see fit for your application.
97 | To learn more about theming in Chakra UI Vue, check out the [theme page](/).
--------------------------------------------------------------------------------
/content/4.components/accordion.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Accordion
3 | description: Accordion component
4 | version: 2.0+
5 | ---
6 | # Accordion
7 |
8 | An accordion is a vertically stacked set of interactive headings containing a title, content snippet, or thumbnail representing a section of content.
9 |
10 | ## Import
11 |
12 | Chakra UI Vue exports 5 accordion-related components.
13 |
14 | - **CAccordion**: The wrapper that contains accordion items.
15 | - **CAccordionItem**: A single accordion item.
16 | - **CAccordionButton**: The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading.
17 | - **CAccordionPanel**: The container for the details to be revealed.
18 | - **CAccordionIcon**: A chevron-down icon that rotates based on the expanded/collapsed state
19 |
20 | ```js
21 | import {
22 | CAccordion,
23 | CAccordionItem,
24 | CAccordionButton,
25 | CAccordionPanel,
26 | CAccordionIcon,
27 | } from "@chakra-ui/vue-next"
28 | ```
29 |
30 | ## Usage
31 |
32 | By default, only one item may be expanded and it can only be collapsed again by expanding another.
33 |
34 | `CAccordion` supports keyboard navigation between accordion buttons. Pressing the `up` or `down` key will move focus between accordion buttons.
35 |
36 | ::showcase
37 |
38 | :simple-accordion{width=full}
39 |
40 | ::
41 |
42 | ```html
43 |
44 |
45 |
46 | Watercraft
47 |
48 | Sample accordion content
49 |
50 |
51 |
52 | Automobiles
53 |
54 | Sample accordion content
55 |
56 |
57 |
58 | Aircrafts
59 |
60 | Sample accordion content
61 |
62 |
63 | ```
64 |
65 | ## Expand multiple items at once
66 |
67 | If you set `allow-multiple` to `true` then the accordion will permit multiple items to be expanded at once.
68 |
69 |
70 | ::showcase
71 |
72 | :simple-accordion{width="full" allow-multiple=true}
73 |
74 | ::
75 |
76 | ```html
77 |
78 |
79 |
80 | Watercraft
81 |
82 | Sample accordion content
83 |
84 |
85 |
86 | Automobiles
87 |
88 | Sample accordion content
89 |
90 |
91 |
92 | Aircrafts
93 |
94 | Sample accordion content
95 |
96 |
97 | ```
98 |
99 | ## Toggle each accordion item
100 |
101 | If you set `allow-toggle` to `true`, any expanded item may be collapsed again.
102 |
103 |
104 | ::showcase
105 |
106 | :simple-accordion{width="full" allow-toggle=true}
107 |
108 | ::
109 |
110 | ```html
111 |
112 |
113 |
114 | Watercraft
115 |
116 | Sample accordion content
117 |
118 |
119 |
120 | Automobiles
121 |
122 | Sample accordion content
123 |
124 |
125 |
126 | Aircrafts
127 |
128 | Sample accordion content
129 |
130 |
131 | ```
132 |
133 | ## Styling the expanded state
134 |
135 | The `CAccordionButton` component has `aria-expanded` set to `true` or `false` depending on the state of the `CAccordionItem`. Use the style prop `_expanded` to style this state.
136 |
137 | ::showcase
138 |
139 | :expanded-style{width="full" allow-toggle=true}
140 |
141 | ::
142 |
143 | ## Accessibility
144 |
145 | Pressing `space` or `enter` when focus is on the accordion panel header will toggle (expand or collapse) the accordion.
--------------------------------------------------------------------------------
/content/4.components/aspectratio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Aspect Ratio
3 | description: Aspect ratio component
4 | version: 2.0+
5 | ---
6 |
7 | # Aspect Ratio
8 |
9 | `CAspectRatio` component is used to embed responsive videos and maps, etc.
10 |
11 | ## Import
12 |
13 | ```js
14 | import { CAspectRatio } from '@chakra-ui/vue-next';
15 | ```
16 |
17 | ## Usage
18 |
19 | ### Embed Video
20 |
21 | To embed a video with a specific aspect ratio, use a `CBox` as an `iframe` with src pointing to the link of the video.
22 |
23 | Pass the `max-width` prop to `CAspectRatio` to control the width of the content.
24 |
25 | ::showcase
26 | ::aspect-ratio-e-video{width=full}
27 | ::
28 | ::
29 |
30 | ```html
31 |
32 |
33 |
34 | ```
35 |
36 | ### Embed Image
37 |
38 | You can also embed image that has a 4:3 aspect ratio.
39 |
40 | ::showcase
41 | ::aspect-ratio-e-image{width=full}
42 | ::
43 | ::
44 |
45 | ```html
46 |
47 |
48 |
49 | ```
50 |
51 | ### Embed a responsive map
52 |
53 | Here's how to embed a responsive Google map using `CAspectRatio`. To make the map take up the entire width, we can ignore the max-width prop.
54 |
55 | ::showcase
56 | ::aspect-ratio-e-map{width=full}
57 | ::
58 | ::
59 |
--------------------------------------------------------------------------------
/content/4.components/badge.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Badge
3 | description: Badge Component
4 | version: 2.0+
5 | ---
6 |
7 | # Badge
8 |
9 | The `CBadge` component is used to highlight an item's status for quick recognition.
10 |
11 | ## Import
12 |
13 | ```js
14 | import { CBadge } from '@chakra-ui/vue-next';
15 | ```
16 |
17 | ## Usage
18 |
19 | ::showcase
20 | ::base-badge
21 | ::
22 | ::
23 |
24 | ```html
25 | Default
26 | ```
27 |
28 | ### Badge Color
29 |
30 | Pass the `color-scheme` prop to customize the color of the `CBadge`. `variant-color` can be any color key that exists in the `$chakra.theme.colors`. Here `$chakra.theme` is your theme object.
31 |
32 |
33 | ::showcase
34 | ::wrap{align="center"}
35 | ::color-badge
36 | ::
37 |
38 | ```html
39 |
40 | Default
41 | Success
42 | Removed
43 | New
44 |
45 | ```
46 |
47 | ### Badge Variants
48 |
49 | Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to get a different style.
50 |
51 | ::showcase
52 | ::variant-badge
53 | ::
54 | ::
55 |
56 | ```html
57 |
58 | Subtle
59 | Solid
60 | Outline
61 |
62 | ```
63 |
64 | ## Compositon
65 |
66 |
67 | ::showcase
68 | ::composition-badge
69 | ::
70 | ::
71 |
72 | ```html
73 |
74 |
75 |
76 |
77 | Jonathan Bakebwa
78 |
79 | New
80 |
81 |
82 | UI Engineer
83 |
84 |
85 | ```
86 |
87 | You can also change the size of the badge by passing `font-size` prop.
88 |
89 | ::showcase
90 | ::composition-badge-two
91 | ::
92 | ::
93 |
94 | ```html
95 |
96 | Jonathan Bakebwa
97 |
98 | New
99 |
100 |
101 | ```
102 |
103 | ## Props
104 |
105 | > The `CBadge` component composes `CBox` component so you can pass props for `Box`.
106 |
107 | | Name | Type | Default | Description |
108 | |-----------------|------------------------------|----------|--------------------------------------------------------------------------------|
109 | | `variant` | `solid`, `subtle`, `outline` | `subtle` | The style variant of the badge |
110 | | `variant-color` | `string` | `gray` | The color scheme to use for the badge. Must be a key in `$chakra.theme.colors` |
111 |
112 |
113 | ## Slots
114 |
115 | | Name | Description |
116 | |---------|----------------------------|
117 | | default | Text rendered inside badge |
118 |
119 |
--------------------------------------------------------------------------------
/content/4.components/center.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Center
3 | description: Center Component
4 | version: 2.0+
5 | ---
6 |
7 | # Center
8 |
9 | Center is a layout component that centers its child within itself.
10 |
11 | ## Import
12 |
13 | ```js
14 | import { CCenter, CCircle, CSquare } from '@chakra-ui/vue-next';
15 | ```
16 |
17 | - CCenter: centers its child given `width` and `height`
18 | - CSquare: centers its child given `size` (width and height)
19 | - CCircle: a Square with round `border-radius`
20 |
21 | ## Usage
22 |
23 | Put any child element inside it, give it any `width` or/and `height`, it'll ensure the child is centered.
24 |
25 | ::showcase
26 | ::simple-center{width=full}
27 | ::
28 | ::
29 |
30 | ```html
31 |
32 | This is the Center
33 |
34 | ```
35 |
36 | ## With Icons
37 |
38 | CCenter can be used to create frames around icons or numbers.
39 |
40 | ::showcase
41 | ::icon-center
42 | ::
43 | ::
44 |
45 | ```html
46 |
47 |
48 |
49 |
50 |
51 |
52 | 1
53 |
54 |
55 |
56 | ```
57 |
58 | ## Square and Circle
59 |
60 | The Square and Circle components automatically centers its children given the size.
61 |
62 | ::showcase
63 | ::square-and-circle
64 | ::
65 | ::
66 |
67 | ```html
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | ```
77 |
--------------------------------------------------------------------------------
/content/4.components/closebutton.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Close Button
3 | description: Close Button Component
4 | version: 2.0+
5 | ---
6 |
7 | # Close Button
8 |
9 | CloseButton is essentially a button with a close icon, that performsa close action on a component usually a dialogue or alert component.
10 |
11 | ## Usage
12 |
13 | Chakra-Ui Vue exports one Close-button component
14 |
15 | - **CloseButton**: The box container containing the close icon
16 |
17 | ```js
18 | import { CCloseButton } from '@chakra-ui/vue-next';
19 | ```
20 |
21 | Base button
22 |
23 | Simply display the close button by using the `CCloseButton` component
24 |
25 | ::showcase
26 | ::close-button
27 | ::
28 | ::
29 |
30 | ```html
31 |
32 | ```
33 |
34 | ### Button Size
35 |
36 | You can adjust the button sizes by passing the `size` prop as either `sm`,`md`, or `lg`
37 |
38 | ::showcase
39 | ::close-button-sizes{spacing="4"}
40 | ::
41 | ::
42 |
43 | ```html
44 |
45 |
46 |
47 |
48 |
49 | ```
50 |
51 | ## Composition
52 |
53 | The Close Button can be used to perform close actions with other components. See how;
54 |
55 | ::showcase
56 | ::close-button-composition
57 | ::
58 | ::
59 |
--------------------------------------------------------------------------------
/content/4.components/code.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Code
3 | description: Code component
4 | version: 2.0+
5 | ---
6 | # Code
7 |
8 | Code is a component used to display inline code. It is composed of the `Box` component with a font family of `mono` for displaying code.
9 |
10 | ## Import
11 |
12 | ```js
13 | import { CCode } from "@chakra-ui/vue-next"
14 | ```
15 |
16 | ## Usage
17 |
18 | ::showcase
19 | :simple-code
20 | ::
21 |
22 | ```html
23 | Hello world
24 | ```
25 |
26 | ## Colors
27 |
28 | You can change the color scheme of the component by passing the `colorScheme` prop.
29 |
30 | ::showcase
31 | :colors-code
32 | ::
33 |
34 | ```html
35 |
36 | console.log(welcome)
37 | var chakra = 'awesome!'>
38 | npm install chakra
39 |
40 | ```
41 |
42 | ## Variant
43 |
44 | You can change the variant of the component by passing the `variant` prop.
45 |
46 | ::showcase
47 | :variant-code
48 | ::
49 |
50 | ```html
51 |
52 | Outline
53 | Solid
54 | Solid
55 |
56 | ```
57 |
58 | ## Props
59 |
60 | | Name | Type | Default | Description |
61 | |---------------|------------------------------------|----------|---------------------------------------|
62 | | `colorScheme` | `string` | `grey` | The color scheme to use for the code. |
63 | | `variant` | `"solid" \| "subtle" \| "outline"` | `subtle` | The variant of the Code |
64 |
65 | ## Slots
66 |
67 | | Name | Description |
68 | |---------------|---------------------------------------|
69 | | `default` | Used for the `CCode` content. |
--------------------------------------------------------------------------------
/content/4.components/collapse.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Collapse
3 | description: Collapse component
4 | version: 2.0+
5 | ---
6 | # Collapse
7 |
8 | The Collapse component is used to create regions of content that can expand/collapse with a basic animation. It helps to hide content that's not immediately relevant to the user.
9 |
10 | This component leverages [animejs](https://animejs.com/){target="_blank"}, and composes the Box component.
11 |
12 | ## Import
13 |
14 | ```js
15 | import { CCollapse } from "@chakra-ui/vue-next";
16 | ```
17 |
18 | ## Usage
19 |
20 | ::showcase
21 | :simple-collapse{width=full}
22 | ::
23 |
24 |
25 | ```html
26 |
27 |
28 | Toggle
29 |
30 |
31 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
32 | standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
33 | type specimen book.
34 |
35 |
36 | ```
37 |
38 | ## Change the Starting Height
39 |
40 | ::showcase
41 | :height-collapse{width=full}
42 | ::
43 |
44 |
45 | ```html
46 |
47 |
48 | Show {{ show ? 'Less' : 'More' }}
49 |
50 |
51 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
52 | standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
53 | type specimen book.
54 |
55 |
56 | ```
57 |
58 | ## Props
59 |
60 | This component doesn't have any custom props.
61 |
62 | | Name | Type | Description |
63 | |----------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
64 | | isOpen | `boolean` | If `true`, the content will be visible |
65 | | animateOpacity | `boolean` | If `true`, the opacity of the content will be animated |
66 | | duration | `number` | The animation duration as it expands |
67 | | startingHeight | `number` | he height you want the content in it's collapsed state. Set to `0` by default |
68 | | endingHeight | `number` | The height you want the content in it's expanded state. Set to `auto` by default |
69 | | easing | `string` | Add easing function for entering and leaving state. Accepts easing props from [animejs](https://animejs.com/documentation/#linearEasing){target="_blank"}. Set to `easeInOutSine` by default. |
70 |
71 | ## Events
72 |
73 | | Name | Payload | Description |
74 | |----------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
75 | | `@start` | `Event` | The event to be called when the collapse animation starts. |
76 | | `@finish` | `Event` | The event to be called when the collapse animation ends. |
77 |
--------------------------------------------------------------------------------
/content/4.components/flex.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Flex
3 | description: Flex Component
4 | version: 2.0+
5 | ---
6 |
7 | # Flex
8 |
9 | Flex is `CBox` with `display: flex` and comes with helpful style shorthand. It renders a `div` element.
10 |
11 | ## Import
12 |
13 | ```js
14 | import { CFlex, CSpacer } from '@chakra-ui/vue-next';
15 | ```
16 |
17 | - Flex: A `CBox` with `display: flex`.
18 | - Spacer: Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex.
19 |
20 | ## Usage
21 |
22 | When using the Flex component, you can use some of the following helpful shorthand props:
23 |
24 | - `direction` for `flexDirection`
25 | - `wrap` for `flexWrap`
26 | - `align` for `alignItems`
27 | - `justify` for `justifyContent`
28 |
30 | While you can pass the verbose props, using the shorthand can save you some time.
31 |
32 | ::showcase
33 | ::simple-flex{width=full}
34 | ::
35 | ::
36 |
37 | ```html
38 |
39 |
40 | Box 1
41 |
42 |
43 | Box 2
44 |
45 |
46 | Box 3
47 |
48 |
49 | ```
50 |
51 | ### Using the Spacer
52 |
53 | As an alternative to `CStack`, you can combine `CFlex` and `CSpacer` to create stackable and responsive layouts.
54 |
55 | ::showcase
56 | ::spacer-flex{width=full}
57 | ::
58 | ::
59 |
60 | ```html
61 |
62 |
63 | Box 1
64 |
65 |
66 |
67 | Box 2
68 |
69 |
70 | ```
71 |
72 | ### Flex and Spacer vs Grid vs Stack
73 |
74 | The `CFlex` and `CSpacer` components, `CGrid` and `CHStack` treat children of different widths differently.
75 |
76 | - In `CHStack`, the children will have equal spacing between them but they won't span the entire width of the container.
77 | - In `CGrid`, the starting points of the children will be equally spaced but the gaps between them will not be equal.
78 | - With `CFlex` and `CSpacer`, the children will span the entire width of the container and also have equal spacing between them.
79 |
80 | ::showcase
81 | ::compare-flex{width=full}
82 | ::
83 | ::
84 |
85 | ```html
86 |
87 | Flex and Spacer: Full width, equal Spacing
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 | HStack: The children have equal spacing but don't span the whole container
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | ```
115 |
116 | A good use case for `CSpacer` is to create a navbar with a signup/login button aligned to the right.
117 |
118 | Since `CSpacer` renders a `div`, any `gap` value provided to the parent is applied to both sides of this component, and therefore make the gap appear doubled when the spacer is completely collapsed.
119 |
120 | > The example below is not responsive on purpose as you might switch to a collapsed menu on mobile.
121 |
122 | ::showcase
123 | ::sign-up-flex{width=full}
124 | ::
125 | ::
126 |
127 | ```html
128 |
129 |
130 | Chakra App
131 |
132 |
133 |
134 | Sign Up
135 | Log in
136 |
137 |
138 | ```
--------------------------------------------------------------------------------
/content/4.components/heading.md:
--------------------------------------------------------------------------------
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 `
` 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 | I'm a Heading
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 |
40 |
41 | In love with Vue & Nuxt
42 |
43 |
44 | In love with Vue & Nuxt
45 |
46 |
47 | In love with Vue & Nuxt
48 |
49 |
50 | In love with Vue & Nuxt
51 |
52 |
53 | In love with Vue & Nuxt
54 |
55 |
56 | In love with Vue & Nuxt
57 |
58 |
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 |
71 | Basic text writing, including headings, body text, lists, and more.
72 |
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 |
91 | Modern online and offline payments for Africa
92 |
93 | Paystack helps businesses in Africa get paid by anyone, anywhere in the
94 | world
95 |
96 |
97 | Create a free account
98 |
99 |
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. |
--------------------------------------------------------------------------------
/content/4.components/image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Image
3 | description: Image component
4 | version: 2.0+
5 | ---
6 | # Image
7 |
8 | The Image component is used to display images with support for fallback.
9 |
10 | ## Import
11 |
12 | ```js
13 | import { CImage } from "@chakra-ui/vue-next"
14 | ```
15 |
16 | ## Usage
17 |
18 | ::showcase
19 | :simple-image
20 | ::
21 |
22 |
23 | ```html
24 |
25 |
26 |
27 | ```
28 |
29 | ## Size
30 |
31 | The size of the image can be adjusted using the `box-size` prop.
32 |
33 | ::showcase
34 | :box-image
35 | ::
36 |
37 |
38 | ```html
39 |
40 |
41 |
42 |
43 |
44 | ```
45 |
46 | ## Image with border radius
47 |
48 | ::showcase
49 | :rounded-image
50 | ::
51 |
52 |
53 | ```html
54 |
55 |
56 |
57 | ```
58 |
59 | ## Fallback support
60 |
61 | The Image component allows you provide a fallback placeholder. The placeholder is displayed when:
62 |
63 | - The fallback or `fallback-src` prop is provided
64 | - The image provided in `src` is currently loading
65 | - An error occurred while loading the image `src`
66 | - No `src` prop was passed
67 |
68 | > You can also opt out of this behavior by passing the ignoreFallback prop.
69 |
70 | ::showcase
71 | ::fallback-image
72 | ::
73 | ::
74 |
75 | ```html
76 |
77 | ```
78 |
79 | ## Props
80 |
81 | | Name | Type | Default | Description |
82 | |------------------|-----------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------|
83 | | `src` | `string` | | The path to the image source |
84 | | `fallback-src` | `string` | | In event there was an error loading the `src`, specify a fallback. In most cases, this can be an avatar or image placeholder |
85 | | `alt` | `string` | | The alt text that describes the image |
86 | | `ignoreFallback` | `boolean` | `false` | Opt out of the `fallback-src` logic and use the `CImage` directly |
--------------------------------------------------------------------------------
/content/4.components/simplegrid.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: SimpleGrid
3 | description: SimpleGrid component
4 | version: 2.0+
5 | ---
6 |
7 | # SimpleGrid
8 |
9 |
10 | SimpleGrid is a user-friendly tool for effortlessly creating responsive grid layouts, utilizing a div element with display: grid.
11 |
12 | ## Import
13 |
14 | ```js
15 | import { CSimpleGrid } from '@chakra-ui/vue-next';
16 | ```
17 |
18 | ## Usage
19 |
20 | Specifying the number of columns for the grid layout.
21 |
22 | ### Sample Tag :
23 |
24 | ::showcase
25 | ::simple-grid-example{width=full}
26 | ::
27 | ::
28 |
29 | ```html
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | ```
38 |
39 | You can also make it responsive by passing array or object values into the `columns` prop.
40 |
41 | ::showcase
42 | ::simple-grid-responsive{width=full}
43 | ::
44 | ::
45 |
46 | ```html
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | ```
55 |
56 | ### Auto-responsive grid#
57 |
58 | To make the grid responsive adjust automatically without passing `columns`, simply pass the `min-child-width` prop to specify the `min-width` a child should have before adjusting the layout.
59 |
60 | This uses css grid `auto-fit` and `minmax()` internally.
61 |
62 | ### Changing the spacing for columns and rows
63 |
64 | Simply pass the `spacing` prop to change the row and column spacing between the grid items. `SimpleGrid` also allows you pass `spacing-x` and `spacing-y` to define the space between columns and rows respectively.
65 |
66 | ::showcase
67 | ::simple-grid-spacing{width=full}
68 | ::
69 | ::
70 |
71 | ```html
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | ```
80 |
81 | ## Props
82 |
83 | SimpleGrid composes `Box` so you can pass all the `Box` props and CSS grid props with the addition of these:
84 |
85 | | Name | Type | Description |
86 | |------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
87 | | `columns` | `number` | The number of columns |
88 | | `spacing` | `GridProps["gridGap"]` | The gap between the grid items |
89 | | `spacingX` | `GridProps["gridGap"]` | The `column` gap between the grid items |
90 | | `spacingY` | `GridProps["gridGap"]` | The `row` gap between the grid items |
91 | | `minChildWidth` | `CSSProperties["minWidth"]` | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. |
--------------------------------------------------------------------------------
/content/4.components/tabs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tabs
3 | description: Tabs component
4 | version: 2.0+
5 | ---
6 |
7 | # Tabs
8 |
9 | An accessible tabs component.
10 |
11 | The `CTab` and `CTabPanel` elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.
12 |
13 | ## Import
14 |
15 | ```js
16 | import { CTabs, CTabList, CTabPanels, CTab, CTabPanel } from "@chakra-ui/vue-next";
17 | ```
18 |
19 | ## Usage
20 |
21 | ::showcase
22 | :simple-tabs{width=full}
23 | ::
24 |
25 |
26 | ```html
27 |
28 |
29 |
30 |
31 | One
32 | Two
33 | Three
34 |
35 |
36 |
37 |
38 |
84 |
85 |
86 |
87 |
88 | ```
89 |
90 | You can also change the color scheme for any specific variant by passing the `color-scheme`.
91 | > The value of `color-scheme` must exist in the theme object, and must be a key in theme.colors that has the 50 - 900 color values.
92 |
93 | ::showcase
94 | ::colored-tabs{width=full}
95 | ::
96 | ::
97 |
98 | ```html
99 |
100 |
101 |
102 | One
103 | Two
104 | Three
105 |
106 |
107 |
108 |
109 |
Panel One
110 |
111 |
112 |
Panel Two
113 |
114 |
115 |
Panel Three
116 |
117 |
118 |
119 |
120 | ```
121 |
122 | ### Tab Sizes
123 |
124 | You can change the size of the tab by passing `size` prop. We support 3 sizes `sm`, `md`, `lg`
125 |
126 | ::showcase
127 | ::sizes-tabs{width=full}
128 | ::
129 | ::
130 |
131 | ```html
132 |
133 |
134 |
135 | One
136 | Two
137 | Three
138 |
139 |
140 |
141 |
142 |