Skip to content

Files

Latest commit

22244c4 · Nov 29, 2023

History

History

react-drawer

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Sep 19, 2023
Nov 29, 2023
Nov 29, 2023
Aug 31, 2021

README.md

Drawer 抽屉

Buy me a coffee Open in unpkg NPM Downloads npm version

一个从页面边缘滑动出来的浮层,可以替代 <Modal> 更多样的展示方式。

import { Drawer } from 'uiw';
// or
import Drawer from '@uiw/react-drawer';

基础用法

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

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick() {
    this.setState({ visible: !this.state.visible });
  }
  onClose() {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <Drawer
          title="抽屉标题"
          isOpen={this.state.visible}
          onClose={this.onClose.bind(this)}
        >
          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
          <br /><br />
          以声明式编写UI,可以让你的代码更加可靠,且方便调试。
          <br /><br />
          创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
          <br /><br />
          无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
          <br /><br />
          无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
          <br /><br />
          <b>组件</b>
          <br /><br />
          React 组件使用一个名为 render() 的方法, 接收数据作为输入,输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。
        </Drawer>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this)}>打开抽屉</Button>
        </ButtonGroup>
      </div>
    )
  }
}

export default Demo;

显示位置

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

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
      placement: null,
    }
  }
  onClick(placement) {
    this.setState({ visible: !this.state.visible, placement });
  }
  onClose() {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <Drawer
          title="抽屉标题"
          icon="information"
          placement={this.state.placement}
          isOpen={this.state.visible}
          footer="页脚,可以放点内容"
          onClose={this.onClose.bind(this)}
        >
          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
          <br /><br />
          以声明式编写UI,可以让你的代码更加可靠,且方便调试。
          <br /><br />
          创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
          <br /><br />
          无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
          <br /><br />
          无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
          <br /><br />
          <b>组件</b>'top', 'right', 'bottom', 'left'
        </Drawer>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this, 'left')}>Left</Button>
          <Button onClick={this.onClick.bind(this, 'top')}>Top</Button>
          <Button onClick={this.onClick.bind(this, 'bottom')}>Bottom</Button>
          <Button onClick={this.onClick.bind(this, 'right')}>Right</Button>
        </ButtonGroup>
      </div>
    )
  }
}

export default Demo;

添加页脚

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

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick() {
    this.setState({ visible: !this.state.visible });
  }
  onClose() {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <Drawer
          title="抽屉标题"
          isOpen={this.state.visible}
          onClose={this.onClose.bind(this)}
          footer={
            <div>
              <Button size="small" type="danger" onClick={this.onClick.bind(this)}>关闭抽屉</Button>
              <Button size="small" type="success">其它</Button>
            </div>
          }
        >
          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
          <br /><br />
          以声明式编写UI,可以让你的代码更加可靠,且方便调试。
          <br /><br />
          创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
          <br /><br />
          无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
          <br /><br />
          无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
          <br /><br />
          <b>组件</b>
          <br /><br />
          React 组件使用一个名为 render() 的方法, 接收数据作为输入,输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。
        </Drawer>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this)}>打开抽屉</Button>
        </ButtonGroup>
      </div>
    )
  }
}

export default Demo;

Props

参数 说明 类型 默认值
title 抽屉标题 String -
icon 设置对话框右上角图标 String/Element -
isOpen 是否可见 Boollean -
closable 是否显示右上角的关闭按钮 Boollean true
placement 抽屉的方向 Enum{top, right, bottom, left} right
size 高度/宽度,在 placementtopbottom 时使用为设置高度,否则设置宽度 Number -
bodyProps 抽屉填充内容的参数样式对象,例如className,style Object -

更多属性文档请参考 Overlay