DéveloppeursDocsFournisseurs
Connexion
Yeria
Utilisateurs
Développeurs
Connexion
Documentation

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 sous-titre
  • 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.subtitlestringoptionnel
Sous-titre affiché sous le titre
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.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

setSubtitle(subtitle)→ this
Définit le sous-titre affiché sous le titre principal
  • subtitle - Texte du sous-titre
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
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
Définit la navigation vers la vue suivante (hérité de BaseView)
  • url - URL de la vue suivante
setPrev(url)→ this
Définit la navigation vers la vue précédente (hérité de BaseView)
  • url - URL de la vue précédente
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    .setSubtitle('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    .setSubtitle('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    .setSubtitle('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    .setSubtitle('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    .setSubtitle('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    .setSubtitle('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    "subtitle": "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