Yoshino: 基于 React 可定制化的 PC 组件库

2018-09-20 10:26:58 +08:00
 ShanaMaid

Github: https://github.com/Yoshino-UI/Yoshino

Docs: https://yoshino-ui.github.io/#/

Cli-Tool: https://github.com/Yoshino-UI/yoshino-cli

安利一个自己写的组件库,欢迎大家指正,star 来者不拒,pr 也多多益善!

设计思路

Yoshino 本质上类似于 Hexo,不同的主题组件类似于 Hexo 的各种 theme,hexo 官方仅提供了一套工具以及一个基础主题,Yoshino 也是如此。

开发者只需要结合 yoshino-cli 就能像配置 Hexo 主题一样输出不同风格的组件。

而不同主题的 Yoshino 需要开源社区完成,官方提供类似的 yoshino-theme-site 来展示不同的主题,类似于 hexojs/site

特性

使用 TypeScript 开发,提供 d.ts 文件帮助开发者提高开发速度

不同项目开发前可以通过 yoshino-cli 根据项目 ui 规范进行定制化开发产出。

除了简单通用的 ui 组件,yoshino 抽离出了一些易用性比较高的特效(功能)组件,例如

Icon组件的图标库采用了Ionicons 4.4.2,对图标的导入采用按需加载,你无须担心仅使用了一个字体就引入了所有图标文件。

安装

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>
  )
}
1836 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/491083

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX