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
• 離子