Composant Card avec en-tête, contenu et pied de page pour organiser le contenu du tableau de bord.

Carte

Le composant Card fournit un conteneur avec coins arrondis, ombre et sections structurées pour afficher du contenu groupé sur les écrans de tableau de bord.

Utilisation de base

import { Card } from "@/components/ui/Card";

export default function DashboardScreen() {
  return (
    <Card>
      <Card.Header title="Revenue" subtitle="Last 30 days" />
      <Card.Content>
        <Text style={{ fontSize: 32, fontWeight: "700" }}>$12,450</Text>
      </Card.Content>
    </Card>
  );
}

Sections de la carte

Les cartes sont composées de trois sections optionnelles :

<Card>
  <Card.Header title="Team Members" subtitle="3 active" />
  <Card.Content>
    <UserList users={users} />
  </Card.Content>
  <Card.Footer>
    <Button title="Invite" size="sm" onPress={handleInvite} />
  </Card.Footer>
</Card>

Section	Objectif
`Card.Header`	Titre, sous-titre, action optionnelle à droite
`Card.Content`	Contenu principal
`Card.Footer`	Actions, liens, informations secondaires

En-tête avec action

Ajoutez une action à droite de l'en-tête :

<Card.Header
  title="Notifications"
  subtitle="5 unread"
  right={
    <TouchableOpacity onPress={markAllRead}>
      <Text style={{ color: "#3B82F6" }}>Mark all read</Text>
    </TouchableOpacity>
  }
/>

Variantes de carte

// Carte par défaut avec ombre
<Card variant="elevated">
  <Card.Content><Text>Elevated card</Text></Card.Content>
</Card>

// Carte plate avec bordure
<Card variant="outlined">
  <Card.Content><Text>Outlined card</Text></Card.Content>
</Card>

// Sans bordure ni ombre
<Card variant="flat">
  <Card.Content><Text>Flat card</Text></Card.Content>
</Card>

Carte cliquable

Rendez toute la carte cliquable :

<Card pressable onPress={() => router.push("/details")}>
  <Card.Content>
    <Text>Tap to view details</Text>
  </Card.Content>
</Card>

Les cartes cliquables incluent une animation d'opacité subtile au toucher pour un retour tactile.

Grille de tableau de bord

Utilisez les cartes dans une disposition en grille pour les vues de tableau de bord :

import { View, StyleSheet } from "react-native";

export default function Dashboard() {
  return (
    <View style={styles.grid}>
      <Card style={styles.half}>
        <Card.Header title="Users" />
        <Card.Content>
          <Text style={styles.metric}>1,234</Text>
        </Card.Content>
      </Card>
      <Card style={styles.half}>
        <Card.Header title="Revenue" />
        <Card.Content>
          <Text style={styles.metric}>$5,678</Text>
        </Card.Content>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  grid: { flexDirection: "row", gap: 12 },
  half: { flex: 1 },
  metric: { fontSize: 28, fontWeight: "700" },
});

Personnalisation

Surchargez le style du conteneur de la carte :

<Card style={{ backgroundColor: "#F0F9FF", borderColor: "#3B82F6" }}>
  <Card.Content>
    <Text>Custom styled card</Text>
  </Card.Content>
</Card>

Props du composant

Prop	Type	Défaut	Description
`variant`	`"elevated" \| "outlined" \| "flat"`	`"elevated"`	Variante visuelle
`pressable`	`boolean`	`false`	Rendre la carte cliquable
`onPress`	`() => void`	—	Gestionnaire de toucher
`style`	`ViewStyle`	—	Style du conteneur
`children`	`ReactNode`	—	Sections de la carte

Carte

On this page