TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Chakra UI Vue – Build Accessible Vue.js Apps and Sites with Speed ️

2 点作者 codebender828大约 5 年前

1 comment

codebender828大约 5 年前
Hi, Vue.js dev fam!<p>I&#x27;m excited to bring you Chakra UI Vue! ️<p>Over the last few months I&#x27;ve created a component library that ships with accessible UI components whose goal is to make building accessible Vue apps and websites fast and fun! This project was inspired by the React version of Chakra UI by Segun Adebayo.<p>Documentation: <a href="https:&#x2F;&#x2F;vue.chakra-ui.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vue.chakra-ui.com&#x2F;</a> (Includes some live examples you can edit.)<p>Github Repository: <a href="https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui-vue" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui-vue</a> ️ Demos: - Vue: <a href="https:&#x2F;&#x2F;codesandbox.io&#x2F;s&#x2F;chakra-ui-vue-starter-2sy0g" rel="nofollow">https:&#x2F;&#x2F;codesandbox.io&#x2F;s&#x2F;chakra-ui-vue-starter-2sy0g</a> - Nuxt: <a href="https:&#x2F;&#x2F;codesandbox.io&#x2F;s&#x2F;chakra-ui-nuxt-demo-f8tq4" rel="nofollow">https:&#x2F;&#x2F;codesandbox.io&#x2F;s&#x2F;chakra-ui-nuxt-demo-f8tq4</a> - Gridsome: <a href="https:&#x2F;&#x2F;codesandbox.io&#x2F;s&#x2F;chakra-ui-gridsome-demo-038c9" rel="nofollow">https:&#x2F;&#x2F;codesandbox.io&#x2F;s&#x2F;chakra-ui-gridsome-demo-038c9</a><p>The core features thatChakra UI Vue has to offer are:<p>1. ️ Accessibility All UI components are WAI-ARIA compliant out of the box and can be adjusted as needed.<p>2. Constraint Based Design Chakra UI Vue components play well your design system tokens based on the Theme UI specification.<p>3. Composition All Chakra UI Vue components are built on top of composable UI primitives that consumers can also extend. A lot of the components also export compound components to allow you to change their UI layouts easily!<p>4. Style Props Yup! You guessed it. Chakra UI Vue is built on top of fast CSS-in-JS tools. This allows Chakra&#x27;s components to accept style declarations as props. You also get some really cool shorthands so your mac keyboard lasts longer Using style props to style your components :)<p>5. Dark&#x2F;Light mode support Most Chakra UI Vue components are are dark-mode compatible out of the box. With a simple function call you can toggle between dark and light modes easily.See Dark&#x2F;Light mode demo here on Codesandbox.<p>6. Nuxt.js support Nuxt.js is a Chakra UI Vue first class citizen. Check out the Codesandbox demos and the docs to see how to quickly get started with Chakra UI + Nuxt.js! Check out the Chakra UI Vue Nuxt Demo.