Button 按钮

按钮组件

type 默认为 default 按钮，primary 表示主要按钮，link 表示无边框按钮， unstyle 表示不带任何样式的按钮（方便自己定制）

danger属性代表带有警告意味的按钮

ghost 属性代表幽灵按钮，适用于有背景的情况下，会将背景改为透明并且按钮反色

size属性 预设3种按钮大小

loading属性 表示按钮加载中，禁用点击事件

disabled属性 表示按钮禁用中

基本使用

收起源代码

import { Button, Space } from '@dance-ui/ui'
import React from 'react'

export default () => (
  <Space direction="vertical">
    <Space>
      type 默认为 default 按钮，primary 表示主要按钮，link 表示无边框按钮， unstyle 表示不带任何样式的按钮（方便自己定制）
      <Button>Default</Button>
      <Button type="primary">Primary</Button>
      <Button type="link">Link</Button>
      <Button type="unstyle">Unstyle</Button>
    </Space>
    danger属性代表带有警告意味的按钮
    <Space>
      <Button danger>Default Danger</Button>
      <Button type="primary" danger>
        Primary Danger
      </Button>
      <Button type="link" danger>
        Link Danger
      </Button>
    </Space>
    ghost 属性代表幽灵按钮，适用于有背景的情况下，会将背景改为透明并且按钮反色
    <Space bgColor="black" style={{ padding: 10 }}>
      <Button ghost>Default</Button>
      <Button type="primary" ghost>
        Primary
      </Button>
      <Button type="link" ghost>
        Link
      </Button>
      <Button ghost danger>
        Default
      </Button>
      <Button type="primary" ghost danger>
        Primary
      </Button>
      <Button type="link" ghost danger>
        Link
      </Button>
    </Space>
    size属性 预设3种按钮大小
    <Space align="center">
      <Button size="small">small</Button>
      <Button>Middle</Button>
      <Button size="large">Large</Button>
    </Space>
    loading属性 表示按钮加载中，禁用点击事件
    <Space>
      <Button loading>Default</Button>
      <Button type="primary" loading>
        Primary
      </Button>
      <Button type="link" loading>
        Link
      </Button>
      <Button type="unstyle" loading>
        Unstyle
      </Button>
    </Space>
    disabled属性 表示按钮禁用中
    <Space>
      <Button disabled>Default</Button>
      <Button type="primary" disabled>
        Primary
      </Button>
      <Button type="link" disabled>
        Link
      </Button>
      <Button type="unstyle" disabled>
        Unstyle
      </Button>
    </Space>
  </Space>
)

演示

type

默认为 default 按钮

default 表示默认按钮，primary 表示主要按钮，link 表示无边框按钮， unstyle 表示不带任何样式的按钮（方便自己定制）

组件源码

组件源码

import classNames from 'classnames'
import { CSSProperties, forwardRef, LegacyRef, ReactNode, useMemo } from 'react'
import Loading, { LoadingProps } from '../Loading'
import { twMerge } from 'tailwind-merge'

export type ButtonProps = {
  /** 按钮类型 */
  type?: 'default' | 'primary' | 'link' | 'unstyle'
  /** 按钮大小 */
  size?: 'large' | 'middle' | 'small'
  /** 点击事件 */
  onClick?: () => void
  /** 是否为危险按钮（红色警告） */
  danger?: boolean
  /** 是否为幽灵按钮 */
  ghost?: boolean
  /** 是否禁用 */
  disabled?: boolean
  /** 是否加载中 */
  loading?: boolean

  /** 组件额外的 CSS className */
  className?: string
  /** 组件额外的 CSS style */
  style?: CSSProperties

  /** 子组件 */
  children?: ReactNode

  /** Loading图标 CSS className */
  iconClassName?: string
  /** Loading图标参数 */
  loadingIconProps?: LoadingProps
}

const ButtonClass = {
  sizeClass: {
    large: 'py-2 px-5',
    middle: 'py-1 px-4',
    small: 'px-1',
  },
  typeClass: {
    default: 'border-dd-primary text-dd-primary enabled:hover:opacity-80',
    primary: 'border-dd-primary bg-dd-primary text-white enabled:hover:opacity-80',
    link: 'border-transparent enabled:hover:text-dd-primary',
  },
  ghostClass: {
    default: 'border-white text-white enabled:hover:border-dd-primary enabled:hover:text-dd-primary',
    primary: 'border-dd-primary bg-transparent text-dd-primary enabled:hover:opacity-80',
    link: 'border-transparent text-white enabled:hover:text-dd-primary',
  },
  dangerClass: {
    default: 'border-dd-danger text-dd-danger enabled:hover:opacity-80',
    primary: 'border-dd-danger bg-dd-danger text-white enabled:hover:opacity-80',
    link: 'border-transparent text-dd-danger enabled:hover:opacity-80',
  },
}

const Button = forwardRef(function ButtonInner(
  {
    type,
    size,
    className,
    onClick,
    disabled,
    danger,
    ghost,
    loading,
    style,
    children,
    iconClassName,
    loadingIconProps,
  }: ButtonProps,
  ref: LegacyRef<HTMLButtonElement>,
) {
  const { sizeClass, typeClass, dangerClass, ghostClass } = ButtonClass
  const _disabled = disabled || loading
  const _chooseClass = useMemo(() => {
    if ((danger && ghost) || danger) return dangerClass
    else if (ghost) return ghostClass
    else return typeClass
  }, [danger, dangerClass, ghost, ghostClass, typeClass])
  return (
    <button
      ref={ref}
      className={
        type === 'unstyle'
          ? className
          : twMerge(
              classNames(
                'box-border border transition focus:outline-none',
                sizeClass[size ?? 'middle'],
                _chooseClass[type ?? 'default'],
                _disabled ? 'disabled:cursor-not-allowed disabled:opacity-60' : 'cursor-pointer',
              ),
              className,
            )
      }
      style={style}
      onClick={_disabled ? undefined : onClick}
      disabled={_disabled}>
      <Loading show={loading} className={twMerge('mr-2', iconClassName)} {...loadingIconProps} />
      {children}
    </button>
  )
})
Button.defaultProps = {
  type: 'default',
  size: 'middle',
  loading: false,
  disabled: false,
}
export default Button