avalon-material-ui

avalon-material-ui

安装方法

npm install avalon-material-ui

Button 按钮

• api:将原生的href属性改成了可选，其他参数和material-ui一样

ButtonGroup 按钮组

• api:将原生的component属性改成了可选，其他参数和material-ui一样

Checkbox 复选框

• api:将原生的checked属性名称改为了value，所有控件统一使用value和onChange，其他参数和material-ui一样

DatePicker 日期选择器

• api:

interface Props {
    className?: string      //根组件样式的className
    style?: CSSProperties   //根组件样式的style

    type: datepickerType    //日期类型，支持日/秒/月，'day' | 'second' | 'month'
    value: valueType        //控件值，{ start: Date; end?: Date }
    onChange: onChangeType  //值改变时触发的事件，(v: valueType) => void

    disabled?: boolean      //是否禁用，默认false
    prefix?: ReactNode      //前置文字
    isRange?: boolean       //是否为范围时间，包含开始和结束，默认false
}

Dialog 对话框

• api:

interface Props {
    className?: string                                              //根组件样式的className
    style?: CSSProperties                                           //根组件样式的style

    onClose: ModalProps['onClose']                                  //关闭时触发的事件
    open: ModalProps['open']                                        //打开状态
    title: ReactNode                                                //顶部的标题

    content?: ReactNode                                             //中间的内容
    actions?: ReactNode                                             //底部的按钮组

    classes?: classes                                               //以下全为material-ui的Dialog参数
    disableBackdropClick?: ModalProps['disableBackdropClick']       
    disableEscapeKeyDown?: ModalProps['disableEscapeKeyDown']
    fullScreen?: DialogProps['fullScreen']
    fullWidth?: DialogProps['fullWidth']
    maxWidth?: DialogProps['maxWidth']
    onBackdropClick?: ModalProps['onBackdropClick']
    onEnter?: TransitionHandlerProps['onEnter']
    onEntered?: TransitionHandlerProps['onEntered']
    onEntering?: TransitionHandlerProps['onEntering']
    onEscapeKeyDown?: ModalProps['onEscapeKeyDown']
    onExit?: TransitionHandlerProps['onExit']
    onExited?: TransitionHandlerProps['onExited']
    onExiting?: TransitionHandlerProps['onExiting']                 //以上全为material-ui的Dialog参数

    [propName: string]: any

    onClick?(v: any): void                                          //点击时触发的事件
}

MiniDrawer 小抽屉

• api:

interface FirstLi {                                                    //第一级目录结构
    id: string
    name: string
    icon: string
    open: boolean
    ol: Array<SecondLi>
}

interface SecondLi {                                                   //第二级目录结构
    id: string
    name: string
    component: FunctionComponent<any>
    minFrontVersion?: string
}

type Menu = Array<FirstLi>

interface Props {
    drawerOpen: boolean                                                 //打开状态
    menu: Menu                                                          //左侧菜单
    onDrawerOpenChange: (v: boolean) => void                            //打开状态改变时触发的事件
    onMenuChange: (v: Menu) => void                                     //左侧菜单改变时触发的事件
}

Select 下拉框

• api:

interface Props {
    className?: string                                                  //根组件样式的className
    style?: CSSProperties                                               //根组件样式的style

    data: Array<                                                        //下拉框的列表数据
        | string
        | number
        | { id: string | number; name: string | number | ReactNode }
    >
    value: string | number | object | undefined                         //下拉框的值

    onChange(v: any): void                                              //下拉框的值改变时触发的事件
}

Table 表格

• api:

interface Props {
    className?: string                                  //根组件样式的className
    style?: CSSProperties                               //根组件样式的style

    columns: Array<Column>                              //表格的列，{id: string,name: string,show: boolean}
    value: Array<object>                                //表格的值
    dence?: boolean                                     //是否为紧凑型，默认false
}