mini-ui

基于 Taro V3 版本打造的微信小程序 UI 库

安装

# yarn
yarn add @vyron/mini-ui

# npm
npm install @vyron/mini-ui

使用

样式

// app.less 全局样式
@import "../node_modules/@vyron/mini-ui/style/index.css";

组件

import React from "react;
import { Appbar } from "@vyron/mini-ui";
import backIcon from "@Images/appbar/back-white-icon.png";
import homeWhiteIcon from "@Images/appbar/home-white-icon.png";
// 局部样式 tsx文件引入
import "../node_modules/@vyron/mini-ui/style/appbar.css";
import "./index.less"

class Home extends React.Component {
    render(){
        return (
        <AppBar
            type="white"
            title="首页"
            left={{
                isCover: true,
                localImage: true,
                style: {
                width: "18rpx",
                height: "30rpx",
                },
                type: backIcon,
            }}
            right={{
                isCover: true,
                localImage: true,
                style: {
                width: "34rpx",
                height: "34rpx",
                },
                type: homeWhiteIcon,
            }}
            onTitleClick={console.log}
            onLeftClick={console.log}
            onRightClick={console.log}
            backgroundColor="#00ab84"
        />
        )
    }
}

// 按需引入文件  index.less
@import "../node_modules/@vyron/mini-ui/style/appbar.css";

计划

组件	说明	状态
AppBar	自定义顶部导航栏	✅
Authorize	获取授权	✅
Carousel	轮播图	✅
Divider	分隔符	✅
Empty	空白	✅
Icon	iconfont	✅
Image	图片	✅
Loading	加载	✅
Grid	栅格布局	✅
Overlay	遮罩	✅
Transition	过渡动画	✅
Cell	单元格	⬜️
Field	输入框	⬜
Form	Form 表单	⬜️
List	列表	⬜️
Button	按钮	⬜️
Message	提示	⬜️
Modal	对话框	⬜️

预览

扫描二维码预览

开源协议

本项目基于 MIT 协议