npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uiw/react-button

v4.22.3

Published

Button component

Downloads

1,709

Readme

Button 按钮

Buy me a coffee Open in unpkg NPM Downloads npm version

按钮用于开始一个即时操作,触发业务逻辑时使用。

import { Button, ButtonGroup } from 'uiw';
// or
import Button from '@uiw/react-button';
import ButtonGroup from '@uiw/react-button-group';

基本用法

import React from 'react';
import { Button, Divider, Icon } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Button type="primary">主要按钮</Button>
      <Button type="success">成功按钮</Button>
      <Button type="warning">警告按钮</Button>
      <Button type="danger">错误按钮</Button>
      <Button type="light">亮按钮</Button>
      <Button type="dark">暗按钮</Button>
      <Divider />
      <Button basic type="primary">主要按钮</Button>
      <Button basic type="success">成功按钮</Button>
      <Button basic type="warning">警告按钮</Button>
      <Button basic type="danger">错误按钮</Button>
      <Button basic type="light">亮按钮</Button>
      <Button basic type="dark">暗按钮</Button>
      <Divider />
      <Button>Normal</Button>
      <Button disabled>Disabled</Button>
      <Button type="primary" active>Button</Button>
      <Button type="primary" size="small">more <Icon type="down" /></Button>
      <Button type="link"> (超连接样式)link </Button>
    </div>
  );
}

按钮组

import React from 'react';
import { Button, Divider, ButtonGroup } from 'uiw';

export default function Demo() {
  return(
    <div>
      <ButtonGroup>
        <Button type="primary">主要按钮</Button>
        <Button type="success">成功按钮</Button>
        <Button type="warning">警告按钮</Button>
        <Button type="danger">错误按钮</Button>
        <Button type="light">亮按钮</Button>
        <Button type="dark">暗按钮</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button size="small" type="primary">按钮</Button>
        <Button size="small" type="primary">按钮</Button>
        <Button size="small" type="primary">按钮</Button>
        <Button size="small" type="primary">按钮</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button type="light">按钮</Button>
        <Button type="light">按钮</Button>
        <Button type="light">按钮</Button>
        <Button type="light">按钮</Button>
      </ButtonGroup>
      <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
      <ButtonGroup>
        <Button icon="copy" type="primary">复制</Button>
        <Button icon="delete" type="success">删除</Button>
        <Button icon="file-add" type="warning">添加文件</Button>
        <Button icon="map" type="danger">地图</Button>
        <Button icon="linux" type="light">Linux</Button>
        <Button icon="apple" type="dark">Apple</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button icon="copy" type="primary">复制</Button>
        <Button icon="delete" type="primary">删除</Button>
        <Button icon="file-add" type="primary">添加文件</Button>
        <Button icon="map" type="primary">地图</Button>
        <Button icon="linux" type="primary">Linux</Button>
        <Button icon="apple" type="primary">Apple</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button icon="copy">复制</Button>
        <Button icon="delete">删除</Button>
        <Button icon="file-add">添加文件</Button>
        <Button icon="map">地图</Button>
        <Button icon="linux">Linux</Button>
        <Button icon="apple">Apple</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button icon="copy" />
        <Button icon="delete" />
        <Button icon="file-add" />
        <Button icon="map" />
        <Button icon="linux" />
        <Button icon="apple" />
      </ButtonGroup>
    </div>
  );
}

图标按钮

import React from 'react';
import { Button, Icon, Divider } from 'uiw';

const chat = <svg width="20" height="20" viewBox="0 0 20 20"> <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" /> </svg>;
const open = <svg width="12" height="16" style={{ height: 16 }}> <path fillRule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z" /> </svg>;
const merged = <svg width="12" height="16" viewBox="0 0 12 16" style={{ height: 16 }}> <path fillRule="evenodd" d="M10 7c-.73 0-1.38.41-1.73 1.02V8C7.22 7.98 6 7.64 5.14 6.98c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 .99C.89.99 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.67c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z" /> </svg>;
const closed = <svg viewBox="0 0 16 16" width="16" height="16"> <path fillRule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z" /> </svg>;

export default function Demo() {
  return(
    <div>
      <Button icon="weibo" type="primary">主要按钮</Button>
      <Button icon="chrome" type="success">成功按钮</Button>
      <Button icon="taobao" type="warning">警告按钮</Button>
      <Button icon="weibo" type="danger" />
      <Button type="danger">
        <Icon type="reload" spin={true} />
        <span>错误<span>按钮</span></span>
        <Icon type="weibo" />
      </Button>
      <Button icon="chrome" type="light">亮按钮</Button>
      <Button icon="apple" type="dark">暗按钮</Button>
      <Button icon={chat} type="dark">暗按钮</Button>
      <Divider style={{ maxWidth: 220 }}>GitHub</Divider>
      <Button icon={open} type="success">Open</Button>
      <Button icon={merged} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button>
      <Button icon={closed} type="danger">Closed</Button>
    </div>
  );
}

按钮加载状态

import React from 'react';
import { Button, Icon, Divider } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Button type="danger">
        <Icon type="reload" spin={true} />
        <span>错误<span>按钮</span></span>
        <Icon type="weibo" />
      </Button>
      <Button loading type="primary">主要按钮</Button>
      <Button loading type="success">成功按钮</Button>
      <Button loading type="warning">警告按钮</Button>
      <Button loading type="danger">错误按钮</Button>
      <Button loading type="light">亮按钮</Button>
      <Button loading type="dark">暗按钮</Button>
      <Button loading type="danger">亮按钮</Button>
      <Divider style={{ maxWidth: 220 }}>Size</Divider>
      <Button loading size="small" type="primary">主要按钮</Button>
      <Button loading size="default" type="success">成功按钮</Button>
      <Button loading size="large" type="warning">警告按钮</Button>
    </div>
  );
}

禁用按钮组

import React from 'react';
import { Button, ButtonGroup, Divider } from 'uiw';

export default function Demo() {
  return(
    <div>
      <ButtonGroup>
        <Button disabled type="primary">主要按钮</Button>
        <Button disabled type="success">成功按钮</Button>
        <Button disabled type="warning">警告按钮</Button>
        <Button disabled type="danger">错误按钮</Button>
        <Button disabled type="light">亮按钮</Button>
        <Button disabled type="dark">暗按钮</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button disabled type="primary">按钮</Button>
        <Button disabled type="primary">按钮</Button>
        <Button disabled type="primary">按钮</Button>
        <Button disabled type="primary">按钮</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button disabled type="light">按钮</Button>
        <Button disabled type="light">按钮</Button>
        <Button type="light">按钮</Button>
        <Button disabled type="light">按钮</Button>
      </ButtonGroup>
      <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
      <ButtonGroup>
        <Button disabled icon="copy" type="primary">复制</Button>
        <Button disabled icon="delete" type="success">删除</Button>
        <Button disabled icon="file-add" type="warning">添加文件</Button>
        <Button disabled icon="map" type="danger">地图</Button>
        <Button disabled icon="linux" type="light">Linux</Button>
        <Button disabled icon="apple" type="dark">Apple</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button disabled icon="copy" type="primary">复制</Button>
        <Button disabled icon="delete" type="primary">删除</Button>
        <Button icon="file-add" type="primary">添加文件</Button>
        <Button disabled icon="map" type="primary">地图</Button>
        <Button disabled icon="linux" type="primary">Linux</Button>
        <Button disabled icon="apple" type="primary">Apple</Button>
      </ButtonGroup>
      <ButtonGroup style={{ marginTop: 5 }}>
        <Button disabled icon="copy">复制</Button>
        <Button disabled icon="delete">删除</Button>
        <Button disabled icon="file-add">添加文件</Button>
        <Button disabled icon="map">地图</Button>
        <Button disabled icon="linux">Linux</Button>
        <Button disabled icon="apple">Apple</Button>
      </ButtonGroup>
      <div style={{ marginTop: 5 }}>
        <Button disabled icon="weibo" basic type="primary" />
        <Button disabled icon="chrome" basic type="success" />
        <Button disabled icon="taobao" basic type="warning" />
        <Button disabled icon="apple" basic type="danger" />
        <Button disabled icon="weibo" basic type="dark" />
      </div>
    </div>
  );
}

垂直按钮组

import React from 'react';
import { Button, ButtonGroup, Row, Col } from 'uiw';

export default function Demo() {
  return(
    <Row gutter={10}>
      <Col style={{ maxWidth: 120 }}>
        <ButtonGroup vertical>
          <Button type="primary">按钮</Button>
          <Button type="primary">按钮</Button>
          <Button type="primary">按钮</Button>
          <Button type="primary">按钮</Button>
        </ButtonGroup>
      </Col>
      <Col style={{ maxWidth: 120 }}>
        <ButtonGroup vertical>
          <Button type="success">按钮</Button>
          <Button disabled type="success">按钮</Button>
          <Button type="success">按钮</Button>
          <Button type="success">按钮</Button>
        </ButtonGroup>
      </Col>
      <Col style={{ maxWidth: 120 }}>
        <ButtonGroup vertical>
          <Button type="light">按钮</Button>
          <Button type="light">按钮</Button>
          <Button type="light">按钮</Button>
          <Button type="light">按钮</Button>
        </ButtonGroup>
      </Col>
      <Col style={{ maxWidth: 120 }}>
        <ButtonGroup vertical>
          <Button type="primary">主要按钮</Button>
          <Button type="success">成功按钮</Button>
          <Button type="warning">警告按钮</Button>
          <Button type="danger">错误按钮</Button>
          <Button type="light">亮按钮</Button>
          <Button type="dark">暗按钮</Button>
        </ButtonGroup>
      </Col>
    </Row>
  );
}

基本按钮

设置 basic=true 即可获得基本按钮,没有背景颜色的状态按钮。

import React from 'react';
import { Button, Divider } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Button basic type="primary">主要按钮</Button>
      <Button basic type="success">成功按钮</Button>
      <Button basic type="warning">警告按钮</Button>
      <Button basic type="danger">错误按钮</Button>
      <Button basic type="light">亮按钮</Button>
      <Button basic type="dark">暗按钮</Button>
      <Divider style={{ maxWidth: 220 }}>激活</Divider>
      <Button basic active type="primary">主要按钮</Button>
      <Button basic active type="success">成功按钮</Button>
      <Button basic active type="warning">警告按钮</Button>
      <Button basic active type="danger">错误按钮</Button>
      <Button basic active type="light">亮按钮</Button>
      <Button basic active type="dark">暗按钮</Button>
      <Divider style={{ maxWidth: 220 }}>禁用</Divider>
      <Button basic disabled type="primary">主要按钮</Button>
      <Button basic disabled type="success">成功按钮</Button>
      <Button basic disabled type="warning">警告按钮</Button>
      <Button basic disabled type="danger">错误按钮</Button>
      <Button basic disabled type="light">亮按钮</Button>
      <Button basic disabled type="dark">暗按钮</Button>
    </div>
  );
}

基础按钮添加图标

设置 basic=true 即可获得基本按钮,没有背景颜色的状态按钮。

import React from 'react';
import { Button, Divider } from 'uiw';

const chat = (
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" />
  </svg>
)

export default function Demo() {
  return(
    <div>
      <Button icon="weibo" basic type="primary">主要按钮</Button>
      <Button icon="chrome" basic type="success">成功按钮</Button>
      <Button icon="taobao" basic type="warning">警告按钮</Button>
      <Button icon="apple" basic type="danger">错误按钮</Button>
      <Button icon="weibo" basic type="dark">暗按钮</Button>
      <Divider />
      <Button icon="weibo" basic type="primary" />
      <Button icon="chrome" basic type="success" />
      <Button icon="taobao" basic type="warning" />
      <Button icon="apple" basic type="danger" />
      <Button icon="weibo" basic type="dark" />
      <Button icon="weibo" basic type="dark" />
    </div>
  );
}

激活按钮样式

import React from 'react';
import { Button } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Button active type="primary">主要按钮</Button>
      <Button active type="success">成功按钮</Button>
      <Button active type="warning">警告按钮</Button>
      <Button active type="danger">错误按钮</Button>
      <Button active type="light">亮按钮</Button>
      <Button active type="dark">暗按钮</Button>
      <Button active type="link"> (超连接样式)link </Button>
    </div>
  );
}

禁用按钮样式

import React from 'react';
import { Button } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Button disabled type="primary">主要按钮</Button>
      <Button disabled type="success">成功按钮</Button>
      <Button disabled type="warning">警告按钮</Button>
      <Button disabled type="danger">错误按钮</Button>
      <Button disabled type="light">亮按钮</Button>
      <Button disabled type="dark">暗按钮</Button>
      <Button disabled type="link"> (超连接样式)link </Button>
    </div>
  );
}

block

import React from 'react';
import { Button, Row, Col } from 'uiw';

export default function Demo() {
  return(
    <Row gutter={10}>
      <Col style={{ maxWidth: 320 }}>
        <Button block type="primary">主要按钮</Button>
        <Button block type="success">成功按钮</Button>
        <Button block type="warning">警告按钮</Button>
        <Button block type="danger">错误按钮</Button>
        <Button block type="light">亮按钮</Button>
        <Button block type="dark">暗按钮</Button>
      </Col>
    </Row>
  );
}

size大小

sizeButton.Group下面不支持。

import React from 'react';
import { Button, Divider } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Button size="small" type="primary">主要按钮</Button>
      <Button size="default" type="success">成功按钮</Button>
      <Button size="large" type="warning">警告按钮</Button>
      <Button size="small" type="danger">错误按钮</Button>
      <Button size="default" type="light">亮按钮</Button>
      <Button size="large" type="dark">暗按钮</Button>
      <Divider />
      <Button icon="weibo" size="small" type="primary">微博</Button>
      <Button icon="chrome" size="small" type="success">谷歌浏览器</Button>
      <Button icon="chrome" type="success">谷歌浏览器</Button>
      <Button icon="apple" size="large" type="warning">淘宝</Button>
    </div>
  );
}

Props

Button

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | size | 按钮尺寸 | Enum{large, default, small} | default | | type | 按钮状态类型附带颜色 | Enum{primary, success, warning, danger, light, dark, link} | light | | htmlType | 设置 button 原生的 type 值,可选值请参考 HTML 标准 | String | button | | icon | 设置按钮的图标类型 | String/ReactNode | - | | block | 通过设置属性 block 可将按钮宽度设置为 100%,(块级元素),常用于弹窗内操作按钮。 | Boolean | false | | disabled | 禁用状态 | Boolean | false | | active | 激活状态,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。 | Boolean | false | | loading | 加载中状态 | Boolean | false |

Button.Group

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | vertical | 竖排列 | Boolean | false |