轻松地构建可扩展和可访问的Vue.js应用程序.
@ chakra-ui/ veue 给您一组可访问且可调和的 Vue 组件,您可以用来构建您最喜欢的应用程序和站点 .
为Vue 2.X制取
找文件吗?
头在这里 https://vue.chakra-ui.com (中文(简体) )
特征
- 简便型: Chakra UI 包含一组布局组件,如
CBox, (中文(简体) ),CFlex财务报告和审定财务报表CStack很容易通过道具来塑造你的部件. 学多点 - 弹性可堆肥( C): Chakra UI组件以Vue UI Primitive为上架,用于无尽的可容性.
- 可访问Chakra UI组件遵循WAI-ARIA准则
规格和权利
aria-*属性. - 黑暗模式QQ: Chakra UI中的大多数组件都是暗模式相容的.
目录
安装
yarn add @chakra-ui/vue emotion
或者说
npm install @chakra-ui/vue emotion
说明: 如果你使用 Nuxt, 你需要安装
@nuxtjs/emotion软件包以及服务器侧使您的样式.
yarn add @chakra-ui/vue emotion @nuxtjs/emotion
使用量
1. 导入您的 Chakra UI 插件 main.js 文档.
import Vue from 'vue'
import Chakra from '@chakra-ui/vue'
import App from './App.vue'
Vue.use(Chakra)
new Vue({
el: '#app',
render: (h) => h(App)
}).$mount()
2. 将您的申请包入查克拉 CThemeProvider。 。 。 . 我们还建议你列入 CReset 实现所有浏览器样式规范化的组件.
在你身边 App.vue 文档.
<template>
<CThemeProvider>
<CReset />
<!--
Your application code goes here! 😁
-->
</CThemeProvider>
</template>
<script>
import { CThemeProvider, CReset } from '@chakra-ui/vue'
export default {
name: 'App',
components: {
CThemeProvider,
CReset
}
}
</script>
如果您想要切换您的应用程序介于暗光模式之间,您也可以将您的应用程序包入其中 ColorModeProvider 组件.
万岁! 现在可以开始了。您可以开始使用这样的组件:
<template>
<CThemeProvider>
<CReset />
<!--
Your application code goes here! 😁
-->
<CButton variantColor="blue">
Chakra consumed ⚡️
</CButton>
</CThemeProvider>
</template>
<script>
import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue'
export default {
name: 'App',
components: {
CThemeProvider,
CReset,
CButton
}
}
</script>
密码箱启动器
故事书组件
您也可以在 故事书来啊!
促进发展促进:
有兴趣捐款吗? 看我们的 未决问题记得看看我们 捐款者 向导.
yarn install
yarn bootstrap
yarn dev
相关
创建于 约瑟夫·巴克布瓦