antsev-ui v0.0.4

antsev-ui

antsev react component lib

Usage

使用 pnpm 安装

pnpm add antsev-ui

组件引用

import * as React from 'react';
import { 
  Demo,
  Input,
  Form, 
  FormItem,
  Button,
  Select, 
  useForm,
  RadioGroup,
  Radio,
  Checkbox,
  CheckboxGroup,
} from 'antsev-ui'

export default () => {
  const form = useForm({
    initialValues: {
      name:'',
      sex: '',
      radios: 1964,
      keys: [],
      radio: '',
      isProgress: false,
    },
    onSubmit: (values) => {
    },
  })

  const mockOptions = [
    {
      label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
      value: 1964,
    },
    { label: 'The Great Dictator', value: 1940 },
    { label: 'The Lives of Others', value: 2006 },
    { label: 'Grave of the Fireflies', value: 1988 },
    { label: 'Paths of Glory', value: 1957 },
    { label: 'Django Unchained', value: 2012 },
    { label: 'The Shining', value: 1980 },
  ]

  const handleChange = (e) => {
    console.log('----')
  }

  return (
    <Demo>
      <Demo grey>
        {JSON.stringify(form.values)}
      </Demo>
    
      <Form {...form}>
        <FormItem
          label='名称'
          required
          name='name'
          max={10}
        />
        <FormItem
          label='性别'
          name='sex'
          required
          options={mockOptions}
        />
        <FormItem 
          name='radios' 
          sx={{ height: 'auto'}}
        >
          <RadioGroup row={false} onChange={handleChange} options={mockOptions} />
        </FormItem>
      </Form>
      
      <Button onClick={form.handleReset} variant='outlined' sx={{ mr:1 }}>
          重置
      </Button>
      <Button onClick={form.handleSubmit}>
        提交
      </Button>
    </Demo>
  )

}

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# check your project for potential problems
$ pnpm run doctor