DéveloppeursDocsFournisseurs
Connexion
Yeria
Utilisateurs
Développeurs
Connexion
Documentation

CarouselView

Diaporama pour mises en avant et annonces.

Description

Le composant CarouselView organise plusieurs diapositives de mise en avant, pour des bannières mobiles ou des séquences promotionnelles. Il convient aux contenus phares, aux annonces, aux promotions, ou à toute collection d'éléments à parcourir par balayage.

Chaque diapositive peut comporter :

  • Titre et description
  • Badge (facultatif)
  • Image (facultative)
  • Boutons d'action

Le carrousel prend en charge le défilement automatique, la lecture en boucle et des réglages d'affichage configurables.

Description des champs

idstringrequis
Identifiant unique de la vue carrousel
typestringrequis
Toujours "Carousel"
contentCarouselContentrequis
Objet de contenu du carrousel
content.titlestringrequis
Titre du carrousel (défini dans le constructeur)
content.subtitlestringoptionnel
Sous-titre facultatif
content.slidesCarouselSlide[]requis
Tableau de diapositives (au moins une requise)
content.slides[].idstringrequis
Identifiant unique de la diapositive
content.slides[].titlestringrequis
Titre de la diapositive
content.slides[].descriptionstringoptionnel
Description de la diapositive
content.slides[].badgestringoptionnel
Texte du badge (par exemple « New », « Featured »)
content.slides[].imageCardImageoptionnel
Image de la diapositive
content.slides[].image.urlstringrequis*
URL de l'image (requise si une image est définie)
content.slides[].image.altstringoptionnel
Texte alternatif de l'image
content.slides[].actionsCardAction[]optionnel
Tableau de boutons d'action de la diapositive
content.slides[].actions[].textstringrequis
Texte du bouton
content.slides[].actions[].methodHttpMethodoptionnel
Méthode HTTP (par défaut : POST)
content.slides[].actions[].confirmMessagestringoptionnel
Boîte de confirmation facultative
content.slides[].actions[].hrefstringoptionnel
URL de lien facultative
content.slides[].actions[].iconstringoptionnel
Identifiant d'icône facultatif
content.slides[].actions[].variantstringoptionnel
Variante du bouton : "primary", "secondary", "link"
content.slides[].metaRecord<string, unknown>optionnel
Métadonnées facultatives de la diapositive
content.settingsCarouselSettingsoptionnel
Réglages d'affichage du carrousel
content.settings.autoplaybooleanoptionnel
Active le défilement automatique (par défaut : false)
content.settings.intervalMsnumberoptionnel
Intervalle du défilement automatique, en millisecondes (par défaut : 6000)
content.settings.loopbooleanoptionnel
Active la lecture en boucle (par défaut : true)
content.settings.showIndicatorsbooleanoptionnel
Affiche les indicateurs de diapositive (par défaut : true)
processIdstringoptionnel
Identifiant de processus pour les parcours en plusieurs étapes
metadataobjectoptionnel
Métadonnées de la vue (version, createdAt, author, tags)

Méthodes

setSubtitle(subtitle)→ this
Définit le sous-titre facultatif affiché sous le titre du carrousel
  • subtitle - Texte du sous-titre
setSettings(settings)→ this
Remplace le comportement par défaut du défilement automatique et des indicateurs
  • settings - Objet CarouselSettings
addSlide(slide)→ this
Ajoute au carrousel une diapositive déjà construite
  • slide - Objet CarouselSlide
createSlide(id, title, description?, options?)→ CarouselSlide
Crée un objet diapositive, sans l'ajouter au carrousel
  • id - Identifiant de la diapositive
  • title - Titre de la diapositive
  • description - Description facultative
  • options - Options de la diapositive (imageUrl, imageAlt, badge)
addSlideAction(slideId, text, method?, options?)→ this
Ajoute un bouton d'action à une diapositive précise
  • slideId - Identifiant de la diapositive
  • text - Texte du bouton
  • method - Méthode HTTP (par défaut : POST)
  • options - Options de l'action (confirmMessage, href, icon, variant)
clearSlides()→ this
Supprime toutes les diapositives du carrousel
getContent()→ CarouselContent
Retourne l'objet de contenu complet du carrousel
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

javascript
1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const carousel = yeriaApp
6    .createCarouselView('home-carousel', 'Featured')
7    .addSlide(
8        carousel.createSlide('release-2-0', 'Version 2.0', 'Discover new features', {
9            imageUrl: 'https://example.com/banners/release.jpg',
10            badge: 'New'
11        })
12    )
13    .addSlide(
14        carousel.createSlide('case-study', 'Case Study', 'How ACME doubled productivity', {
15            imageUrl: 'https://example.com/banners/case-study.jpg'
16        })
17    );
18
19const response = yeriaApp.serve(carousel);
javascript
1const carousel = yeriaApp
2    .createCarouselView('promotions', 'Special Offers')
3    .setSubtitle('Limited time offers')
4    .addSlide(
5        carousel.createSlide('offer-1', 'Offer 1', 'Description 1', {
6            imageUrl: 'https://example.com/offer1.jpg',
7            badge: '50% Off'
8        })
9    )
10    .addSlide(
11        carousel.createSlide('offer-2', 'Offer 2', 'Description 2', {
12            imageUrl: 'https://example.com/offer2.jpg'
13        })
14    )
15    .setSettings({
16        autoplay: true,
17        intervalMs: 5000,  // 5 seconds
18        loop: true,
19        showIndicators: true
20    });
javascript
1const carousel = yeriaApp
2    .createCarouselView('featured', 'Featured Content')
3    .addSlide(
4        carousel.createSlide('article-1', 'Article 1', 'Read our latest article', {
5            imageUrl: 'https://example.com/article1.jpg'
6        })
7    )
8    .addSlide(
9        carousel.createSlide('article-2', 'Article 2', 'Another great read', {
10            imageUrl: 'https://example.com/article2.jpg'
11        })
12    )
13    .addSlideAction('article-1', 'Read More', 'GET', { 
14        href: '/articles/1',
15        variant: 'primary'
16    })
17    .addSlideAction('article-2', 'Read More', 'GET', { 
18        href: '/articles/2',
19        variant: 'primary'
20    });
javascript
1const carousel = yeriaApp
2    .createCarouselView('products', 'Featured Products')
3    .addSlide(
4        carousel.createSlide('product-1', 'Product 1', 'Amazing product', {
5            imageUrl: 'https://example.com/product1.jpg',
6            badge: 'Popular'
7        })
8    );
9
10carousel
11    .addSlideAction('product-1', 'Buy Now', 'POST', { 
12        confirmMessage: 'Add to cart?',
13        variant: 'primary'
14    })
15    .addSlideAction('product-1', 'View Details', 'GET', { 
16        href: '/products/1',
17        variant: 'secondary'
18    })
19    .addSlideAction('product-1', 'Share', 'POST', { variant: 'link' });
javascript
1const carousel = yeriaApp
2    .createCarouselView('announcements', 'Announcements')
3    .addSlide({
4        id: 'announcement-1',
5        title: 'New Feature',
6        description: 'We\'ve added a new feature',
7        badge: 'New',
8        image: {
9            url: 'https://example.com/announcement1.jpg',
10            alt: 'Announcement 1'
11        },
12        actions: [
13            {
14                text: 'Learn More',
15                method: 'GET',
16                href: '/features/new',
17                variant: 'primary'
18            }
19        ],
20        meta: {
21            category: 'feature',
22            priority: 'high'
23        }
24    });
javascript
1const carousel = yeriaApp
2    .createCarouselView('banner', 'Banner')
3    .setSubtitle('Scroll through our content')
4    .addSlide(
5        carousel.createSlide('slide-1', 'Slide 1', 'First slide')
6    )
7    .addSlide(
8        carousel.createSlide('slide-2', 'Slide 2', 'Second slide')
9    )
10    .addSlide(
11        carousel.createSlide('slide-3', 'Slide 3', 'Third slide')
12    )
13    .setSettings({
14        autoplay: false,      // Manual navigation only
15        loop: false,          // Don't loop (stop at end)
16        showIndicators: true  // Show dots
17    });
javascript
1const carousel = yeriaApp
2    .createCarouselView('dynamic-carousel', 'Dynamic Carousel')
3    .addSlide(
4        carousel.createSlide('slide-1', 'Slide 1', 'Description 1')
5    )
6    .addSlide(
7        carousel.createSlide('slide-2', 'Slide 2', 'Description 2')
8    );
9
10// Clear all slides
11carousel.clearSlides();
12
13// Add new slides
14carousel
15    .addSlide(
16        carousel.createSlide('new-slide-1', 'New Slide 1', 'New description 1')
17    )
18    .addSlide(
19        carousel.createSlide('new-slide-2', 'New Slide 2', 'New description 2')
20    );
javascript
1const carousel = yeriaApp
2    .createCarouselView('onboarding-steps', 'Get Started')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 1,
6        totalSteps: 3
7    })
8    .setSubtitle('Learn about our features')
9    .addSlide(
10        carousel.createSlide('step-1', 'Step 1', 'Create your account', {
11            imageUrl: 'https://example.com/step1.jpg'
12        })
13    )
14    .addSlide(
15        carousel.createSlide('step-2', 'Step 2', 'Complete your profile', {
16            imageUrl: 'https://example.com/step2.jpg'
17        })
18    )
19    .addSlide(
20        carousel.createSlide('step-3', 'Step 3', 'Start using the app', {
21            imageUrl: 'https://example.com/step3.jpg'
22        })
23    )
24    .setSettings({
25        autoplay: true,
26        intervalMs: 4000,
27        loop: true,
28        showIndicators: true
29    });
javascript
1const carousel = yeriaApp
2    .createCarouselView('homepage-hero', 'Welcome')
3    .setSubtitle('Discover what we offer')
4    .addSlide(
5        carousel.createSlide('feature-1', 'Feature 1', 'Amazing feature description', {
6            imageUrl: 'https://example.com/feature1.jpg',
7            badge: 'New'
8        })
9    )
10    .addSlide(
11        carousel.createSlide('feature-2', 'Feature 2', 'Another great feature', {
12            imageUrl: 'https://example.com/feature2.jpg'
13        })
14    )
15    .addSlide(
16        carousel.createSlide('feature-3', 'Feature 3', 'Yet another feature', {
17            imageUrl: 'https://example.com/feature3.jpg',
18            badge: 'Popular'
19        })
20    )
21    .addSlideAction('feature-1', 'Try Now', 'POST', { variant: 'primary' })
22    .addSlideAction('feature-1', 'Learn More', 'GET', { 
23        href: '/features/1',
24        variant: 'secondary'
25    })
26    .addSlideAction('feature-2', 'Get Started', 'POST', { variant: 'primary' })
27    .addSlideAction('feature-3', 'Explore', 'GET', { 
28        href: '/features/3',
29        variant: 'primary'
30    })
31    .setSettings({
32        autoplay: true,
33        intervalMs: 5000,
34        loop: true,
35        showIndicators: true
36    });

Exemple JSON complet

json
1{
2  "id": "home-carousel",
3  "type": "Carousel",
4  "content": {
5    "title": "Featured Content",
6    "subtitle": "Scroll through our highlights",
7    "slides": [
8      {
9        "id": "release-2-0",
10        "title": "Version 2.0",
11        "description": "Discover the new features",
12        "image": {
13          "url": "https://cdn.example.com/banners/release.jpg",
14          "alt": "Version 2.0 Release"
15        },
16        "badge": "New",
17        "actions": [
18          {
19            "code": "read-more",
20            "title": "Read More",
21            "method": "GET",
22            "href": "/blog/version-2-0",
23            "variant": "link"
24          }
25        ]
26      },
27      {
28        "id": "case-study",
29        "title": "Case Study",
30        "description": "How ACME doubled productivity",
31        "image": {
32          "url": "https://cdn.example.com/banners/case-study.jpg",
33          "alt": "Case Study"
34        },
35        "actions": [
36          {
37            "code": "view-case-study",
38            "title": "View Case Study",
39            "method": "GET",
40            "href": "/case-studies/acme",
41            "variant": "primary"
42          }
43        ]
44      },
45      {
46        "id": "tutorial",
47        "title": "Tutorial",
48        "description": "Learn the basics in 5 minutes",
49        "image": {
50          "url": "https://cdn.example.com/banners/tutorial.jpg",
51          "alt": "Tutorial"
52        },
53        "actions": [
54          {
55            "code": "start-tutorial",
56            "title": "Start Tutorial",
57            "method": "POST",
58            "variant": "primary"
59          }
60        ]
61      }
62    ],
63    "settings": {
64      "autoplay": true,
65      "intervalMs": 5000,
66      "loop": true,
67      "showIndicators": true
68    }
69  },
70  "metadata": {
71    "version": "1.0.0",
72    "createdAt": "2025-01-28T10:00:00.000Z"
73  }
74}
← Précédent
CardView