cnd-components-mcp/componentData/components/Slide/examples.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
      &lt;/Button&gt;
      <SlidePanel
        placement="right"
        title="标题 Title"
        isShowing={active}
        width="medium"
        onOk={() => {}}
        onCancel={() => {}}
        cancelText="基础按钮"
        okText="基础按钮"
        onVisibleChange={(v) => {
          setActive(v);
        }}
        onClose={() => {
          setActive(false);
        }}
      >
        &lt;div style={containerStyle}&gt;
          Content Placehoder
        &lt;/div&gt;
      &lt;/SlidePanel&gt;
    &lt;/&gt;
  );
};

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

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

```