@digitalc/gomo-ui

React gomo-design Component.

Feature

• React life cycle support @digitalc/gomo-ui component

Install

npm install @digitalc/gomo-ui

Usage

import { Button } from '@digitalc/gomo-ui';
import "@digitalc/gomo-ui/umd/gomo-ui.min.css"

const Demo = () => {

    return (
        <div style={{ margin: 20 }}>
            <div>
                <Button>
                    Create Button
                </Button>
              </div>

            <div style={{ height: 200 }} />
        </div>
    );
};

export default Demo;

🔥 Button API

我们使用 TypeScript 创建类型定义。您可以直接在 IDE 中查看。但您仍然可以在 这里 检查类型定义。

Button

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | id | string | (选填) | 按钮的唯一标识符 | | type | 'primary' \| 'secondary' \| 'tertiary' \| 'warning' \| 'danger' | 'primary' | 按钮的类型 | | icon | React.ReactNode | - | 按钮前面的图标 | | block | boolean | false | 是否将按钮设置为块级元素 | | circle | boolean | false | 是否将按钮设置为圆形 | | children | React.ReactNode | - | 按钮的内容 | | disabled | boolean | false | 是否禁用按钮 | | className | string | - | 自定义类名 | | iconPosition | 'left' \| 'right' | 'left' | 图标的位置 | | loading | boolean | false | 是否显示加载状态 | | htmlType | 'button' \| 'reset' \| 'submit' | 'button' | 原生 HTML 按钮类型 | | size | 'default' \| 'small' \| 'large' | 'default' | 按钮的尺寸 | | style | React.CSSProperties | - | 自定义样式 | | theme | 'solid' \| 'borderless' \| 'light' \| 'outline' | 'light' | 按钮的主题 | | prefixCls | string | - | 按钮的前缀类名 | | onClick | React.MouseEventHandler<HTMLButtonElement> | noop | 点击按钮时的回调 | | onMouseDown | React.MouseEventHandler<HTMLButtonElement> | noop | 鼠标按下时的回调 | | onMouseEnter | React.MouseEventHandler<HTMLButtonElement> | noop | 鼠标进入时的回调 | | onMouseLeave | React.MouseEventHandler<HTMLButtonElement> | noop | 鼠标离开时的回调 | | 'aria-label' | React.AriaAttributes['aria-label'] | - | 按钮的可访问性标签 | | contentClassName | string | - | 按钮内容的自定义类名 | | 'x-gemo-prop' | string | - | 自定义属性 | | 'x-gemo-children-alias' | React.ReactNode | - | 自定义子元素别名 |