psaren / Taro Ui Vue
Licence: mit
UI KIT for Taro/vue
Stars: ✭ 160
Labels
Projects that are alternatives of or similar to Taro Ui Vue
React Native Sass Transformer
Use Sass to style your React Native apps.
Stars: ✭ 151 (-5.62%)
Mutual labels: scss
Now Ui Dashboard
Now UI Dashboard - Open Source Admin Template
Stars: ✭ 155 (-3.12%)
Mutual labels: scss
Hacker101
Source code for Hacker101.com - a free online web and mobile security class.
Stars: ✭ 12,246 (+7553.75%)
Mutual labels: scss
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-3.75%)
Mutual labels: scss
Skeleton Sass
Skeleton Sass is a highly modular version of Skeleton CSS
Stars: ✭ 151 (-5.62%)
Mutual labels: scss
Bootstrap Dark
Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!
Stars: ✭ 158 (-1.25%)
Mutual labels: scss
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-3.12%)
Mutual labels: scss
Whimsical
A curated list of websites with an extra bit of fun.
Stars: ✭ 153 (-4.37%)
Mutual labels: scss
Live Resume
Stand out of the crowd by showing a professional website/resume. Building fast and easy the best Personal Web Application resume!
Stars: ✭ 158 (-1.25%)
Mutual labels: scss
Active material
ActiveAdmin skin based on Google's Material Design
Stars: ✭ 156 (-2.5%)
Mutual labels: scss
Kudosplease
A simple Kudos widget with no dependencies. And it's free.
Stars: ✭ 160 (+0%)
Mutual labels: scss
Shopify Webpack Themekit
Shopify development tool using webpack and themekit
Stars: ✭ 157 (-1.87%)
Mutual labels: scss
taro-ui-vue
项目背景
tarojs
已经开始支持 vue
去写 taro 应用了,由于缺少相关的 ui 库,因此决定 按照 taro-ui 重写成 vue
组件。
形成了 taro-ui-vue
这个库。
相关链接
使用注意
Taro Ui Vue 提供的是源文件,源文件部分代码使用 ts
编写,需要项目支持 ts。
如果是用 taro init
命令创建,则需在使用时选择 ts
。
安装
npm i -S taro-ui-vue
使用
按需引入
// page.js
import { AtButton } from 'taro-ui-vue'
// OR
import AtButton from 'taro-ui-vue/src/components/button/index.vue'
按需引入样式
// js
import 'taro-ui-vue/dist/style/components/tag.scss'
// css
@import "~taro-ui/dist/style/components/button.scss";
示例
<template>
<view class="index">
<AtTag>标签</AtTag>
<AtIcon value="clock" color="#F00"></AtIcon>
</view>
</template>
<script>
import { AtTag, AtIcon } from 'taro-ui-vue'
import 'taro-ui-vue/dist/style/components/icon.scss'
import 'taro-ui-vue/dist/style/components/tag.scss'
export default {
name: 'Index',
components: {
AtTag,
AtIcon,
}
}
</script>
全局引入所有组件
// app.js
import TaroUiVue from 'taro-ui-vue/src'
import 'taro-ui-vue/dist/style/index.scss'
Vue.use(TaroUiVue)
onXXX 属性示例
在 .vue 文件 template 中需要按下面这样写
<template>
<view>
<AtTag
type="primary"
:on-click="handleClick"
>
标签
</AtTag>
</view>
</template>
更多使用方式
更多组件使用及属性请参考 taro-ui 使用文档
所有参数基本一致
TODO
- 为组件添加测试用例
CHANGELOG
贡献
如果你在使用 Taro-UI-Vue 时遇到问题,或者有好的建议,欢迎给我们提 Issue 或 Pull Request。在开始之前,请阅读 贡献指南
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].