mallfoundry / taroify

Taroify 是移动端组件库 Vant 的 Taro 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

轻量、可靠的小程序端 Taro React UI 组件库

介绍

Taroify 是移动端组件库 Vant 的 Taro React 版本，两者基于相同的视觉规范，提供近似一致的 API 接口，助力开发者快速搭建小程序应用。

✨ 特性

• 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
• 💎 70+ 个高质量组件，覆盖移动端主流场景
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 💪 单元测试覆盖率超过 90%，提供稳定性保障
• 📖 提供完善的中文文档和组件示例
• 🍭 支持 React
• 🍭 支持主题定制，内置 700+ 个主题变量
• 🍭 支持按需引入和 Tree Shaking

浏览器支持

支持现代浏览器以及 Chrome >= 51、iOS >= 10.0。

安装

在现有项目中使用 Taroify 时，可以通过 npm 进行安装

npm i @taroify/core

当然，你也可以通过 yarn 或 pnpm 进行安装

yarn add @taroify/core

pnpm add @taroify/core

快速上手

import { Button } from "@taroify/core"
import "@taroify/core/button/style"

function Index() {
  return <Button color="primary">按钮</Button>
}

更多使用方式，请参考快速上手

贡献代码

修改代码请阅读我们的开发指南。

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。

微信交流群

备注 "taroify" 加好友后邀请进群

QQ 交流群：861675189

贡献者

• 部分图形设计来自 @BiscuitCoder

Vant 官方生态

由 Vant 官方团队维护的项目如下：

项目	描述
vant	Vant Vue 版
vant-weapp	Vant 微信小程序版
vant-demo	Vant 官方示例合集
vant-cli	开箱即用的组件库搭建工具
vant-icons	Vant 图标库
vant-touch-emulator	在桌面端使用 Vant 的辅助库

社区生态

由社区维护的项目如下，欢迎补充：

项目	描述
3lang3/react-vant	参照 Vant 打造的 React 移动端组件库
rc-ui-lib	参照 Vant 打造的 React 框架移动端组件库
vant-aliapp	Vant 支付宝小程序版
taroify	Vant Taro React 版
vant-theme	Vant 在线主题预览工具
@antmjs/vantui	基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React

赞助者

开发一个 UI 组件库是一项耗时的工作，尤其是要多端适配。Taroify 经常为此肝到深夜 ……

如果您认为 Taroify 帮助到了您的开发工作，您可以捐赠 Taroify 的研发工作，捐赠无门槛，哪怕是一杯可乐也好（相信这比打赏主播更有意义）。

支持者

@Yorksh1re @akazwz @Yang @coderYarn @蔡包 @王昆

鸣谢

Vant - 感谢 Vant 团队多年来的不断维护，让 Taroify 能够站在巨人的肩膀上。

WebStorm - 感谢 JetBrains 团队提供的集成开发环境，使得 Taroify 可以快速开发。

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源。

友情推荐

项目	描述
mockm	一款优雅解决前端开发过程中各种接口问题的 nodejs 工具
taro-hooks	为 Taro 而设计的 Hooks Library
tarojs-router-next	Taro 小程序路由库 / 自动生成带参数类型提示的路由方法 / 允许传递任意类型、任意大小的参数数据 / 同步的路由方法调用 / koa 体验一致的路由中间件

taroify's Issues

Taroify兼容h5如何配置

Taroify兼容h5如何配置。目前来看好像尺寸明显偏大一倍

Transition 在 enter 之前已挂载

自 0.0.15-alpha.7 版本后，将采用esm作为默认打包

Uploader.Image 新增 mode, alt, round 属性

Sticky 组件需要新增 onChange 事件

Sticky 组件需要新增 onChange 事件，对外提供组件吸顶状态是否变化。

组件在小程序端点击时会出现淡蓝色的矩形框

Tabs sticky 不能切换 Tab

新增 ConfigProvider 组件来支持动态修改主题样式

Tabbar 组件，当不设置图标时会存在一条红线的问题。

Tabs 滑动切换 Tab 没有效果

Tag 文档上面有 onClick 方法，但实际代码中并没有接受onClick

完善 Tabbar 组件

Tabbar 组件新增 fixed, placeholder, bordered 属性。
Tabbar.Item 组件新增 badge 属性。

@taroify/cli依赖了node-sass 需要替换为sass

@taroify/cli > @taroify/gulp > gulp-sass > node-sass

下拉PullRefresh 刷新结合list 在微信开发者工具，滚动条滑至底部 滚动触发加载数据，失效

import React, { useState, useEffect, useRef } from "react";
import { View } from "@tarojs/components";
import { useDidHide, useDidShow } from "@tarojs/taro";
import { Tabs, PullRefresh, List, Loading, Empty } from "@taroify/core";
import "@taroify/core/pull-refresh/index.scss";
import "@taroify/core/Tabs/index.scss";
import "@taroify/core/Empty/index.scss";
import "@taroify/core/loading/index.scss";
import "@taroify/core/List/index.scss";

function Information() {
const init = async () => {
console.log("请求 数据 >>> information");
};
useEffect(() => {
init();
}, []);

useDidShow(() => {
console.log("componentDidShow");
});

useDidHide(() => {
console.log("componentDidHide");
});
let list = [
{ label: "事件上报" },
{ label: "全民参与" },
{ label: "建议上报" },
];
const [hasMore, setHasMore] = useState(true);
const listRef = useRef([]);
const [loading, setLoading] = useState(false);
const [refreshing, setRefreshing] = useState(false);
const [activeKey, setActiveKey] = useState("0");
// 图标处理
// Tabs切换事件
function onChangeTabs(key) {
setActiveKey(key);
onRefresh();
// changeActiveKey(key);
}
// 下拉刷新
function onRefresh() {
setRefreshing(true);
setLoading(false);
listRef.current = [];
onLoad();
}
// 滚动刷新
const onLoad = () => {
setLoading(true);
setTimeout(() => {
setRefreshing(false);
for (let i = 0; i < 10; i++) {
const id = listRef.current.length + 1;
listRef.current.push({
text: "111111111",
img: '',
id: i % 2 != 0 || false,
Time: "2020-10-05",
});
}
setLoading(false);
setHasMore(listRef.current.length < 80);
}, 1000);
};
console.log(listRef.current, "=listRef.current==");
return (

<Tabs
sticky
activeKey={activeKey}
ellipsis={false}
onChange={({ key }) => onChangeTabs(key)}
>
{list.map((item, index) => (
<Tabs.TabPane key={index} title={item.label}>


{listRef.current.map((item, Index) => (
//
{Index}
))}
<List.Placeholder>
{loading && 加载中... }
{!hasMore && "没有更多了"}
</List.Placeholder>


</Tabs.TabPane>
))}


);
}
export default Information;

微信小程序, 引入datatimepicker报错.

用datetime-picker说没有index.scss`

Module not found: Can't resolve '@taroify/core/datetime-picker/index.scss' in xxxx

tarofiy 版本: "0.0.14-alpha.1"
系统: Windows10
Taro版本: 3.3.9

)

Uploader组件不显示默认图标

问题如题。

自定图按钮时可以如官网一般显示。

但是默认的相机图标和删除的×没渲染。

Tabs 使用 key 作为唯一标识存在设置 number 类型的 key 会转为 string 类型的问题

当在 <Tabs.TabPane key={0} /> 在内部解析时，key 会被 React 转换为 string 类型。所以将 key 替换为 value 属性。

Taroify for Alipay

组件Field不能输入name属性

不能将类型“{ name: string; }”分配给类型“IntrinsicAttributes & FieldProps”。
类型“IntrinsicAttributes & FieldProps”上不存在属性“name”。

话说什么时候发布正式版。

Navbar 组件替换 title 类型为 ReactNode

重命名组件中 'active*' 为 value 属性。

重命名所有组件中如：activeKey, activeValue, activeIndex 属性为 value 。

其中包括：

• DropdownMenu：重命名 activeKey 为 value 。
• Collapse：重命名 activeKey 为 value。
• Sidebar：重命名 activeKey 为 value。
• TreeSelect：重命名 activeTab 为 tabValue、 activeValue 为 value。

@taroify/icons 自动导入样式

NumberKeyboard 组件 classNames 导入方式有问题

和taro的mini-css-extract-plugin有兼容问题

版本：
@taroify/[email protected]
[email protected]

`WARNING in chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/@tarojs/mini-runner/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js??ref--5-oneOf-0-2!./node_modules/@tarojs/mini-runner/node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!./node_modules/@taroify/core/pull-refresh/index.scss
• css ./node_modules/@tarojs/mini-runner/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js??ref--5-oneOf-0-2!./node_modules/@tarojs/mini-runner/node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!./node_modules/@taroify/core/row/index.scss

WARNING in chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/@tarojs/mini-runner/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js??ref--5-oneOf-0-2!./node_modules/@tarojs/mini-runner/node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!./node_modules/@taroify/core/cell/index.scss
• css ./node_modules/@tarojs/mini-runner/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js??ref--5-oneOf-0-2!./node_modules/@tarojs/mini-runner/node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!./node_modules/@taroify/core/row/index.scss`

[建议]Dialog应该给选项调整z-index.

做了CustomTabBar希望可以遮挡住.
本身z-index调整到99999是可以挡住custom-tabbar的.
但是目前我看Dialog分了两个. 需要调整bg到99990, 然后前面的弹窗的为99999, 这样子能达到较好的效果

Tag 删除 textColor 属性，使用 CSS style 代替 textColor 属性。

在 taroify 中，可以 使用 css 解决的样式问题，将不在提供具体的属性。

删除 textColor 属性，使用 css s设置样式。

<Tag style={{ backgroundColor: "#7232dd" }} children="标签" />
<Tag style={{ backgroundColor: "#ffe1e1", color: "#ad0000" }} children="标签" />
<Tag style={{ color: "#7232dd" }} variant="outlined" children="标签" />

小程序在使用 CSSTransition 的 unmountOnExit 属性时存在渲染错乱的问题

使用 display none 替换 unmountOnExit

@taroify/icons 提供全部的 VanIcon 组件

使用tab组件ui有异常

如图，我的margin只对左边起作用，右边不起作用，
不用这个组件的时候，这个页面是正常的

Button 在 disabled 为 true 的情况下，依然可以点击

tabs 新增自定义选中classname

Toast 新增 position 属性

重复导入样式的问题

Image 提供 onClick 事件

Tabbar.Item 组件重命名为 Tabbar.TabItem

`Uploader.Image` 支持传入`Image`的`props`比如`mode`

其实可以考虑把UploaderImage分成UploaderImage和UploaderFile两个组件, 使用起来逻辑更清晰一些, 也方便定制

Sticky 缺少 onScroll 事件

会支持RN吗？

如题，会支持RN吗？

NoticeBar组件的样式在 @taroify/core/index.scss 中无引入

Tabs 需要增加 bottom-bar 子组件的 css var

按钮貌似没有继承原生属性？

例如利用按钮触发用户信息手机号获取,貌似button原属性没怎么支持

SwipeCell 存在动画卡顿的问题。

Taroify Release Build, css样式没有挂上去. DebugBuild一切正常

npm run build:weapp (taro build --type weapp "--watch") 运行结果

npm run build:weapp(taro build --type weapp) 运行结果

最小复现项目: https://github.com/wjxforu/taroify_mini_debug/tree/main/release_mode_error

TreeSelect 设置 className 无作用

如何自定义主题

在阿里小程序中使用组件引用组件会报错

原因： 组件中lodash使用方式问题,作者是否可以使用 import isBoolean from "lodash/isBoolean" 这种写法；要不然阿里小程序下使用会有问题

ActionSheet 按需导入样式有问题

Button 组件细边框存在样式问题

使用 css var() 提供自定义主题的功能