Card 卡片

显示带有头部、内容与底部的卡片。卡片变窄时内边距自动收紧。

基础用法

SCard() {
  SCardHeader() {
    SCardTitle({ text: 'Login to your account' })
    SCardDescription({ text: 'Enter your email below to login.' })
  }
  SCardContent() {
    TextInput({ placeholder: 'm@example.com' })
    TextInput({ placeholder: 'Password' }).type(InputType.Password)
  }
  SCardFooter() {
    SButton({ text: 'Login' })
    SButton({ text: 'Login with Google', variant: 'outline' })
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

变体

variant：default | outline | elevated | filled | ghost；sizing：'sm'。

SCard({ variant: 'outline' }) { ... }    // border only
SCard({ variant: 'elevated' }) { ... }   // shadow-md, no border
SCard({ variant: 'filled' }) { ... }     // bg-muted
SCard({ variant: 'ghost' }) { ... }      // no surface
SCard({ sizing: 'sm' }) { ... }          // compact 16vp padding

网页近似预览，真机效果以 HarmonyOS 渲染为准。

可交互与媒体

interactive 增加悬停 / 按压反馈；image 在顶部放置一张通栏图片。

Stack() {
  SCard({ interactive: true, image: $r('app.media.startIcon'), imageHeight: 140 }) {
    SCardHeader() {
      SCardTitle({ text: 'Design systems' })
      SCardDescription({ text: 'Tap the whole card.' })
    }
  }
}.onClick(() => this.opened++)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SCard

shadcn-vue 的 Card：bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm。无断点的响应式：卡片本身较窄时，内边距会自动收紧。

变体：default | outline（仅边框）| elevated（shadow-md，无边框）| ghost（无底色）| filled（bg-muted）。sizing: 'sm' 保持紧凑的 16vp 内边距。interactive 会增加悬停 / 按下反馈以及可聚焦性——请在外层包裹 Stack() { SCard(...) { ... } }.onClick(...) 来绑定操作（插槽中的组件无法链式绑定事件）。image 会在顶部放置一个通栏的媒体头部（imageHeight，默认 16:9）。

属性	类型	默认值	说明
variant	CardVariant CardVariant = 'default' | 'outline' | 'elevated' | 'ghost' | 'filled'	'default'
sizing	CardSize CardSize = 'default' | 'sm'	'default'
interactive	boolean	false	悬停 / 按下反馈，并可聚焦（整张卡片可点击时使用）。
image	ResourceStr | undefined	undefined	通栏媒体头部。
imageHeight	number | undefined	undefined	媒体头部的高度，单位 vp；默认为 16:9 的区域。
modifier	AttributeModifier<ColumnAttribute>	new SparkNoopModifier<ColumnAttribute>()
tokens	CardTokens	{}	实例级令牌覆盖（实例 → 主题 --card-* → 配方），参见 {@link CardTokens}。

插槽: 子组件（尾随闭包）

SCardHeader

标题 + 描述（+ 可选的右侧 SCardAction）。

插槽: 子组件（尾随闭包）

SCardTitle

属性	类型	默认值	说明
text	ResourceStr	''

SCardDescription

属性	类型	默认值	说明
text	ResourceStr	''

SCardAction

放置在卡片右上角的头部操作。

插槽: 子组件（尾随闭包）

SCardContent

插槽: 子组件（尾随闭包）

SCardFooter

操作行；卡片较窄时会换行到多行。

插槽: 子组件（尾随闭包）