agileh-ui: agileh-ui 组件库一个关于前端程序员进阶的组件库项目，只会用算什么？自己写才是真本事👏👏👏👏👏 大家共同努力呀

`下载: git clone https://gitee.com/zxy_cns/agileh-ui.git`
<br />
`运行环境: node 14.*`

## Button

```jsx
const [count, setCount] = React.useState(0);
<div>
  <p>Clicked {count} times</p>
  <Button
    onClick={(e) => {
      setCount(count + 1);
    }}
  >
    Button
  </Button>
</div>;
```

```jsx
const kinds = ['primary', 'secondary', 'success', 'danger', 'default'];
const sorts = ['line', 'flat'];

sorts.map((sort) => {
  return (
    <div key={sort}>
      <h3>sort: {sort}</h3>
      {kinds.map((kind) => (
        <Button key={kind} sort={sort} kind={kind} className="button-item">
          {kind}
        </Button>
      ))}
    </div>
  );
});
```

```jsx
const sizes = ['s', 'm', 'l'];

sizes.map((size) => (
  <Button key={size} size={size} className="button-item">
    按钮
  </Button>
));
```

```jsx
<Button disabled className="button-item">不可点击</Button>
<Button sort="flat" disabled>不可点击</Button>
```

```jsx
<Button loading>加载中</Button>
```

## CheckBox

```jsx
import React, { useState } from 'react';
import CheckBox from './index';

const [state, setstate] = useState([]);

const onChange = (a) => {
  console.log(a);
};

<div>
  <CheckBox check={true} onChange={onChange}>
    哈哈哈
  </CheckBox>
  <CheckBox disabled onChange={onChange}>
    嘻嘻嘻
  </CheckBox>
</div>;
```

## CheckBoxGroup

```jsx
const onChange = (checkedValues) => {
  console.log('checked = ', checkedValues);
};

<div>
  <h4>结合CheckBoxGroup使用</h4>
  <CheckBoxGroup defaultValue={['Apple']} options={plainOptions} onChange={onChange} />
  <div>------------</div>
  <CheckBoxGroup
    disabled
    defaultValue={['Apple']}
    options={options}
    onChange={onChange}
  />
  <div>------------</div>
  <CheckBoxGroup
    defaultValue={['Apple']}
    options={optionsWithDisabled}
    onChange={onChange}
  />
</div>;
```

## CreateTable

```jsx
import Row from './ItemRow';
import Col from './ItemCol';
<div>
  <CreateTable>
    <Row layout={'aa'}>
      <Col span={19}>
        <Row>
          <Col span={4}>姓名</Col>
          <Col span={12}>王明</Col>
          <Col span={4}>民族</Col>
          <Col span={4}>汉</Col>
        </Row>

{/* colSpan 向下合并几列 */}
      <Col span={5} colSpan={4} addBorder={['bottom', '#00000']}>
        <img
          style={{ width: '80%' }}
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F08%2F20161108110532_SR4P8.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639209590&t=1ec94f0d805d9f17e6824f9acd9656f6"
          alt=""
          srcset=""
        />
      </Col>
    </Row>

<Row>
      <Col span={19}>
        <Row>
          <Col span={4}>通讯地址</Col>
          <Col removeBorder={['right', 'top', 'left']} span={20}>
            河南省郑州市XXXXXX哈哈哈
          </Col>
        </Row>
      </Col>
      <Col addBorder={['bottom']} span={5}></Col>
    </Row>

<Row>
      <Col span={19}>
        <Row>
          <Col span={4} colSpan={2}>
            报考志愿
          </Col>
          <Col removeBorder={['right', 'top', 'left']} span={20}>
            <Row>
              <Col span={12}>专业名称</Col>
              <Col span={12}>专业代码</Col>
            </Row>
            <Row>
              <Col span={12}>工商管理</Col>
              <Col span={12}>120201</Col>
            </Row>
          </Col>
        </Row>
      </Col>
      <Col span={5}>
        <Row layout={'vertical'}>
          <Col removeBorder={['right']}>学历层次</Col>
          <Col removeBorder={['right']}>专科升本科</Col>
        </Row>
      </Col>
    </Row>

<Row>
      <Col removeBorder={['right']} span={24}>
        入学考试成绩
      </Col>
    </Row>
    <Row>
      <Col span={8}>大学英语</Col>
      <Col span={8}>大学英语</Col>
      <Col span={8}>大学英语</Col>
    </Row>
    <Row>
      <Col span={8}>140</Col>
      <Col span={8}>130</Col>
      <Col span={8}>270.0</Col>
    </Row>
  </CreateTable>
</div>;
```

## Form

```jsx
import { useRef } from 'react';
import Form from './index';
import Field from './Field';
import Button from '../Button';
import { isEmpty } from 'loadsh';
import Input from '../Input';
import IMG1 from '../Input/bz.png';
import IMG2 from '../Input/bql.png';

const formRef = useRef(null);

<div>
  <Form ref={formRef} ruleArrs={rules} onSubmit={onSubmit} onReset={onReset}>
    <Field name="username" label="账号">
      <Input suffix={<img src={IMG2} alt="" />} prefix={<img src={IMG1} alt="" />} />
    </Field>
    <Field name="password" label="密码">
      <input type="password" />
    </Field>
    <Field name="again" label="确认密码">
      <Input
        disabled
        suffix={<img src={IMG2} alt="" />}
        prefix={<img src={IMG1} alt="" />}
      />
    </Field>
    <Field>
      <Button className={'agileh_ui_submit'} type="success" sort="flat" htmlType="submit">
        提交
      </Button>
      <Button type="danger" sort="flat" htmlType="reset">
        重置
      </Button>
    </Field>
  </Form>
</div>;
```

## Icon

```jsx
<div>
  <div>icon 组件使用的react Icon 请参考： https://react-icons.github.io/react-icons/</div>
</div>
```

## Input

```jsx
import Input from './index';

<div>
  <div>普通用法</div>
  <Input placeholder="请输入" style={{ width: '320px', marginTop: '30px' }} />
</div>;
```

```jsx
import IMG2 from './bql.png';
import IMG3 from './bg.png';
import IMG4 from './jz.png';
import IMG1 from './bz.png';
<div>
  <div>前缀</div>
  <Input
    style={{ width: '320px', marginTop: '30px' }}
    placeholder="请输入"
    prefix={<img src={IMG1} alt="" />}
  />
  <Input
    style={{ width: '320px', marginTop: '30px' }}
    placeholder="请输入"
    suffix={<img src={IMG2} alt="" />}
    prefix={<img src={IMG1} alt="" />}
    suffixClick={(ref) => {
      console.log('rers ===> ', ref);
    }}
  />
</div>;
```

```jsx
import Input from './index';
import IMG2 from './bql.png';
<div>
  <div>禁用</div>
  <Input
    style={{ width: '320px', marginTop: '30px' }}
    suffixClick={(ref) => {
      console.log('rers ===> ', ref);
    }}
    disabled
    placeholder="请输入"
    suffix={<img src={IMG2} alt="" />}
  />
</div>;
```

## xMessage

```jsx
import { useState } from 'react';
import Button from '../Button';
import xMessage from '.';

<div>
  <Button
    sort="flat"
    kind="success"
    onClick={() => {
      xMessage.pop({ type: 'success', content: 'success' });
    }}
  >
    success
  </Button>
  &nbsp;
  <Button
    sort="flat"
    kind="primary"
    onClick={() => {
      xMessage.pop({ type: 'info', content: 'info' });
    }}
  >
    info
  </Button>
  &nbsp;
  <Button
    sort="flat"
    kind="danger"
    onClick={() => {
      xMessage.pop({ type: 'error', content: 'error' });
    }}
  >
    error
  </Button>
  &nbsp;
  <Button
    sort="flat"
    kind="default"
    onClick={() => {
      xMessage.pop({ type: 'warning', content: 'warning' });
    }}
  >
    warning
  </Button>
</div>;
```

## Modal

```jsx
import { useState } from 'react';
import Button from '../Button';
const [visible, setVisible] = useState(false);

<div>
  <Button
    sort="flat"
    kind="success"
    onClick={() => {
      setVisible(true);
    }}
  >
    打开
  </Button>
  <Modal
    visible={visible}
    title={'Hi, Welcom To Agileh Ui'}
    onOk={() => setVisible(false)}
    onCancel={() => setVisible(false)}
    // footer={null}
  >
    12456
  </Modal>
</div>;
```

## Radio

```jsx
import React, { useState } from 'react';
import Radio from './index';
const [selectV, setSelectv] = useState(123);

<div>
  <div>单独使用</div>
  <Radio
    disabled
    defaultValue={selectV}
    value={123}
    onChange={(e) => {
      setSelectv(e);
    }}
  >
    男
  </Radio>
  <Radio
    defaultValue={selectV}
    value={456}
    onChange={(e) => {
      setSelectv(e);
    }}
  >
    女
  </Radio>
  <Radio
    disabled
    defaultValue={selectV}
    value={789}
    onChange={(e) => {
      setSelectv(e);
    }}
  >
    未知
  </Radio>
</div>;
```

```jsx
import RadioGroup from './RadioGroup';
const options = [
  { value: 123, label: 123 },
  { value: 456, label: 456 },
  { value: 789, label: 789, disabled: true },
];

<div>
  <div>结合RadioGroup使用</div>
  <RadioGroup
    options={options}
    radioItemChange={(v) => {
      console.log('v ====> 选择了 ', v);
    }}
    button={true}
    defaultValue={123}
  />
</div>;
```

```jsx
import RadioGroup from './RadioGroup';
const options = [
  { value: 123, label: 123 },
  { value: 456, label: 456 },
];

<div>
  <RadioGroup
    options={options}
    radioItemChange={(v) => {
      console.log('v ====> 选择了 ', v);
    }}
    defaultValue={123}
  />
</div>;
```

## Select

```jsx
import React from 'react';
import Select from './index';
import Option from './Option';
import IMG1 from '../Input/bg.png';
import IMG2 from '../Input/bz.png';
<div>
  <div id="area">
    <h1>在特定盒子内</h1>
    <Select
      getPopupContainer={() => document.getElementById('area')}
      style={{ width: '220px', marginTop: '30px' }}
    >
      <Option prefix={<img src={IMG2} alt="" />} label="第一" value="1"></Option>
      <Option label="第二" value="2"></Option>
      <Option label="第三" value="3"></Option>
      <Option label="第四" value="4"></Option>
    </Select>
    <div className="areaClass"></div>
  </div>
  <div>
    <h1>不在特定盒子内</h1>
    <Select style={{ width: '220px', marginTop: '30px' }}>
      <Option prefix={<img src={IMG2} alt="" />} label="第一" value="1"></Option>
      <Option label="第二" value="2"></Option>
      <Option label="第三" value="3"></Option>
      <Option label="第四" value="4"></Option>
    </Select>
  </div>
  <div>
    <h1>设置默认值</h1>
    <Select style={{ width: '220px', marginTop: '30px' }} defaultValue={'1'}>
      <Option prefix={<img src={IMG2} alt="" />} label="第一" value="1"></Option>
      <Option label="第二" value="2"></Option>
      <Option label="第三" value="3"></Option>
      <Option label="第四" value="4"></Option>
    </Select>
  </div>
</div>;
```

## Table

```jsx
import Button from '../Button';

## 固定表头和首列

```jsx
const dataSource = [
  { key: '1', name: '胡彦斌', age: 32, address: '高新区电子商务产业园' },
  { key: '2', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '2', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '3', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '4', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '5', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '6', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '7', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '8', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '9', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
  { key: '10', name: '胡彦祖', age: 42, address: '高新区电子商务产业园' },
];
const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '住址', dataIndex: 'address', key: 'address' },
];
<Table dataSource={dataSource} columns={columns} fiexdHead={true} fiexdFirst={true} />;
```

## MaskLogin 全局弹窗

全局登录蒙版,不使用路由跳转登录,而是直接渲染到当前页面,登陆后执行指定的回调,使用方法为 API 式调用,类似 antd 的 model.confirm()

```jsx
import MaskLogin from './index';
import Button from '../Button';
const loginShow = () => {
  MaskLogin({
    // 打开登录弹窗钩子
    open() {
      console.log('打开弹窗回调 ===> ');
    },
    // 弹窗关闭后钩子
    close() {
      console.log('关闭弹窗回调 ===> ');
    },
    // 登录成功
    success(uInfo) {
      console.log('uInfo 登陆成功回调  ====> ', uInfo);
    },
    // 登录失败
    fail(err) {
      console.log('err ====> 登陆失败回调 ', err);
    },
  });
};
<div>
  <Button onClick={() => loginShow()} kind="success" sort="flat">
    打开登录全局弹窗
  </Button>
</div>;
```

## 组件库展示 GIF

zhaoxiangyu/agileh-ui

简介

发行版

贡献者

近期动态

zhaoxiangyu/agileh-ui .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

zhaoxiangyu/agileh-ui