Drawer 抽屉

使用场景

在不离开主路径的情况下，为用户提供快速执行操作、确认信息或反馈提示的辅助窗口。

示例

基本用法

noInline

const hippoIntroduction = '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。'; function Basic() { const [visible, setVisible] = useState(false); return ( <div> <Button onClick={() => setVisible(!visible)}>打开抽屉</Button> <Drawer title="页面抽屉" visible={visible} onRequestClose={() => setVisible(false)} footer={<Button onClick={() => setVisible(false)}>关闭</Button>} canCloseByIcon > {hippoIntroduction} </Drawer> </div> ); } render(<Basic />)

const hippoIntroduction =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

function Basic() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Button onClick={() => setVisible(!visible)}>打开抽屉</Button>

      <Drawer
        title="页面抽屉"
        visible={visible}
        onRequestClose={() => setVisible(false)}
        footer={<Button onClick={() => setVisible(false)}>关闭</Button>}
        canCloseByIcon
      >
        {hippoIntroduction}
      </Drawer>
    </div>
  );
}

render(<Basic />)

弹出方向

noInline

const hippoIntroduction = '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。'; function Placements() { const [visible, setVisible] = useState(false); const [placement, setPlacement] = useState('right'); return ( <div> <div style={{ display: 'grid', grid: 'repeat(3, auto) / repeat(3, 1fr)', gap: 16 }}> <Button style={{ gridRow: '1', gridColumn: '2' }} onClick={() => { setVisible(true); setPlacement('top'); }} > 打开抽屉 placement=top </Button> <Button style={{ gridRow: '2', gridColumn: '3' }} onClick={() => { setVisible(true); setPlacement('right'); }} > 打开抽屉 placement=right </Button> <Button style={{ gridRow: '3', gridColumn: '2' }} onClick={() => { setVisible(true); setPlacement('bottom'); }} > 打开抽屉 placement=bottom </Button> <Button style={{ gridRow: '2', gridColumn: '1' }} onClick={() => { setVisible(true); setPlacement('left'); }} > 打开抽屉 placement=left </Button> </div> <Drawer title="盒马" visible={visible} placement={placement} footer={<Button onClick={() => setVisible(false)}>关闭弹层</Button>} onRequestClose={() => { setVisible(false); }} > {_.range(20).map((i) => ( <p key={i}>{hippoIntroduction}</p> ))} </Drawer> </div> ); } render(<Placements />)

const hippoIntroduction =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

function Placements() {
  const [visible, setVisible] = useState(false);
  const [placement, setPlacement] = useState('right');

  return (
    <div>
      <div style={{ display: 'grid', grid: 'repeat(3, auto) / repeat(3, 1fr)', gap: 16 }}>
        <Button
          style={{ gridRow: '1', gridColumn: '2' }}
          onClick={() => {
            setVisible(true);
            setPlacement('top');
          }}
        >
          打开抽屉 placement=top
        </Button>
        <Button
          style={{ gridRow: '2', gridColumn: '3' }}
          onClick={() => {
            setVisible(true);
            setPlacement('right');
          }}
        >
          打开抽屉 placement=right
        </Button>
        <Button
          style={{ gridRow: '3', gridColumn: '2' }}
          onClick={() => {
            setVisible(true);
            setPlacement('bottom');
          }}
        >
          打开抽屉 placement=bottom
        </Button>
        <Button
          style={{ gridRow: '2', gridColumn: '1' }}
          onClick={() => {
            setVisible(true);
            setPlacement('left');
          }}
        >
          打开抽屉 placement=left
        </Button>
      </div>

      <Drawer
        title="盒马"
        visible={visible}
        placement={placement}
        footer={<Button onClick={() => setVisible(false)}>关闭弹层</Button>}
        onRequestClose={() => {
          setVisible(false);
        }}
      >
        {_.range(20).map((i) => (
          <p key={i}>{hippoIntroduction}</p>
        ))}
      </Drawer>
    </div>
  );
}

render(<Placements />)

嵌套抽屉

noInline

const alibabaIntroduction = '阿里巴巴集团创立于1999年，是一家提供电子商务在线交易平台的中国公司，实行位于杭州与北京的双总部制度。\n' + '服务范围包括B2B贸易、网上零售、购物搜索引擎、第三方支付和云计算服务。'; const hippoIntroduction = '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。'; function Nested() { const [visible, setVisible] = useState(false); const [innerVisible, setInnerVisible] = useState(false); return ( <div> <Button onClick={() => setVisible(true)}>打开抽屉</Button> <Drawer title="外层抽屉标题" visible={visible} onRequestClose={() => setVisible(false)} style={{ width: 600 }} footer={ <Button onClick={() => setVisible(false)} type="primary"> 关闭 </Button> } > <p>{alibabaIntroduction}</p> <Button onClick={() => setInnerVisible(true)}>打开内层抽屉</Button> <Drawer title="内层抽屉标题" visible={innerVisible} onRequestClose={() => setInnerVisible(false)} style={{ width: 400 }} footer={ <Button onClick={() => setInnerVisible(false)} type="primary"> 关闭 </Button> } > {hippoIntroduction} </Drawer> </Drawer> </div> ); } render(<Nested />)

const alibabaIntroduction =
  '阿里巴巴集团创立于1999年，是一家提供电子商务在线交易平台的中国公司，实行位于杭州与北京的双总部制度。\n' +
  '服务范围包括B2B贸易、网上零售、购物搜索引擎、第三方支付和云计算服务。';

const hippoIntroduction =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

function Nested() {
  const [visible, setVisible] = useState(false);
  const [innerVisible, setInnerVisible] = useState(false);

  return (
    <div>
      <Button onClick={() => setVisible(true)}>打开抽屉</Button>
      <Drawer
        title="外层抽屉标题"
        visible={visible}
        onRequestClose={() => setVisible(false)}
        style={{ width: 600 }}
        footer={
          <Button onClick={() => setVisible(false)} type="primary">
            关闭
          </Button>
        }
      >
        <p>{alibabaIntroduction}</p>

        <Button onClick={() => setInnerVisible(true)}>打开内层抽屉</Button>
        <Drawer
          title="内层抽屉标题"
          visible={innerVisible}
          onRequestClose={() => setInnerVisible(false)}
          style={{ width: 400 }}
          footer={
            <Button onClick={() => setInnerVisible(false)} type="primary">
              关闭
            </Button>
          }
        >
          {hippoIntroduction}
        </Drawer>
      </Drawer>
    </div>
  );
}

render(<Nested />)

全屏抽屉

noInline

const hippoIntroduction = '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。'; function Fullscreen() { const [visible, setVisible] = useState(false); return ( <div> <Button onClick={() => setVisible(!visible)}>打开抽屉</Button> <Drawer title="页面抽屉" visible={visible} style={{ width: '100%', maxWidth: '100%' }} animation={{ in: Overlay.animations.zoomIn, out: Overlay.animations.fadeOut }} onRequestClose={() => setVisible(false)} disableScroll="force" footer={ <Button onClick={() => setVisible(false)} type="primary"> 关闭 </Button> } > {hippoIntroduction} </Drawer> </div> ); } render(<Fullscreen />)

const hippoIntroduction =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

function Fullscreen() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Button onClick={() => setVisible(!visible)}>打开抽屉</Button>

      <Drawer
        title="页面抽屉"
        visible={visible}
        style={{ width: '100%', maxWidth: '100%' }}
        animation={{ in: Overlay.animations.zoomIn, out: Overlay.animations.fadeOut }}
        onRequestClose={() => setVisible(false)}
        disableScroll="force"
        footer={
          <Button onClick={() => setVisible(false)} type="primary">
            关闭
          </Button>
        }
      >
        {hippoIntroduction}
      </Drawer>
    </div>
  );
}

render(<Fullscreen />)

极简样式

设置 minimal={true} 后，抽屉只会保留最基本的样式，其余内容完全由上层进行控制。此时 title 和 footer 属性无效。

noInline

const alibabaIntroduction = '阿里巴巴集团创立于1999年，是一家提供电子商务在线交易平台的中国公司，实行位于杭州与北京的双总部制度。\n' + '服务范围包括B2B贸易、网上零售、购物搜索引擎、第三方支付和云计算服务。'; function Minimal() { const [visible, setVisible] = useState(false); return ( <div> <Button onClick={() => setVisible(true)}>打开抽屉</Button> <Drawer visible={visible} onRequestClose={() => setVisible(false)} style={{ paddingRight: 16, paddingLeft: 12 }} renderChildren={(arg) => ( <Drawer.Panel {...arg}> <p>{alibabaIntroduction}</p> <p>{alibabaIntroduction}</p> <p>{alibabaIntroduction}</p> </Drawer.Panel> )} /> </div> ); } render(<Minimal />)

const alibabaIntroduction =
  '阿里巴巴集团创立于1999年，是一家提供电子商务在线交易平台的中国公司，实行位于杭州与北京的双总部制度。\n' +
  '服务范围包括B2B贸易、网上零售、购物搜索引擎、第三方支付和云计算服务。';

function Minimal() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Button onClick={() => setVisible(true)}>打开抽屉</Button>
      <Drawer
        visible={visible}
        onRequestClose={() => setVisible(false)}
        style={{ paddingRight: 16, paddingLeft: 12 }}
        renderChildren={(arg) => (
          <Drawer.Panel {...arg}>
            <p>{alibabaIntroduction}</p>
            <p>{alibabaIntroduction}</p>
            <p>{alibabaIntroduction}</p>
          </Drawer.Panel>
        )}
      />
    </div>
  );
}

render(<Minimal />)

API

字段	描述
style	CSSProperties
className	string
visible	boolean 抽屉是否显示
onRequestClose	(reason: any) => void 抽屉被关闭时的回调
placement	"top" | "bottom" | "right" | "left" = right 抽屉出现的位置
title	ReactNode 抽屉标题
content	ReactNode
renderChildren	(pass: { ref: Ref<HTMLDivElement>; 'data-placement': "top" | "bottom" | "right" | "left"; }) => ReactNode 使用 render prop 的形式指定弹层内容，用于精确控制 DOM 结构
footer	ReactNode 弹窗页脚
wrapperRef	Ref<HTMLDivElement>
canCloseByIcon	boolean = false 是否显示对话框关闭图标
浮层交互
canCloseByEsc	boolean = true 是否支持 esc 按键关闭弹层
canCloseByOutSideClick	boolean = true 点击弹层外部区域是否关闭弹层（注意背景层也被认为是外部）
背景层
hasBackdrop	boolean = true 是否展示背景层
backdropStyle	CSSProperties
backdropClassName	string
浮层生命周期
beforeOpen	(state?: any) => Promise<IOverlayAnimationProps> 浮层即将被打开时的回调
onOpen	() => void 浮层打开时的回调
afterOpen	() => void 浮层打开时的回调
beforeClose	() => IOverlayAnimationProps 浮层即将被关闭时的回调
onClose	() => void 浮层关闭时的回调
afterClose	() => void 浮层关闭后的回调
浮层动画
animationDuration	string = 200ms 动画持续时间（注意该 prop 会作为 CSS 变量的值，使用时要带上单位，例如 `'500ms'`)
animation	false | { in: string | Keyframes; out: string | Keyframes; } 弹层的出现和消失的动画，可以用 Overlay.animations.{name} 来引用弹层组件内置的动画效果
浮层容器
usePortal	boolean 是否使用 portal 来渲染弹层内容
portalContainer	HTMLElement | "DOCUMENT_BODY" 渲染组件的容器
disableScroll	boolean | "force" = true 是否禁用容器的滚动