Yoshino

Yoshino

Componentes leves flexíveis de interface do usuário do PC construídos no React!

Qualquer um pode gerar facilmente todos os tipos de temas por isso!

Inglês | ?? 简体中文

? Docs

Documentos

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

Usando CSS via importação:

 import 'yoshino/lib/index.css'

?Instalar

Usando NPM:

 npm install yoshino --save

? Temas

Yoshino oferece o site temático, os desenvolvedores podem compartilhar o tema Yoshino com os outros! Como compartilhar seus temas? Siga as etapas abaixo:

• Use Yoshino-Cli para generar o modelo de tema e fazer o que quiser
• Carregue seus temas para o GitHub
• Fork este representante e edite docs/pages/themes/index.tsx para adicionar seu tema msg
• Em seguida, puxe a solicitação
• mesclar e você pode pesquisar seu tema no tema

Desenvolve que deseja usar esses temas? Clique em Yoshino-cli

? Como projetar?

Yoshino é semelhante ao Hexo. Os diferentes componentes de estilo de Yoshino são iguais a hexo vários temas ， O oficial hexo fornece apenas um conjunto de ferramentas e um tema básico. Yoshino também é tal.

Os desenvolvedores podem gerar os componentes do estilo de que precisam, assim como a configuração do tema Hexo. Você pode até usar a CLI para produzir vários estilos diferentes de componentes no mesmo projeto.

Diferentes temas de Yoshino precisam ser concluídos pela comunidade de código aberto, e o funcionário fornecerá um site Yoshino-Theme semelhante para mostrar temas diferentes, semelhante ao Hexojs/site

Atualmente, a ferramenta Yoshino-Cli suporta apenas saídas de criação de componentes, como a criação de componentes de alerta personalizados.

 yoshino new Alert

Posteriormente, o Yoshino-Cli pode produzir componentes de especificação correspondentes através de instruções semelhantes às seguintes, como a saída do componente de alerta da especificação de material-UI.

 yoshino new Alert --theme material-ui

Mesmo uma biblioteca de componentes que produz diretamente o tema inteiro.

 yoshino new all --theme material-ui

Características

• Desenvolva com TypeScript , forneça arquivos d.ts para ajudar os desenvolvedores a aumentar a velocidade de desenvolvimento
• Advocar o conceito de OFA(one for all) e AFO(all for one) , antes do desenvolvimento do projeto por Yoshino-Cli. De acordo com o Projeto UI, padronize a saída dos componentes.
• Além do componente ui simples e genérico, yoshino extrai alguns dos componentes (recursos) mais utilizáveis, como como
  • Ajudantes
  • Ripple
  • Transições
• Componente Icon baseado em arqueiro-svgs, carga sob demanda, apenas carrega .svg que você usa

? Contribuos

? Processo de desenvolvimento

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

? Links do ecossistema

• Yoshino-cli
• Yoshino-Docs

? Yoshino é inspirado ou alimentado por:

• Archer-SVGS
• design de formigas
• Muse-Ui
• IView
• Ionicons