CardView

Fiche compacte d'un élément unique, avec stats et actions.

Description

Le composant CardView est une vue « fiche produit » compacte qui met en avant un élément unique avec ses statistiques, ses sections et ses actions. Elle convient à la présentation d'un produit, d'un profil utilisateur, du détail d'un événement, ou de toute entité unique demandant un affichage détaillé.

La carte comprend :

Titre et intro
Description
Badge (facultatif)
Image principale (facultative)
Statistiques (paires clé-valeur)
Sections (titre + texte)
Boutons d'action
Métadonnées personnalisées

Description des champs

idstringrequis

Identifiant unique de la vue carte

typestringrequis

Toujours "Card"

contentCardContentrequis

Objet de contenu de la carte

content.titlestringrequis

Titre de la carte (défini dans le constructeur)

content.introstringoptionnel

Ligne de contexte sous le titre — même rôle que l'intro de toutes les autres vues. S'appelait subtitle.

content.descriptionstringoptionnel

Description détaillée

content.badgestringoptionnel

Texte du badge (par exemple « New », « Popular »)

content.imageCardImageoptionnel

Image principale

content.image.urlstringrequis*

URL de l'image (requise si une image est définie)

content.image.altstringoptionnel

Texte alternatif de l'image

content.statsHeadingstringoptionnel

Intitulé du bloc de statistiques. Absent = pas de titre : le client n'en dessine aucun de son cru.

content.statsCardStat[]optionnel

Tableau de statistiques clé-valeur

content.stats[].labelstringrequis

Libellé de la statistique

content.stats[].valuestringrequis

Valeur de la statistique

content.sectionsCardSection[]optionnel

Tableau de sections descriptives

content.sections[].headingstringrequis

Titre de la section

content.sections[].bodystringrequis

Texte de la section

content.actionsCardAction[]optionnel

Tableau de boutons d'action

content.actions[].textstringrequis

Texte du bouton

content.actions[].methodHttpMethodoptionnel

Méthode HTTP (par défaut : POST)

content.actions[].confirmMessagestringoptionnel

Boîte de confirmation facultative

content.actions[].hrefstringoptionnel

URL de lien facultative

content.actions[].iconstringoptionnel

Identifiant d'icône facultatif

content.actions[].variantstringoptionnel

Variante du bouton : "primary", "secondary", "link"

content.metaRecord<string, unknown>optionnel

Métadonnées facultatives

processIdstringoptionnel

Identifiant de processus pour les parcours en plusieurs étapes

metadataobjectoptionnel

Métadonnées de la vue (version, createdAt, author, tags)

Note : une vue carte doit comporter au moins une description, une statistique ou une section pour être valide.

Méthodes

setIntro(intro)→ this

Définit la ligne de contexte affichée sous le titre principal. Refuse une valeur vide

intro - Texte d'introduction

setSubtitle(subtitle)→ this

Nom historique de setIntro, conservé. Écrit la même clé

subtitle - Texte d'introduction

setDescription(description)→ this

Définit la description détaillée du corps de la carte

description - Texte de la description

setBadge(badge)→ this

Définit un badge affiché au-dessus du titre

badge - Texte du badge, ou undefined

setImage(url, alt?)→ this

Définit l'image principale de la carte

url - URL de l'image
alt - Texte alternatif

clearImage()→ this

Supprime l'image de la carte

setStatsHeading(heading)→ this

Nomme le bloc de statistiques. Facultatif ; refuse une valeur vide

heading - Texte de l'intitulé

addStat(label, value)→ this

Ajoute une statistique clé-valeur

label - Libellé de la statistique
value - Valeur de la statistique

clearStats()→ this

Supprime toutes les statistiques

addSection(heading, body)→ this

Ajoute une section descriptive

heading - Titre de la section
body - Texte de la section

clearSections()→ this

Supprime toutes les sections

addAction(text, method?, options?)→ this

Ajoute un bouton d'action

text - Texte du bouton
method - Méthode HTTP (par défaut : POST)
options - Options de l'action (confirmMessage, href, icon, variant)

clearActions()→ this

Supprime toutes les actions

setMetadata(meta)→ this

Définit des métadonnées personnalisées

meta - Objet de métadonnées

getContent()→ CardContent

Retourne l'objet de contenu complet de la carte

serve()→ Record<string, unknown>

Sert la vue après validation (hérité de BaseView)

toJSON()→ Record<string, unknown>

Retourne la représentation JSON (hérité de BaseView)

setState(key, value)→ void

Définit l'état de la vue (hérité de BaseView)

key - Clé d'état
value - Valeur d'état

getState(key)→ unknown

Lit l'état de la vue (hérité de BaseView)

key - Clé d'état

setNext(url)→ this

Contrôle avant d'une séquence paginée, dessiné par le client — voir Navigation

url - URL ou chemin de la vue suivante

setPrev(url)→ this

Contrôle arrière de la même séquence. Ce n'est PAS là que mène le geste de retour — voir Navigation

url - URL ou chemin de la vue précédente

setEntry(entry)→ this

Comment cette vue entre dans la pile de navigation du client (défaut : push) — voir Navigation

entry - 'push', 'replace', ou un entier <= 1

setPage(current, total?)→ this

Où cette vue se situe dans sa séquence ; le client dessine l'indicateur — voir Navigation

current - position, à partir de 1
total - longueur de la séquence, si connue

setProcess(processId, context?)→ this

Définit le contexte de processus (hérité de BaseView)

processId - Identifiant du processus
context - Contexte du processus

Exemples de code JavaScript

Carte simple

javascript

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const card = yeriaApp
6    .createCardView('product-card', 'Super Gadget')
7    .setIntro('Boost your day')
8    .setDescription('A compact companion to organize your tasks and automate your daily routines.')
9    .addStat('Price', '49 €')
10    .addSection('Key Points', 'Voice assistant, 48h battery life, multi-device sync.')
11    .addAction('Buy Now', 'POST', { confirmMessage: 'Confirm your purchase?' });
12
13const response = yeriaApp.serve(card);

Carte avec image

javascript

1const card = yeriaApp
2    .createCardView('product', 'Product Name')
3    .setIntro('Product Category')
4    .setDescription('Product description goes here.')
5    .setImage('https://example.com/product.jpg', 'Product Image')
6    .addStat('Price', '$99')
7    .addStat('Rating', '4.5/5')
8    .addAction('View Details', 'GET', { href: '/products/123' });

Carte avec badge

javascript

1const card = yeriaApp
2    .createCardView('featured-product', 'Featured Product')
3    .setBadge('New')
4    .setIntro('Limited Edition')
5    .setDescription('Exclusive product available for a limited time.')
6    .setImage('https://example.com/product.jpg', 'Product')
7    .addStat('Price', '$199')
8    .addStat('Stock', 'Only 5 left')
9    .addAction('Purchase', 'POST');

Carte avec plusieurs statistiques

javascript

1const card = yeriaApp
2    .createCardView('user-profile', 'John Doe')
3    .setIntro('Premium Member')
4    .setDescription('Active user since 2020')
5    .addStat('Posts', '125')
6    .addStat('Followers', '1.2K')
7    .addStat('Following', '450')
8    .addStat('Rating', '4.8/5')
9    .addAction('View Profile', 'GET', { href: '/users/john-doe' });

Carte avec plusieurs sections

javascript

1const card = yeriaApp
2    .createCardView('event', 'Tech Conference 2025')
3    .setIntro('March 15-17, 2025')
4    .setDescription('Join us for the biggest tech conference of the year.')
5    .addStat('Date', 'March 15-17')
6    .addStat('Location', 'San Francisco')
7    .addStat('Price', '$299')
8    .addSection('About', 'Three days of talks, workshops, and networking.')
9    .addSection('Speakers', 'Industry leaders from Google, Apple, and Microsoft.')
10    .addSection('Schedule', 'Day 1: Keynotes, Day 2: Workshops, Day 3: Networking')
11    .addAction('Register', 'POST')
12    .addAction('View Schedule', 'GET', { href: '/events/schedule' });

Carte avec plusieurs actions

javascript

1const card = yeriaApp
2    .createCardView('item', 'Item Name')
3    .setDescription('Item description')
4    .addStat('Price', '$49')
5    .addAction('Buy Now', 'POST', { 
6        confirmMessage: 'Confirm purchase?',
7        variant: 'primary'
8    })
9    .addAction('Add to Cart', 'POST', { variant: 'secondary' })
10    .addAction('View Details', 'GET', { 
11        href: '/items/123',
12        variant: 'link'
13    });

Carte avec variantes d'action

javascript

1const card = yeriaApp
2    .createCardView('article', 'Article Title')
3    .setDescription('Article description')
4    .addStat('Views', '1.2K')
5    .addStat('Likes', '89')
6    .addAction('Read More', 'GET', { 
7        href: '/articles/123',
8        variant: 'primary'
9    })
10    .addAction('Share', 'POST', { variant: 'secondary' })
11    .addAction('Bookmark', 'POST', { variant: 'link' });

Carte avec métadonnées

javascript

1const card = yeriaApp
2    .createCardView('custom-card', 'Custom Card')
3    .setDescription('Card with custom metadata')
4    .addStat('Value', '100')
5    .setMetadata({
6        category: 'premium',
7        tags: ['featured', 'popular'],
8        createdAt: new Date().toISOString()
9    })
10    .addAction('View', 'GET');

Réinitialisation des éléments d'une carte

javascript

1const card = yeriaApp
2    .createCardView('dynamic-card', 'Dynamic Card')
3    .setDescription('Card with dynamic content')
4    .addStat('Stat 1', 'Value 1')
5    .addStat('Stat 2', 'Value 2')
6    .addSection('Section 1', 'Body 1')
7    .addAction('Action 1', 'POST');
8
9// Clear stats
10card.clearStats();
11
12// Clear sections
13card.clearSections();
14
15// Clear actions
16card.clearActions();
17
18// Clear image
19card.clearImage();

Carte dans un parcours en plusieurs étapes

javascript

1const card = yeriaApp
2    .createCardView('step-summary', 'Step Summary')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 2,
6        totalSteps: 3
7    })
8    .setDescription('Review your information before proceeding')
9    .addStat('Completed', 'Step 1')
10    .addStat('Current', 'Step 2')
11    .addStat('Remaining', 'Step 3')
12    .addAction('Continue', 'POST');

Exemple de carte complexe

javascript

1const card = yeriaApp
2    .createCardView('product-detail', 'Premium Headphones')
3    .setBadge('Best Seller')
4    .setIntro('Wireless Audio')
5    .setDescription('High-quality wireless headphones with noise cancellation and 30-hour battery life.')
6    .setImage('https://example.com/headphones.jpg', 'Premium Headphones')
7    .addStat('Price', '$299')
8    .addStat('Rating', '4.8/5')
9    .addStat('Reviews', '1,234')
10    .addStat('In Stock', 'Yes')
11    .addSection('Features', 'Noise cancellation, 30h battery, wireless charging, premium materials.')
12    .addSection('Specifications', 'Driver: 40mm, Frequency: 20Hz-20kHz, Weight: 250g.')
13    .addSection('Warranty', '2-year manufacturer warranty included.')
14    .addAction('Add to Cart', 'POST', { 
15        confirmMessage: 'Add to cart?',
16        variant: 'primary'
17    })
18    .addAction('Buy Now', 'POST', { variant: 'primary' })
19    .addAction('Compare', 'GET', { href: '/compare', variant: 'secondary' })
20    .addAction('Share', 'POST', { variant: 'link' });

Exemple JSON complet

json

1{
2  "id": "product-detail",
3  "type": "Card",
4  "content": {
5    "title": "Premium Headphones",
6    "badge": "Best Seller",
7    "intro": "Wireless Audio",
8    "description": "High-quality wireless headphones with noise cancellation and 30-hour battery life.",
9    "image": {
10      "url": "https://example.com/headphones.jpg",
11      "alt": "Premium Headphones"
12    },
13    "stats": [
14      {
15        "label": "Price",
16        "value": "$299"
17      },
18      {
19        "label": "Rating",
20        "value": "4.8/5"
21      },
22      {
23        "label": "Reviews",
24        "value": "1,234"
25      },
26      {
27        "label": "In Stock",
28        "value": "Yes"
29      }
30    ],
31    "sections": [
32      {
33        "title": "Features",
34        "content": "Noise cancellation, 30h battery, wireless charging, premium materials."
35      },
36      {
37        "title": "Specifications",
38        "content": "Driver: 40mm, Frequency: 20Hz-20kHz, Weight: 250g."
39      },
40      {
41        "title": "Warranty",
42        "content": "2-year manufacturer warranty included."
43      }
44    ],
45    "actions": [
46      {
47        "code": "add-to-cart",
48        "title": "Add to Cart",
49        "method": "POST",
50        "confirmMessage": "Add to cart?",
51        "variant": "primary"
52      },
53      {
54        "code": "buy-now",
55        "title": "Buy Now",
56        "method": "POST",
57        "variant": "primary"
58      },
59      {
60        "code": "compare",
61        "title": "Compare",
62        "method": "GET",
63        "href": "/compare",
64        "variant": "secondary"
65      },
66      {
67        "code": "share",
68        "title": "Share",
69        "method": "POST",
70        "variant": "link"
71      }
72    ]
73  },
74  "metadata": {
75    "version": "1.0.0",
76    "createdAt": "2025-01-28T10:00:00.000Z"
77  }
78}

← Précédent

ReaderView

CarouselView