- Github: https://github.com/Yoshino-UI/Yoshino
- Docs: https://yoshino-ui.github.io/#/
- Cli-Tool: https://github.com/Yoshino-UI/yoshino-cli
安利一个自己写的组件库, 欢迎大家指正, star 来者不拒, pr 也多多益善!
更多内容请移步 Github, thanks!
设计思路
Yoshino 本质上类似于 Hexo, 不同的主题组件类似于 Hexo 的各种 theme,hexo 官方仅提供了一套工具以及一个基础主题, Yoshino 也是如此.
开发者只需要结合 https://github.com/Yoshino-UI/yoshino-cli 就能像配置 Hexo 主题一样输出不同风格的组件.
而不同主题的 Yoshino 需要开源社区完成, 官方提供类似的 yoshino-theme-site https://yoshino-ui.github.io/#/docs/theme 来展示不同的主题, 类似于 https://github.com/hexojs/site
特性
使用 TypeScript 开发, 提供 d.ts 文件帮助开发者提高开发速度
不同项目开发前可以通过 https://github.com/Yoshino-UI/yoshino-cli 根据项目 ui 规范进行定制化开发产出.
除了简单通用的 ui 组件, yoshino 抽离出了一些易用性比较高的特效 (功能) 组件, 例如
- Helpers
- Ripple
- Transitions
安装
npm install yoshino
复制代码
使用方法
- import * as React from 'react';
- import { Button } from 'yoshino';
- export default function () {
- return (
- <div>
- <Button type="primary">Primary</Button>
- <Button>Default</Button>
- <Button type="dashed">Dashed</Button>
- <Button type="danger">Danger</Button>
- </div>
- )
- }
复制代码
来源: https://juejin.im/post/5b922fbce51d450e7e511f96