Drawer 抽屉

抽屉组件，支持从四个方向（右、左、上、下）滑出。

基础用法

右侧抽屉

<button id="btn-open">打开抽屉</button>

<script>
  const drawer = new SaDrawer({
    title: '右侧抽屉',
    content: '这是抽屉内容',
    placement: 'rtl'
  });
  
  document.getElementById('btn-open').addEventListener('click', () => {
    drawer.open();
  });
</script>

加载 SanoUI 组件中...

左侧抽屉

<button id="btn-open-left">打开左侧抽屉</button>

<script>
  const drawer = new SaDrawer({
    title: '左侧抽屉',
    content: '这是抽屉内容',
    placement: 'ltr'
  });
  
  document.getElementById('btn-open-left').addEventListener('click', () => {
    drawer.open();
  });
</script>

加载 SanoUI 组件中...

顶部抽屉

<button id="btn-open-top">打开顶部抽屉</button>

<script>
  const drawer = new SaDrawer({
    title: '顶部抽屉',
    content: '这是抽屉内容',
    placement: 'ttb'
  });
  
  document.getElementById('btn-open-top').addEventListener('click', () => {
    drawer.open();
  });
</script>

加载 SanoUI 组件中...

底部抽屉

<button id="btn-open-bottom">打开底部抽屉</button>

<script>
  const drawer = new SaDrawer({
    title: '底部抽屉',
    content: '这是抽屉内容',
    placement: 'btt'
  });
  
  document.getElementById('btn-open-bottom').addEventListener('click', () => {
    drawer.open();
  });
</script>

加载 SanoUI 组件中...

自定义尺寸

通过 size 参数自定义抽屉的宽度或高度，支持百分比和像素值。

const drawer = new SaDrawer({
  title: '自定义尺寸抽屉',
  content: '这是抽屉内容',
  placement: 'rtl',
  size: '50%' // 或者 '500px'
});
drawer.open();

隐藏关闭按钮

通过 showClose: false 隐藏关闭按钮。

const drawer = new SaDrawer({
  title: '无关闭按钮抽屉',
  content: '这是抽屉内容',
  showClose: false
});
drawer.open();

禁用遮罩关闭

通过 maskClosable: false 禁用点击遮罩关闭抽屉。

const drawer = new SaDrawer({
  title: '禁用遮罩关闭抽屉',
  content: '这是抽屉内容',
  maskClosable: false
});
drawer.open();

设置内容

使用 setContent() 方法设置抽屉内容，支持字符串和 DOM 元素。

const drawer = new SaDrawer({
  title: '动态设置内容'
});

drawer.open();
drawer.setContent('<p>这是动态设置的内容</p>');

// 或者使用 DOM 元素
const contentEl = document.createElement('div');
contentEl.innerHTML = '<p>使用 DOM 元素作为内容</p>';
drawer.setContent(contentEl);

关闭回调

通过 onClose 回调函数监听抽屉关闭事件。

const drawer = new SaDrawer({
  title: '带回调抽屉',
  content: '这是抽屉内容',
  onClose: () => {
    console.log('抽屉已关闭');
  }
});
drawer.open();

API

构造函数参数

参数	说明	类型	默认值
options	配置选项	SaDrawerOptions	{}

配置选项

参数	说明	类型	可选值	默认值
title	抽屉标题	string	-	''
content	抽屉内容	string | HTMLElement	-	''
placement	抽屉位置	string	rtl / ltr / ttb / btt	rtl
size	抽屉尺寸	string	-	'30%'
showClose	是否显示关闭按钮	boolean	-	true
maskClosable	是否点击遮罩关闭	boolean	-	true
onClose	关闭回调	function()	-	-

方法

方法名	说明	参数	返回值
open	打开抽屉	-	void
close	关闭抽屉	-	void
setContent	设置抽屉内容	content: string | HTMLElement	void
setTitle	设置抽屉标题	title: string	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const drawer = new SaDrawer({
  title: '设置抽屉',
  content: '这是抽屉内容',
  placement: 'rtl',
  size: '400px',
  showClose: true,
  maskClosable: true,
  onClose: () => {
    console.log('抽屉已关闭');
  }
});

// 打开抽屉
drawer.open();

// 关闭抽屉
drawer.close();

// 设置内容
drawer.setContent('新的抽屉内容');

// 设置标题
drawer.setTitle('新的标题');

动态内容

const drawer = new SaDrawer({
  title: '动态内容抽屉'
});

drawer.open();

// 动态加载内容
fetch('/api/content')
  .then(res => res.json())
  .then(data => {
    drawer.setContent(data.html);
  });

实际使用场景

场景 1：设置抽屉

从右侧滑出设置面板。

<button class="sa-button sa-button--primary" onclick="openSettings()">打开设置</button>

<script>
  SA.init('body');
  
  let settingsDrawer = null;
  
  function openSettings() {
    if (!settingsDrawer) {
      settingsDrawer = new SaDrawer({
        title: '系统设置',
        placement: 'rtl',
        size: '400px',
        content: `
          <div style="padding: 1rem;">
            <div class="sa-form-item" style="margin-bottom: 1rem;">
              <label style="display: block; margin-bottom: 0.5rem;">主题设置</label>
              <div class="sa-select" style="width: 100%;">
                <select style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                  <option>浅色主题</option>
                  <option>深色主题</option>
                  <option>自动</option>
                </select>
              </div>
            </div>
            <div class="sa-form-item" style="margin-bottom: 1rem;">
              <label style="display: block; margin-bottom: 0.5rem;">语言设置</label>
              <div class="sa-select" style="width: 100%;">
                <select style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                  <option>简体中文</option>
                  <option>English</option>
                </select>
              </div>
            </div>
            <div style="margin-top: 2rem;">
              <button class="sa-button sa-button--primary" style="width: 100%;">保存设置</button>
            </div>
          </div>
        `,
        onClose: () => {
          console.log('设置抽屉已关闭');
        }
      });
    }
    
    settingsDrawer.open();
  }
</script>

加载 SanoUI 组件中...

场景 2：详情抽屉

从右侧滑出详情面板，动态加载内容。

<button class="sa-button sa-button--primary" onclick="showDetail(1)">查看详情</button>

<script>
  let detailDrawer = null;
  
  function showDetail(id) {
    if (!detailDrawer) {
      detailDrawer = new SaDrawer({
        title: '详情信息',
        placement: 'rtl',
        size: '500px',
        content: '<div style="padding: 1rem;">加载中...</div>'
      });
    }
    
    detailDrawer.open();
    
    // 模拟加载详情数据
    setTimeout(() => {
      detailDrawer.setContent(`
        <div style="padding: 1rem;">
          <div style="margin-bottom: 1rem;">
            <div style="font-weight: 500; margin-bottom: 0.5rem;">用户ID</div>
            <div style="color: #666;">${id}</div>
          </div>
          <div style="margin-bottom: 1rem;">
            <div style="font-weight: 500; margin-bottom: 0.5rem;">用户名</div>
            <div style="color: #666;">用户 ${id}</div>
          </div>
          <div style="margin-bottom: 1rem;">
            <div style="font-weight: 500; margin-bottom: 0.5rem;">邮箱</div>
            <div style="color: #666;">user${id}@example.com</div>
          </div>
          <div style="margin-bottom: 1rem;">
            <div style="font-weight: 500; margin-bottom: 0.5rem;">创建时间</div>
            <div style="color: #666;">2024-01-01 10:00:00</div>
          </div>
        </div>
      `);
    }, 500);
  }
</script>

加载 SanoUI 组件中...