doga-design

v0.2.0

Published

3 years ago

doga-design React UI组件库

0High
0Medium
0Low

colin-online

React UI Components

🐶 简介

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>
  </>
);

| 属性 | 说明 | 类型 | 默认值 | | :------ | :------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | | btnType | 设置按钮类型 | primary success info warning danger link text default | default | | size | 设置按钮大小 | lg sm | - | | href | 点击跳转的地址，指定此属性 button 的 btnType 需同步设置为 link | string | - | | onClick | 点击按钮时的回调 | function | - |

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 文本框

| 属性 | 说明 | 类型 | 默认值 | | :------- | :------------------- | :-----------------------------: | :----: | | icon | 设置输入框的图标组件 | * | - | | size | 设置按钮大小 | lg sm | - | | prepend | 设置前置标签 | string | - | | append | 设置后置标签 | string | - | | disabled | 是否禁用状态 | boolean | false | | focus | 设置选中状态 | boolean | - |

TextArea 文本域

| 属性 | 说明 | 类型 | 默认值 | | :-------- | :----------- | :-----: | :----: | | showCount | 是否显示字数 | boolean | - | | maxLength | 内容最大长度 | number | - | | autosize | 自适应高度 | boolean | - | | disabled | 是否禁用状态 | boolean | false |

Number 数字框

| 属性 | 说明 | 类型 | 默认值 | | :------- | :----------- | :-----: | :----: | | disabled | 是否禁用状态 | boolean | false |

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账号试试？' />
  </>
);

| 属性 | 说明 | 类型 | 默认值 | | :--------------- | :----------------------------------------------------------------------------- | :------: | :----: | | fetchSuggestions | 返回输入建议的方法，可以拿到当前的输入，然后返回同步的数组或者是异步的 Promise | function | - | | onSelect | 点击选中建议项时触发的回调 | function | - | | renderOption | 支持自定义渲染下拉项，返回 ReactElement | array | - |

Slider 滑动条

import { Slider } from 'doga-design';

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

| 属性 | 说明 | 类型 | 默认值 | | :------- | :----------- | :-----: | :----: | | min | 最小值 | number | - | | max | 最大值 | number | - | | step | 步长 | number | - | | append | 后缀 | string | - | | disabled | 是否禁用状态 | boolean | false |

ColorPicker 选择器

import { ColorPicker } from 'doga-design';

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

| 属性 | 说明 | 类型 | 默认值 | | :------ | :------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | | title | 标题 | string | - | | defaultColor | 默认颜色| string | - | | defaultColorList | 默认颜色列表 | arrary | - |

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 />
  </>
);

| 属性 | 说明 | 类型 | 默认值 | | :----------- | :--------------- | :-----: | :----: | | className | 样式名称 | string | - | | title | 标题 | string | - | | visible | 显示隐藏 | boolean | - | | maskClosable | 点击蒙层是否关闭 | boolean | - |

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>
  </>
);

| 属性 | 说明 | 类型 | 默认值 | | :------------------ | :-------------------------------------- | :-------------------------------------------: | :---------------------: | | defaultIndex | 默认 active 的菜单项的索引值 | string | - | | mode | 菜单类型横向或者纵向 | horizontal vertical | horizontal | | defaultOpenSubMenus | 设置子菜单的默认打开只在纵向模式下生效 | array | - | | className | 下拉菜单的扩展类名 | string | - |

MenuItem

| 属性 | 说明 | 类型 | 默认值 | | :-------- | :--------------------- | :-----: | :----: | | index | - | string | - | | disabled | 选项是否被禁用 | boolean | - | | className | 下拉菜单选项的扩展类名 | string | - |

SubMenu

| 属性 | 说明 | 类型 | 默认值 | | :-------- | :----------------------- | :----: | :----: | | title | 下拉菜单选项的文字 | string | - | | className | 下拉菜单子菜单的扩展类名 | string | - |

📧 召唤作者

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

电子邮箱：[email protected]