跳到主要内容

Card 卡片

通用内容卡片——白底，12px 圆角，14px padding，唯一的卡片阴影。

实时预览​

下方渲染的就是 src/components/ui/Card/Card.tsx 本体，通过 react-native-web 翻译成浏览器节点。

default · 带阴影
东方便利店 · 浦东店

本月订单合计 ¥12,480，主要采购统一冰红茶、阿萨姆奶茶。距离 1.2 km。

flat · (deprecated 等价 plain，新代码请用 plain)
说明

历史 variant，视觉与 plain 一致。新代码改用 plain。

plain · 仅圆角，无阴影无描边（嵌套用）

plain 卡片不带视觉外延 —— 嵌套到已有 surface 容器内时仅靠 padding + radius 区分内容。

plain + borderColor · 状态彩边（如 Confirmation）

2px 主橙描边，用于操作确认这种需要"挑出来看一眼"的卡片。

组合内容
已完成 · 拜访
14:02
已完成本日全部 4 个客户拜访，待提交日报。

视觉规范​

元素规则
背景#FFFFFF
圆角12px (radius.xl)
Padding14px (space.6)
阴影0 1px 4px rgba(0,0,0,0.08) (shadow.card)
Variant plain无阴影、无描边（嵌套场景；flat 已 deprecated 等价 plain）

主题键（Tokens）​

Token来源作用
c.surfaceuseColors()卡片背景色（白 / 暗色 surface）
radius.xl@unif/react-native-design默认圆角（12，可被 borderRadius 覆盖）
space['6']@unif/react-native-design默认内边距（14，可被 padding 覆盖）
s.carduseShadow()default 变体卡片阴影（暗色置零）

用法​

import { Card } from '@unif/react-native-design';

{/* default — 白卡 + 阴影 */}
<Card>
  <Text>普通卡片</Text>
</Card>

{/* plain — 仅圆角，无阴影无描边（嵌套场景） */}
<Card variant="plain">
  <Text>嵌套用</Text>
</Card>

{/* 状态色边框（如 Confirmation）— 2px 彩边，颜色走 useColors() */}
function Confirm() {
  const c = useColors();
  return (
    <Card variant="plain" borderColor={c.primary}>
      <Text>操作确认</Text>
    </Card>
  );
}

{/* bare — 内容自控 padding（如 Tool 卡片头/体不同 padding）*/}
<Card variant="plain" bare>
  <Header />
  <Body />
</Card>

{/* fill — Card 撑满 flex 父 + 内部列表滚动（如 Me 屏会话列表）*/}
<View style={{ flex: 1 }}>
  <Card variant="plain" fill>
    <Header />
    <ScrollView style={{ flex: 1 }}>{/* 长列表 */}</ScrollView>
  </Card>
</View>

variant="flat" 已 deprecated，等价 plain，新代码请用 plain。

API​

PropType默认说明
childrenReactNode—卡片内容
variant'default' | 'flat' | 'plain''default'带阴影 / 仅圆角无阴影。'flat' 已 deprecated 等价 'plain'
paddingnumber14（space['6']）内边距
borderRadiusnumber12（radius.xl）圆角
borderColorstring—强调描边色（任意 variant 均生效;启用时默认 2px）
borderWidthnumber2与 borderColor 配合
barebooleanfalse抑制内边距,内容自控（与 variant 正交）
fillbooleanfalse撑满模式:外层 + 内层 clip 均 flex:1,Card 在 flex 父里撑满、内容区填满外层（内部 flex:1 滚动列表据此拿到高度）
styleStyleProp<ViewStyle>—额外样式覆盖
testIDstring—E2E / 测试定位

无障碍（a11y）​

来源：src/components/ui/Card/Card.tsx、types.ts。

本组件为展示 / 容器用，无交互（渲染为 <View>，仅负责背景 / 圆角 / 阴影 / 内边距）。源码未设置任何 a11y prop，继承底层 <View> 默认。a11y 语义由其 children 内容自行承载；若整张卡片需可点击，请在 children 内放可点区域（如 Cell 的 onPress 或 Button），不要把点击语义挂在 Card 本身。

不要​

  • ❌ 不要叠加多层阴影——卡片只有一种阴影
  • ❌ 不要把 List 行做成 Card——List 行用 Cell
  • ❌ 不要给 Card 加渐变背景——只有 logo 和 drawer header 允许渐变