@tangbin/theme

临时主题库

TODO： 建立一套类似于 Element UI 的主题库功能

Install

# npm
npm install --save @tangbin/theme

# yarn
yarn add @tangbin/theme

Usage

主题库正在建设中，目前只有 light 系的主题

// 引入样式
import '@tangbin/theme/dist/light/normalize.less';
import '@tangbin/theme/dist/light/ant-design/index.less';

// 使用变量
import '@tangbin/theme/dist/light/variables.less';
import '@tangbin/theme/dist/light/ant-design/variables.less';

.test {
  font-size: @font-size-12;
}

Docs

• 通用变量
• ant design 变量

示例

通用样式

<div class="title">...</div>

Modal + Form（ant design 的弹出框+表单提交）

import React, { FC } from 'react';
import { Modal, Button, Form, Input, Select } from 'antd';

const { Item } = Form;
const { TextArea } = Input;
const { Option } = Select;

const Index: FC = () => {
  const [form] = Form.useForm();

  return (
    <>
      // 请使用centered属性和600的宽度
      <Modal centered width={600} title="单列表单测试">
        <Form layout="vertical" form={form}>
          <Item label="test1" name="test1">
            <Input />
          </Item>
          <Item label="test1" name="test1">
            <Input />
          </Item>
          <Item label="test1" name="test1">
            <Input />
          </Item>
        </Form>
      </Modal>
      // 请使用centered属性、width=740 & className=ant-modal-two-cols
      <Modal centered width={740} title="2列表单测试" className="ant-modal-two-cols">
        <Form layout="vertical" form={form}>
          <Item label="test1" name="test1">
            <Input />
          </Item>
          <Item label="test1" name="test1">
            <Input />
          </Item>
          <Item label="test1" name="test1">
            <TextArea />
          </Item>
          // 如果出现需要独占一行的元素，如TextArea，则需要使用空白占位元素进行填充
          <Item className="hidden" />
          <Item label="test1" name="test1">
            <Input />
          </Item>
        </Form>
      </Modal>
      // 请使用centered属性、width=1100 & className=ant-modal-three-cols
      <Modal centered width={1100} title="3列表单测试" className="ant-modal-three-cols">
        <Form layout="vertical" form={form}>
          <Item label="test1" name="test1">
            <Input />
          </Item>
          <Item label="test1" name="test1">
            <Input />
          </Item>
          <Item label="test1" name="test1">
            <TextArea />
          </Item>
          // 如果出现需要独占一行的元素，如TextArea，则需要使用空白占位元素进行填充
          <Item className="hidden" />
          <Item className="hidden" />
          <Item label="test1" name="test1">
            <Input />
          </Item>
        </Form>
      </Modal>
    </>
  );
};

export default Index;