Yoshino

Yoshino

¡Componentes de interfaz de usuario de PC livianos flexibles construidos en React!

¡Cualquiera puede generar fácilmente todo tipo de temas!

Inglés | ?? 简体中文

? Documentos

Documento

?Uso

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

Uso de CSS a través de importación:

 import 'yoshino/lib/index.css'

?Instalar

Usando NPM:

 npm install yoshino --save

? Temas

¡Yoshino ofrece el sitio del tema, los desarrolladores pueden compartir Yoshino-Theme con otros! ¿Cómo compartir sus temas? Sigue los pasos a continuación:

• Use Yoshino-Cli para genera la plantilla de tema y haz lo que quieras
• Sube tuyos temas a Github
• Bifurca este representante y edición de docs/pages/themes/index.tsx para agregar su msg de tema
• luego retire la solicitud
• fusione y puede buscar su tema en el sitio del tema

¿Desarrollan usar estos temas? Haga clic en Yoshino-Cli

? ¿Cómo diseñar?

Yoshino es similar a Hexo. Los diferentes componentes de estilo de Yoshino son iguales a Hexo Diversos tema, Hexo Oficial solo proporciona un conjunto de herramientas y un tema básico. Yoshino también es tal.

Los desarrolladores pueden generar los componentes del estilo que necesitan, al igual que la configuración del tema Hexo. Incluso puede usar CLI para emitir múltiples estilos de componentes diferentes en el mismo proyecto.

La comunidad de código abierto debe completar diferentes temas de Yoshino, y el funcionario proporcionará un sitio de tema Yoshino similar para mostrar diferentes temas, similares a Hexojs/Site

Actualmente, la herramienta Yoshino-CLI solo admite salidas de creación de componentes, como la creación de componentes de alerta personalizados.

 yoshino new Alert

Más tarde, Yoshino-CLI puede generar componentes de especificación correspondientes a través de instrucciones similares a las siguientes, como la salida del componente de alerta de la especificación de material-UI.

 yoshino new Alert --theme material-ui

Incluso una biblioteca de componentes que genera directamente todo el tema.

 yoshino new all --theme material-ui

Características

• Desarrollar con TypeScript , proporcionar archivos d.ts para ayudar a los desarrolladores a aumentar la velocidad de desarrollo
• Abogue el concepto de OFA(one for all) y AFO(all for one) , antes del desarrollo del proyecto por Yoshino-Cli. Según la interfaz de usuario del Proyecto, estandarice la salida de componentes.
• Además del componente ui simple y genérico, yoshino extrae algunos de los componentes de efectos más utilizables (características), como
  • Ayudantes
  • Onda
  • Transiciones
• Componente Icon basado en arqueros-svgs, carga a pedido, solo carga .svg que usa

? Contribuyentes

? Proceso de desarrollo

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

? Enlaces del ecosistema

• yoshino-cli
• Yoshino-Docs

? Yoshino está inspirado o alimentado por:

• Archer-SVGS
• diseño de hormigas
• musa-ui
• revisión
• Ionicones