卡片

一个 Jetpack Compose 卡片组件，用于在有样式的容器中显示内容。

Android

Bundled version:

~55.0.2

Expo UI 卡片与官方 Jetpack Compose Card API 匹配，并在带样式的表面容器内显示内容，可选择添加阴影和轮廓。

🌐 Expo UI Card matches the official Jetpack Compose Card API and displays content inside a styled surface container with optional elevation and outline.

安装

🌐 Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

基础卡

🌐 Basic card

BasicCardExample.tsx

import { Host, Card, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicCardExample() {
  return (
    <Host matchContents>
      <Card>
        <Text modifiers={[paddingAll(16)]}>This is a basic card with default styling.</Text>
      </Card>
    </Host>
  );
}

卡片类型

🌐 Card types

使用 Card、ElevatedCard 或 OutlinedCard 来表示不同的样式。

🌐 Use Card, ElevatedCard, or OutlinedCard for different styles.

CardTypesExample.tsx

import { Host, Card, ElevatedCard, OutlinedCard, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function CardTypesExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 12 }}>
        <Card>
          <Text modifiers={[paddingAll(16)]}>Default card</Text>
        </Card>
        <ElevatedCard>
          <Text modifiers={[paddingAll(16)]}>Elevated card</Text>
        </ElevatedCard>
        <OutlinedCard>
          <Text modifiers={[paddingAll(16)]}>Outlined card</Text>
        </OutlinedCard>
      </Column>
    </Host>
  );
}

应用接口

🌐 API

import { Card, ElevatedCard, OutlinedCard } from '@expo/ui/jetpack-compose';

Component

`Card`

Android

Type: React.Element<CardProps>

A card component that provides a surface for content.

CardProps

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the card.

`color`

Android

Optional • Type: ColorValue

The background color of the card.

`elementColors`

Android

Optional • Type: CardElementColors

Colors for card's core elements.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`variant`

Android

Optional • Literal type: string • Default: 'default'

The variant of the card.

'default' - A filled card with no outline.
'elevated' - A filled card with elevation/shadow.
'outlined' - A card with an outline border.

Acceptable values are: 'default' | 'elevated' | 'outlined'

Types

`CardElementColors`

Android

Colors for card's core elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-