Yoshino

Yoshino

灵活的轻型PC UI组件建立在React上！

任何人都可以通过它轻松生成各种主题！

英语| ??简体中文

文档

文档

？用法

 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>
  )
}

通过导入使用CSS：

 import 'yoshino/lib/index.css'

？安装

使用NPM：

 npm install yoshino --save

主题

Yoshino提供主题场所，开发人员可以与其他人分享Yoshino-theme！如何分享您的主题？请执行以下步骤：

• 使用yoshino-cli进行主题模板并做您想做的事
• 将您的主题上传到GitHub
• 叉这个代表并编辑docs/pages/themes/index.tsx添加您的主题味精
• 然后提取请求
• 合并，您可以在主题站点上搜索主题

开发想要使用这些主题？

如何设计？

Yoshino与Hexo相似。Yoshino的不同样式组件与Hexo的各种主题相同，Hexo官员只提供一组工具和基本主题。 Yoshino也是如此。

开发人员可以输出所需的样式的组件，就像配置六边形主题一样。您甚至可以使用CLI在同一项目中输出多种不同样式的组件。

开源社区需要完成不同的Yoshino主题，该官员将提供类似的Yoshino-theme网站来显示不同的主题，类似于Hexojs/网站

当前，Yoshino-CLI工具仅支持组件创建输出，例如创建自定义警报组件。

 yoshino new Alert

稍后，Yoshino-CLI可以通过类似于以下指令输出相应的规范组件，例如输出材料-UI规范的警报组件。

 yoshino new Alert --theme material-ui

即使是直接输出整个主题的组件库。

 yoshino new all --theme material-ui

特征

• 使用TypeScript开发，提供d.ts文件以帮助开发人员提高开发速度
• 在Yoshino-Cli的项目开发之前，提倡OFA(one for all)和AFO(all for one)的概念。根据Project UI，标准化组件的输出。
• 除了简单且通用的ui组件外， yoshino还提出了一些更可用的效果（功能）组件，例如
  • 帮助者
  • 波纹
  • 过渡
• 基于Archer-SVG的Icon组件，按需加载，仅加载.svg您使用

？

开发过程

 npm run dev // 启动开发环境
npm run new ComponentName // 新建组件

？生态系统链接

• Yoshino-cli
• Yoshino-Docs

吉诺的启发或支持：

• 弓箭手
• 蚂蚁设计
• Muse-ui
• iview
• 离子