Sakana Element

简体中文

English

简体中文

English

主题

Card 卡片 ​

用于展示结构化内容的容器组件，具有像素风格边框。

?
名称分类说明类型默认值
type? 风格卡片类型'primary' | 'success' | 'info' | 'warning' | 'danger'—
color? 风格自定义颜色（十六进制）string—
shadow? 风格阴影显示时机boolean | 'always' | 'hover' | 'never''always'
size? 风格卡片尺寸'small' | 'large'—
outline? 风格轮廓样式（实线边框，透明背景）booleanfalse
dash? 风格虚线样式（虚线边框）booleanfalse
ghost? 风格幽灵样式（无边框、无背景）booleanfalse
hoverable? 行为鼠标悬停时是否显示浮起效果booleanfalse
default? 插槽卡片主体内容—
header? 插槽卡片头部内容—
footer? 插槽卡片底部内容—

基础用法 ​

基础的卡片展示，包含头部、主体和底部。

<template>
  <div class="demo-card">
    <px-card>
      <template #header>Card Header</template>
      A simple card with header, body, and footer sections.
      <template #footer>Card Footer</template>
    </px-card>

    <px-card>
      This is a card with only body content.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.demo-card .px-card {
  width: 280px;
}
</style>

类型 ​

使用 type 设置卡片的颜色主题。可选值：primary、success、info、warning、danger。

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" style="width: 180px">
      <template #header>{{ t }}</template>
      A {{ t }} card with pixel-art border and tinted background.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

尺寸 ​

使用 size 属性设置卡片尺寸。可选值为 'small' 或 'large'。

<template>
  <div class="demo-card">
    <px-card size="small">
      <template #header>Small</template>
      A compact card for secondary content or dense layouts.
    </px-card>

    <px-card>
      <template #header>Default</template>
      A standard card with the default size.
    </px-card>

    <px-card size="large">
      <template #header>Large</template>
      A spacious card for featured or prominent content.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.demo-card .px-card {
  width: 260px;
}
</style>

阴影 ​

使用 shadow 属性控制阴影的显示时机。可选值为 'always'、'hover' 或 'never'。

<template>
  <div class="demo-card">
    <px-card shadow="hover">
      <template #header>Hover</template>
      Shadow appears on hover.
    </px-card>

    <px-card shadow="never">
      <template #header>Never</template>
      No shadow is displayed.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.demo-card .px-card {
  width: 220px;
}
</style>

悬停效果 ​

使用 hoverable 属性在鼠标悬停时添加浮起效果。

<template>
  <div class="demo-card">
    <px-card hoverable>
      <template #header>Hoverable Card</template>
      Hover over this card to see the elevation effect.
    </px-card>

    <px-card hoverable>
      <template #header>Another Hoverable</template>
      Click and release to see the active state.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.demo-card .px-card {
  width: 280px;
}
</style>

轮廓 ​

使用 outline 属性设置实线边框、透明背景的样式。

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" outline style="width: 180px">
      <template #header>{{ t }}</template>
      Outline style with colored border and transparent background.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

虚线 ​

使用 dash 属性设置虚线边框样式。

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" dash style="width: 180px">
      <template #header>{{ t }}</template>
      Dashed border with tinted background.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

幽灵 ​

使用 ghost 属性移除边框和背景，只显示彩色文字。

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" ghost style="width: 180px">
      <template #header>{{ t }}</template>
      Ghost style — no border, no background, just colored text.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

自定义颜色 ​

使用 color 属性传入十六进制色值，可创建任意颜色变体的卡片。

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card color="#8B5CF6" style="width: 180px">
      <template #header>Default</template>
      Custom purple color with filled background.
    </px-card>
    <px-card color="#8B5CF6" outline style="width: 180px">
      <template #header>Outline</template>
      Custom purple with outline style.
    </px-card>
    <px-card color="#8B5CF6" dash style="width: 180px">
      <template #header>Dash</template>
      Custom purple with dashed border.
    </px-card>
    <px-card color="#8B5CF6" ghost style="width: 180px">
      <template #header>Ghost</template>
      Custom purple ghost style.
    </px-card>
  </div>
</template>