minimal-studio / deer-ui

Base on React's UI lib

@deer-ui

基于 React 的可扩展的 UI 库，快速、简易地开发 web 应用。

Feature

• 原子构建
• 基于 Flex 布局
• 表单控制器（FormController）
  • UI 表现与业务逻辑分离
• Table
  • 固定表头（Fxied Header）
  • 固定前后列（Fixed Column）
• 多终端支持
  • Desktop web
  • Mobile web
• 浏览器支持
  • Chrome
  • IE10+
  • Firfox
  • Safari
• 服务端渲染（SSR）
  • Gatsby
  • Next
• typescript 支持

Usage

@deer-ui/core

yarn add @deer-ui/core @mini-code/base-func

@deer-ui/core 扩展 UI 库，可选

yarn add @deer-ui/enhance-ui @deer-ui/core @mini-code/base-func

FormController quick start

import React, { useState } from 'react';
import {
  FormLayout, Button, Radio,
  FormOptions, FormLayoutBtnsConfig
} from '@deer-ui/core';

const FormLayoutDemo = () => {
  const [layout, setLayout] = useState('horizontal');
  const [resDesc, setResDesc] = useState('');

  const submit = (formData, actingRef) => {
    // 模拟获取数据
    setTimeout(() => {
      setResDesc({
        hasErr: false,
        resDesc: '成功'
      });
    }, 800);
  }

  const formBtns: FormLayoutBtnsConfig = [
    {
      action: (formRef, actingRef) => {
        submit(formRef.value, actingRef);
      },
      type: 'submit',
      text: 'Button',
      actingRef: 'forTest'
    },
  ];

  const formOptions: FormOptions = [
    {
      type: 'input',
      ref: 'InputField',
      defaultValue: '123',
    },
    {
      type: 'radio',
      ref: "RadioField",
      values: {
        radioValue1: 'radioText1',
        radioValue2: 'radioText2',
      }
    }
  ];

  return (
    <>
      <Radio
        onChange={nextLayout => setLayout(nextLayout)}
        defaultValue="horizontal"
        values={{
          'horizontal': '水平布局',
          'vertical': '垂直布局',
          'flow': '流布局',
        }} />
      <FormLayout
        layout={layout}
        formBtns={formBtns}
        onChange={(changedValues, ref, currChangeValue) => {

        }}
        formOptions={formOptions}/>
    </>
  );
}
ReactDOM.render(
  <FormLayoutDemo />,
  document.querySelector('#Main')
);

Local dev

git clone https://github.com/minimal-studio/deer-ui
cd deer-ui
yarn; yarn dev:doc

Reference

• Online Doc
• CHANGELOG