doga-design v0.2.0

🐶 简介

doga-design 是基于 Doga Design 设计体系的 UI 组件库，主要用于研发企业级产品，献给那些热爱前端开发的程序猿们。

✨ 特性

• 📦 开箱即用的高质量 React UI 组件
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件
• 🎨 一个懂设计的前端开发工程师倾力打造

🛡 TypeScript

使用 TypeScript 开发，提供完整的类型定义文件，建议在 TypeScript 项目中使用

推荐使用 colin-cli 研发脚手架 or react 官方脚手架创建项目：

colin-cli（推荐）

1.安装

npm install -g @colin-cli/core

2.运行命令

colin-cli init [projectName]

react（强烈推荐）

npx create-react-app doga-demo-ts --template typescript

📦 安装

运行命令：

npm install doga-design --save

yarn add doga-design

引入样式：

import 'doga-design/dist/index.css';

🔨 组件示例

Button 按钮

import { Button } from 'doga-design';

const App = () => (
  <>
    <Button>Default Button</Button>
    <Button btnType='primary' size='lg'>
      Primary Button
    </Button>
    <Button btnType='text'>Text Button</Button>
    <Button btnType='link' href='https://github.com/colin-online/doga-design'>
      Link Button
    </Button>
  </>
);

Inpu 输入框

import { Input } from 'doga-design';

const App = () => (
  <>
    <Input value='东林' />
    <Input disabled />
    <Input size='lg' />
    <Input prependIcon={<SearchIcon />} appendIcon={<ClearIcon />} />
    <Input prepend='http://' append='.com' />
    <Input.TextArea />
    <Input.Number />
  </>
);

Input 文本框

TextArea 文本域

Number 数字框

AutoComplete 自动完成

import { AutoComplete } from 'doga-design';

const handleFetch = (query: string) => {
  return fetch(`https://api.github.com/search/users?q=${query}`)
    .then((res) => res.json())
    .then(({ items }) => {
      console.log(items);
      return items.slice(0, 10).map((item: any) => ({ value: item.login, ...item }));
    });
};

const App = () => (
  <>
    <AutoComplete fetchSuggestions={handleFetch} onSelect={(e) => console.log(e)} placeholder='输入你的Github账号试试？' />
  </>
);

Slider 滑动条

import { Slider } from 'doga-design';

const App = () => (
  <>
    <Slider min={1} max={100} step={1} append='px' />
  </>
);

ColorPicker 选择器

import { ColorPicker } from 'doga-design';

const App = () => (
  <>
    <ColorPicker title='文字颜色' defaultColor='#ffffff' defaultColorList={[ hex: '#ffffff', rgba: 'rgba(255,255,255,1)']} />
  </>
);

Switch 选择器

import { Switch } from 'doga-design';

const App = () => (
  <>
    <Switch checked={false} onChange={val => console.log(val)} />
    <Switch.Icon checked={false} icon={<i className='iconfont icon-color' />} />
    <Switch.IconMore
      checked='center'
      options={[
        { icon: <i className='iconfont icon-color' />, value: 'left' },
        { icon: <i className='iconfont icon-cloud-upload' />, value: 'center' },
        { icon: <i className='iconfont icon-upload' />, value: 'right' },
      ]}
      onChange={val => console.log(val)}
    />
  </>
);

Select 选择器

import { Select } from 'doga-design';

const App = () => (
  <>
    <Select
      checked={false}
      appendIcon={<i className='iconfont icon-switch' />}
      options={[
        { index: 0, value: '"SimSun","STSong"', label: '宋体宋体宋体宋体', icon: <i className='iconfont icon-loading' /> },
        { index: 1, value: '"SimHei","STHeiti"', label: '黑体', icon: <i className='iconfont icon-loading' /> },
        { index: 2, value: '"KaiTi","STKaiti"', label: '楷体楷体', icon: <i className='iconfont icon-loading' /> },
        { index: 3, value: '"FangSong","STFangsong"', label: '仿宋', icon: <i className='iconfont icon-loading' /> },
      ]}
    />
  </>
);

Json 数据源

import { Select } from 'doga-design';

const dataSource = {
  name: 'colin',
  age: 18,
}

const App = () => (
  <>
    <Json selectedList={[{ name: 'biPv', namespace: [], type: 'string', value: '' }]} dataSource={dataSource} onChange={val => console.log(val)} />
  </>
);

Popup 弹出层

import { Popup } from 'doga-design';

const App = () => (
  <>
    <Popup title='标题' maskClosable />
  </>
);

Image 图片

import { Image } from 'doga-design';

const App = () => (
  <>
    <Image
      title='标题'
      cloud={
       {
          Bucket: 'xxxxxx',
          Region: 'xxxxxx',
          SecretId: 'xxxxxx',
          SecretKey: 'xxxxxx',
          folderName: 'xxxxxx',
       }
      }
      isReplace
      isCropper
      isTint
      isRestore
      isRemove
    />
  </>
);

CloudUpload OSS 上传

import { CloudUpload } from 'doga-design';

const App = () => (
  <>
    <CloudUpload
      cloud= {
        {
          Bucket: 'xxxxxx',
          Region: 'xxxxxx',
          SecretId: 'xxxxxx',
          SecretKey: 'xxxxxx',
          folderName: 'xxxxxx',
        }
      },
      onProgress={e => console.log(e)}
      onError={e => console.log(e)}
      onChange={e => console.log(e)}
      accept='image/*'
      drag
    />
  </>
);

Upload 上传(手动/拖拽)

import { Upload } from 'doga-design';

const App = () => (
  <>
    <Upload
      action='https://jsonplaceholder.typicode.com/posts'
      name='file'
      onProgress={(e) => console.log('onProgress', e)}
      onSuccess={() => console.log('onSuccess')}
      onError={() => console.log('onError')}
      onChange={() => console.log('onChange')}
      onRemove={() => console.log('onRemove')}
      beforeUpload={(file) => console.log(file)}
      accept='.jpg'
      multiple
      drag
    >
      ...
    </Upload>
  </>
);

Menu 导航菜单

import { Menu } from 'doga-design';

const App = () => (
  <>
    <Menu defaultIndex='0' defaultOpenSubMenus={[]} mode='horizontal' onSelect={function noRefCheck() {}}>
      <Menu.Item>下拉选项</Menu.Item>
      <Menu.Item>下拉选项</Menu.Item>
      <Menu.Item disabled>禁用</Menu.Item>
      <Menu.SubMenu title='下拉选项'>
        <Menu.Item>下拉选项一</Menu.Item>
        <Menu.Item>下拉选项二</Menu.Item>
      </Menu.SubMenu>
    </Menu>
  </>
);

Menu

MenuItem

SubMenu

📧 召唤作者

如果您在使用的过程中碰到问题，可直接通过以下方式联系我

电子邮箱：80868215@qq.com