跳到主要内容

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）

用法​

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>

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

API​

PropType默认说明
variant'default' | 'plain''default'默认带阴影 / 仅圆角无阴影。'flat' 已 deprecated 等价 'plain'
paddingnumber?14内边距
borderRadiusnumber?12圆角
borderColorstring?—强调描边色（启用时默认 2px）
borderWidthnumber?2与 borderColor 配合
bareboolean?false抑制内边距，内容自控

不要​

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