Skip to content

minimal-studio/deer-ui

Repository files navigation

@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