Yoshino

โยชิโน

ส่วนประกอบ UI PC ที่มีน้ำหนักเบายืดหยุ่นสร้างขึ้นบน 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-cli เพื่อ genearate และทำสิ่งที่คุณต้องการ
• อัปโหลดธีมของคุณไปยัง GitHub
• แยกตัวแทนและแก้ไข docs/pages/themes/index.tsx เพื่อเพิ่มชุดรูปแบบของคุณ
• จากนั้นดึงคำขอ
• ผสานและคุณสามารถค้นหาธีมของคุณในเว็บไซต์ธีม

การพัฒนาต้องการใช้ธีมเหล่านี้หรือไม่คลิก Yoshino-cli

? วิธีการออกแบบ?

โยชิโน่มีความคล้ายคลึงกับ Hexo ส่วนประกอบสไตล์ที่แตกต่างกันของโยชิโน่เท่ากับ Hexo ชุดรูปแบบต่าง ๆ ， Hexo Official เพียงให้ชุดเครื่องมือและชุดรูปแบบพื้นฐาน โยชิโนก็เป็นเช่นนั้น

นักพัฒนาสามารถส่งออกส่วนประกอบของสไตล์ที่ต้องการเช่นเดียวกับการกำหนดค่าธีม Hexo คุณสามารถใช้ CLI เพื่อส่งออกส่วนประกอบหลายรูปแบบในโครงการเดียวกัน

ธีมที่แตกต่างกันของโยชิโนจะต้องเสร็จสิ้นโดยชุมชนโอเพ่นซอร์สและเจ้าหน้าที่จะจัดเตรียมสิ่งที่คล้ายกันของโยชิโน-ธีมเพื่อแสดงธีมที่แตกต่างกันคล้ายกับ hexojs/ไซต์

ปัจจุบันเครื่องมือ Yoshino-CLI รองรับการสร้างส่วนประกอบเท่านั้นเช่นการสร้างส่วนประกอบการแจ้งเตือนที่กำหนดเอง

 yoshino new Alert

ต่อมา Yoshino-CLI สามารถส่งออกองค์ประกอบข้อกำหนดที่สอดคล้องกันผ่านคำแนะนำที่คล้ายกับต่อไปนี้เช่นการส่งออกองค์ประกอบการแจ้งเตือนของข้อกำหนดของวัสดุ -ui

 yoshino new Alert --theme material-ui

แม้แต่ไลบรารีส่วนประกอบที่ส่งออกธีมทั้งหมดโดยตรง

 yoshino new all --theme material-ui

คุณสมบัติ

• พัฒนาด้วย TypeScript ให้ไฟล์ d.ts เพื่อช่วยให้นักพัฒนาเพิ่มความเร็วในการพัฒนา
• สนับสนุนแนวคิดของ OFA(one for all) และ AFO(all for one) ก่อนการพัฒนาโครงการโดย Yoshino-cli ตาม Project UI ให้มาตรฐานผลลัพธ์ของส่วนประกอบ
• นอกเหนือจากองค์ประกอบ ui ที่เรียบง่ายและทั่วไปแล้ว yoshino ยังดึงส่วนประกอบ (คุณสมบัติ) ที่ใช้งานได้ดีกว่าเช่น
  • ผู้ช่วย
  • ระลอกคลื่น
  • การเปลี่ยนผ่าน
• ส่วนประกอบ Icon ขึ้นอยู่กับ archer-SVGs โหลดตามความต้องการโหลด .svg ที่คุณใช้เท่านั้น

?

กระบวนการพัฒนา

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

ลิงค์ระบบนิเวศ

• โยชิโนคลี
• โยชิโน-ดอคส์

? โยชิโนได้รับแรงบันดาลใจหรือขับเคลื่อนโดย:

• Archer-SVGS
• การออกแบบมด
• Muse-ui
• iview
• ไอออนนิกอน