@aliwind/rc-slide-panel

React component for Alibaba Cloud.

Usage no npm install needed!

<script type="module">
  import aliwindRcSlidePanel from 'https://cdn.skypack.dev/@aliwind/rc-slide-panel';
</script>

README

name: rc-slide-panel zhName: 滑动面板 type: biz-component

@aliwind/rc-slide-panel

滑动面板，从浏览器右侧弹出面板。

基本用法

SlidePanel 适用于只展示一个 panel的情况(其实这应该符合大部分情况)，点击 open 按钮时弹出面板：

MDXInstruction:importDemo:SlidePanelDemo

弹出多个面板，用户可以在面板之间切换。这种场景需要使用 SlidePanelGroup 和 SlidePanelItem：

MDXInstruction:importDemo:MultiPanelDemo

APIs

SlidePanel

SlidePanel 是基于 SlidePanelGroup 和 SlidePanelItem 的简单封装，将自己 props 直接代理给它们：

<SlidePanelGroup {...slidePanelGroupProps}>
  <SlidePanelItem {...slidePanelItemProps} />
</SlidePanelGroup>

对于只展示一个 panel的情况(其实这应该符合大部分情况)，直接使用 SlidePanel 就很方便。使用方式见上面的基本用法。

MDXInstruction:renderInterface:ISlidePanelProps

如果要同时展示多个 panel，请使用 SlidePanelGroup 和 SlidePanelItem。

SlidePanelGroup

SlidePanelGroup 定义一个滑动面板组，其中可以包含多个 SlidePanelItem。

MDXInstruction:renderInterface:ISlidePanelGroupProps

SlidePanelItem

定义一个滑动面板。

MDXInstruction:renderInterface:ISlidePanelItemProps