cnd-components-mcp/componentData/components/侧滑栏 Slide Panel.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 简介

侧滑栏也称抽屉，常用于承载需要较多纵向空间展示信息的场景，通常从页面右侧向左滑出；侧滑栏适用于用户需要在列表的不同条目间高频切换查看信息，例如在商品列表中，需要快速对比不同商品的详细信息，侧可以将商品的细节信息放入侧滑栏中展示

建议优先选择对话框或独占式页面来承载操作任务，而当用户需要在不同单元间反复操作，例如查看列表中不同实例的信息并进行操作时，建议使用非模态的侧滑栏；侧滑栏支持右侧呼出或底部呼出。
\*由于目前已经批量使用了模态侧滑栏，设计师可以根据业务状况灵活处理，不做强制性迭代；如果随着分辨率不断增大侧滑栏的体验问题可能会增大，建议迭代成对话框或独占式页面，或者由业务线前端将侧滑栏调整为响应式宽度。

## 示例

```tsx
import React, { useState } from 'react';
import { Button } from '@alicloud/console-components';
import SlidePanel from '@alicloud/console-components-slide-panel';

const containerStyle = {
  height: '128px',
  borderRadius: '4px',
  lineHeight: '128px',
  background: '#f6f6f6',
  textAlign: 'center',
} as const;

export default () => {
  const [active, setActive] = useState(false);

  return (
    <>
      <Button
        onClick={() => {
          setActive(true);
        }}
      >
        open
      </Button>
      <SlidePanel
        placement="right"
        title="标题 Title"
        isShowing={active}
        width="medium"
        onOk={() => {}}
        onCancel={() => {}}
        cancelText="基础按钮"
        okText="基础按钮"
        onVisibleChange={(v) => {
          setActive(v);
        }}
        onClose={() => {
          setActive(false);
        }}
      >
        <div style={containerStyle}>
          Content Placehoder
        </div>
      </SlidePanel>
    </>
  );
};

export const meta = {
  title: '吸底按钮在内容区外（吸底按钮不包含在内容区域内）',
  describe: '通过设置onOk,onCancel属性，控制底部按钮的显示与隐藏',
};

```

## API

## 更多示例

```tsx
export * from '@alicloud/console-components/esm/rc/slide-panel/demos/demo1';
export { default } from '@alicloud/console-components/esm/rc/slide-panel/demos/demo1';

```