V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ShanaMaid
V2EX  ›  前端开发

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

  •  
  •   ShanaMaid ·
    ShanaMaid · 2018-09-20 10:26:58 +08:00 · 1978 次点击
    这是一个创建于 2263 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 抽离出了一些易用性比较高的特效(功能)组件,例如

    • Helpers
    • Ripple
    • Transitions

    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>
      )
    }
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2764 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 12:40 · PVG 20:40 · LAX 04:40 · JFK 07:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.