cuke ui

Cuke-Ui

Пользовательский интерфейс огурца: библиотека пользовательского интерфейса подключаемой игры и игры

? Происхождение имени

Cuke (огурец), обычный овощ. Я надеюсь, что этот проект станет общей зависимостью (хотя это невозможно). Среди них огурец также соответствует цели этой библиотеки компонентов: подключи и игра, за которым следует Кук, гомофоничный (Cool KE). В цвете темы Cool Li Jinke в цвете используется зеленый, свежий и милый огурец. Компонент заимствует (плагиаты) дизайн муравья и разработал эту библиотеку компонентов с целью обучения.

? Онлайн демонстрация

https://cuke-ui.github.io/cuke-ui/

⚡ Установить

Используя NPM

 npm i cuke-ui --save

Используйте пряжу

 yarn add cuke-ui

Используя CDN

 < link rel =" stylesheet " href =" https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.css " >
< script type =" text/javascript " src =" https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.js " > </ script > 

Как использовать

1. Все введены

 import React from "react"
import { Button } from "cuke-ui"
import "cuke-ui/dist/cuke-ui.min.css"

class Page extends React . Component {
  render ( ) {
    return (
      < Button type = "primary" >黄瓜ui </ Button >
    )
 }
}

2. Представьте по требованию

 import Button from 'cuke-ui/lib/button' ;
import 'cuke-ui/lib/button/style' ;

3. Используя вабель-плугин-импорт

 // .babelrc.js
module . exports = {
  plugins : [
    [ "babel-plugin-import" , {
      "libraryName" : "cuke-ui" ,
      "libraryDirectory" : "es" ,
      "style" : true
    } , 'cuke-ui' ] , 
  ]
}

// 多个组件库
module . exports = {
  plugins : [
    [ "babel-plugin-import" , {
      "libraryName" : "cuke-ui" ,
      "libraryDirectory" : "es" ,
      "style" : true
    } , 'cuke-ui' ] , 
    
    [ "babel-plugin-import" , {
      "libraryName" : "antd" ,
      "libraryDirectory" : "es" ,
      "style" : true
    } , 'antd' ] , 
  ]
}

Обновление журнала

Изменение

? благодарный

• @Yuhan Zhong
• @Caraws
• @Canvascao
• @licc

? Спецификации дизайна

Высокий имитационный муравей

? Кто его использует

• Смелые люди
• Сам
• Коттедж Ли Цзиньке

? Ссылочное колесо

• муравей
• Гулу
• Дракон-Уи

? Местное развитие

Пожалуйста, установите NPM I -G пряжа сначала

1. Зависимости установки

Если вы не можете получить доступ к Интернету с научной точки зрения, вы можете использовать реестр конфигурации Taobao Mirror Yarn https://registry.npm.taobao.org

 git clone https://github.com/cuke-ui/cuke-ui.git
cd cuke-ui
yarn

2. Запустите сервер разработки

Основано на сборнике рассказов, что такое сборник рассказов?

 yarn dev

3. Посетите http: // localhost: 8080

4. Разработать компоненты

Справочные components/button

Создайте новый компонент в components (имя компонента соответствует имени файла) и возьмите структуру каталога компонентов button в качестве примера

• Компоненты
  • кнопка // компонентная папка
    • __tests__ // Единый тест
      • __snapshots__ // ui снимок
      • index.test.js // Файл тестирования
    • index.js // логика компонентов - style.js // Загрузка по требованию требует использования
    • styles.less // Стиль компонента

Затем создайте новую button.js в каталоге stories

• истории
  • button.js // Файл документов рассказов

 //button.js
import React from 'react' ;
import { storiesOf } from '@storybook/react' ;
import Button from '../components/button' ;          //引入你的组件
import { withInfo } from '@storybook/addon-info' ;

storiesOf ( '示例标题' , module )
 . add ( 'Button 按钮' , withInfo ( ) ( ( ) => (         // 添加到页面上
   < Button type = "primary" >获取文字</ Button >   // 这里写jsx
 ) ) )

Наконец -то добавьте письменный файл сборника рассказов в конфигурацию

.storybook> config.js

 import { configure } from '@storybook/react' ;
function loadStories ( ) {
  require ( '../stories/button' ) ;     //刚才写好的文件
}

configure ( loadStories , module ) ;

Это завершает storybook , добавит компоненты, которые вы написали на страницу, и автоматически генерируют документ описания (на самом деле, это, по сути, веб-точка Dev-Server)

В конце экспортируйте компоненты в components/index.js для легкой публикации

 export { default as Button } from "./button" ; 

? Лицензия

Грань