Card 卡片

卡片组件，用于展示内容区块。

基础用法

<div id="demo-card"></div>

<script>
  const card = new SaCard('#demo-card', {
    body: '这是卡片的内容。可以放置任何内容。'
  });
</script>

加载 SanoUI 组件中...

带标题的卡片

通过 header 配置卡片标题。

<div id="demo-card-header"></div>

<script>
  const card = new SaCard('#demo-card-header', {
    header: '卡片标题',
    body: '这是带标题的卡片内容。'
  });
</script>

加载 SanoUI 组件中...

不同阴影

通过 shadow 配置卡片阴影效果。

<div id="demo-card-shadow"></div>

<script>
  // 始终显示阴影
  new SaCard('#demo-card-shadow', {
    header: '卡片标题',
    body: '这是卡片内容',
    shadow: 'always'
  });
  
  // 悬停时显示阴影
  new SaCard('#demo-card-shadow', {
    header: '卡片标题',
    body: '这是卡片内容',
    shadow: 'hover'
  });
  
  // 无阴影
  new SaCard('#demo-card-shadow', {
    header: '卡片标题',
    body: '这是卡片内容',
    shadow: 'never'
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaCardOptions	{}

配置选项

参数	说明	类型	可选值	默认值
header	卡片标题	string	-	''
body	卡片内容	string | HTMLElement	-	''
shadow	阴影效果	string	always / hover / never	always

方法

方法名	说明	参数	返回值
setHeader	设置标题	header: string	void
setBody	设置内容	body: string | HTMLElement	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const card = new SaCard('#my-card', {
  header: '卡片标题',
  body: '这是卡片内容',
  shadow: 'always'
});

// 设置标题
card.setHeader('新的标题');

// 设置内容
card.setBody('新的内容');

// 或者使用 DOM 元素
const contentEl = document.createElement('div');
contentEl.innerHTML = '<p>这是动态内容</p>';
card.setBody(contentEl);

动态内容

const card = new SaCard('#my-card', {
  header: '数据卡片',
  body: '加载中...'
});

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

实际使用场景

场景 1：数据统计卡片

使用卡片展示数据统计信息。

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div id="card-1"></div>
  <div id="card-2"></div>
  <div id="card-3"></div>
</div>

<script>
  const card1 = new SaCard('#card-1', {
    header: '总用户数',
    body: '<div style="font-size: 2rem; font-weight: bold; color: #409eff;">1,234</div><div style="color: #67c23a; margin-top: 0.5rem;">↑ 12%</div>',
    shadow: 'hover'
  });
  
  const card2 = new SaCard('#card-2', {
    header: '今日访问',
    body: '<div style="font-size: 2rem; font-weight: bold; color: #67c23a;">5,678</div><div style="color: #67c23a; margin-top: 0.5rem;">↑ 8%</div>',
    shadow: 'hover'
  });
  
  const card3 = new SaCard('#card-3', {
    header: '总收入',
    body: '<div style="font-size: 2rem; font-weight: bold; color: #e6a23c;">¥89,012</div><div style="color: #67c23a; margin-top: 0.5rem;">↑ 15%</div>',
    shadow: 'hover'
  });
</script>

加载 SanoUI 组件中...

场景 2：产品卡片列表

使用卡片展示产品列表。

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div id="product-card-1"></div>
  <div id="product-card-2"></div>
  <div id="product-card-3"></div>
</div>

<script>
  const products = [
    { name: '产品一', price: '¥99', desc: '这是产品一的描述' },
    { name: '产品二', price: '¥199', desc: '这是产品二的描述' },
    { name: '产品三', price: '¥299', desc: '这是产品三的描述' }
  ];
  
  products.forEach((product, index) => {
    const card = new SaCard(`#product-card-${index + 1}`, {
      header: product.name,
      body: `
        <div style="padding: 1rem 0;">
          <div style="font-size: 1.5rem; font-weight: bold; color: #f56c6c; margin-bottom: 0.5rem;">${product.price}</div>
          <div style="color: #666; margin-bottom: 1rem;">${product.desc}</div>
          <button class="sa-button sa-button--primary" style="width: 100%;">立即购买</button>
        </div>
      `,
      shadow: 'hover'
    });
  });
</script>

加载 SanoUI 组件中...