Pour le moment, la documentation est uniquement disponible en français.
CustomContent
Le composant CustomContent est un conteneur polyvalent permettant d'afficher du contenu textuel, des images, des listes, et des appels à l'action (CTA) avec des options de personnalisation avancées. Il est conçu pour être flexible et s'adapter à divers besoins de mise en page.
Propriétés (Props)
| Propriété | Type | Description | Valeur par défaut |
|---|---|---|---|
title | string | node | Titre principal du contenu. | N/A |
content | string | node | Contenu textuel principal. | N/A |
image | string | URL de l'image à afficher. | N/A |
imagePosition | string | Position de l'image ('top', 'bottom', 'left', 'right'). | 'top' |
spacing | number | Espace intérieur (padding) du conteneur. | 2 |
borderRadius | number | Rayon de bordure du conteneur. | 2 |
boxShadow | number | Ombrage du conteneur (niveau de profondeur). | 1 |
animationDirection | string | null | Direction de l'animation ('left', 'right', 'up', 'down'). | null |
animationDuration | number | Durée de l'animation en secondes. | 0.5 |
ctaText | string | node | null | Texte du bouton d'appel à l'action. | null |
ctaLink | string | Lien URL du CTA. | '#' |
ctaPosition | string | Position du CTA ('left', 'center', 'right', 'bottom'). | 'bottom' |
ctaStyles | object | Styles personnalisés pour le bouton CTA. | {} |
onCtaClick | function | null | Fonction de rappel pour l'événement de clic sur le CTA. | null |
listItems | array | Éléments de la liste à afficher. | [] |
listType | string | Type de liste ('bullet' ou 'checkbox'). | 'bullet' |
bulletIcon | node | Icône utilisée pour les éléments de liste de type 'bullet'. | <Circle /> |
contentAlignment | string | Alignement du contenu textuel ('left', 'center', 'right', 'inherit'). | 'inherit' |
titleMarginTop | number | Marge supérieure du titre. | 1 |
sx | object | Styles supplémentaires à appliquer au conteneur principal. | {} |
Configuration Avancée
Taille (Size)
La propriété spacing contrôle l'espace intérieur (padding) du conteneur. Elle accepte une valeur numérique correspondant aux unités de l'espace définies dans le thème Material-UI.
Bordure (Border)
La propriété borderRadius définit le rayon des coins du conteneur. Vous pouvez ajuster cette valeur pour obtenir des coins plus arrondis ou plus carrés.
Ombrage (Shadow)
La propriété boxShadow permet d'ajouter une ombre portée au conteneur. Les valeurs disponibles correspondent aux niveaux d'ombre définis dans le thème Material-UI.
Appel à l'Action (CTA)
Les propriétés ctaText, ctaLink, ctaPosition, ctaStyles, et onCtaClick permettent de personnaliser le bouton CTA. Vous pouvez définir le texte, le lien, la position (gauche, centre, droite, bas), les styles personnalisés, et gérer les événements de clic.
Images
La propriété image permet d'afficher une image dans le conteneur. La position de l'image est contrôlée par imagePosition, qui peut être 'top', 'bottom', 'left', ou 'right'. Vous pouvez également ajuster la taille et les marges de l'image via les styles intégrés.
Animations
Les propriétés animationDirection et animationDuration permettent d'ajouter des animations au conteneur. animationDirection définit la direction de l'animation ('left', 'right', 'up', 'down'), tandis que animationDuration contrôle la durée de l'animation en secondes.
Exemples d'Utilisation
1. Configuration de Base
Cet exemple montre l'utilisation de base du composant avec des propriétés minimales.
Bienvenue sur notre site
Découvrez nos fonctionnalités exceptionnelles et profitez d'une expérience inégalée.
2. Personnalisation Avancée
Cet exemple illustre une configuration avancée avec bordure arrondie, ombrage, CTA personnalisé, et animation.
Nos Services
Nous offrons une gamme complète de services pour répondre à vos besoins spécifiques.
3. Liste avec Cases à Cocher
Utilisation du type de liste 'checkbox' avec différents états des cases.
Fonctionnalités Clés
Voici quelques-unes de nos fonctionnalités principales.
Facilité d'utilisation
Support 24/7
Sécurité avancée
4. Image en Haut avec Animation
L'image est positionnée en haut avec une animation d'apparition de la section.
À Propos de Nous
Apprenez-en davantage sur notre mission et notre équipe dédiée.
Remarque : Le composant CustomContent est hautement personnalisable. Vous pouvez ajuster les propriétés en fonction de vos besoins spécifiques pour obtenir la mise en page désirée. N'hésitez pas à explorer toutes les options disponibles pour tirer le meilleur parti de ce composant.