1.1.11 • Published 3 years ago
TP1 Création de Components React
🤓 Description
Vous trouverez dans ce dossier une StoryBook de 10 Components React modifiable incluant 3 exemple de modification pour chacun.
🎌 Pour Démarrer la StoryBook
yarn storybook
Liste des Components
- Alert (code Component, code Story)
- Avatar (code Component, code Story)
- Button (code Component, code Story)
- Card (code Component, code Story)
- DropDown (code Component, code Story)
- Navbar (code Component, code Story)
- Pagination (code Component, code Story)
- Table (code Component, code Story)
- Tag (code Component, code Story)
- Upload (code Component, code Story)
🫵 Modification Possible des Components
Alert (React-Bootstrap)
| Nom | Type | Option | Description |
|---|
| text | string | "Le texte de votre choix" | Le texte qui apparaitreras pour votre alerte |
| varient | string | 'primary', 'secondary', 'success', 'danger','warning', 'info', 'dark', 'light' | couleur d'arrière plan |
Avatar (ANT-Desing)
| Nom | Type | Option | Description |
|---|
| color | string | (rgb, rgba, nomDeCouleur etc..) | La couleur d'arrière plan désiré |
| varient | string | 'Le texte de votre choix' | Le mot qui apparaitras pour votre avtatar |
| type | string | 'small','medium','large' | Grosseur de l'avatar |
Button (ANT-Desing)
| Nom | Type | Option | Description |
|---|
| text | string | 'Le texte de votre choix' | Le texte qui apparais dans le bouton |
| type | string | 'primary', 'ghost', 'dashed', 'link', 'text', default' | Aspect du bouton |
| size | string | 'small','medium','large' | Grosseur du Boutton |
Card (React-Bootstrap)
| Nom | Type | Option | Description |
|---|
| textTitle | string | "Le texte de votre choix" | Le texte qui apparaitreras dans le corp de la carte |
| textBody | string | "Le texte de votre choix" | Le texte qui apparaitreras pour le titre de la carte |
| img | string | 'Le lien ou le chemin de l'image de votre choix' | L'image qui apparaitras dans la carte |
| width | string | (rem, em, %, px etc.. ) | Dimention de l'image shouaiter |
| Nom | Type | Option | Description |
|---|
| text | string | 'Le texte de votre choix' | Le texte affiché par default |
| trigger | string | 'click''hover'contexMenu | Clic gauche pour défilerPasser au dessusClic droit sur pour défiler |
NavBar (React-Bootstrap)
| Nom | Type | Option | Description |
|---|
| bgColor | string | 'primary', 'secondary', 'success', 'danger','warning', 'info', 'dark', 'light' | couleur d'arrière plan |
| textColor | string | 'dark', 'light' | couleur du texte qui s'ajuste selon la couleur de l'arrière plan |
| Nom | Type | Option | Description |
|---|
| totalItem | number | le nombre de votre choix | nombre d'items maximum souhaité dans une page |
| jumperVisible | boolean | true, false | pour afficher le "jumper" |
| changerVisible | boolean | true, false | pour afficher le "changer" |
Table (React-Bootstrap)
| Nom | Type | Option | Description |
|---|
| size | string | 'sm', 'null' | compact le tableau en réduisant le "padding" |
| darkMode | string | 'dark', 'null' | met le tableau en mode sombre |
Tag (ANT-Desing)
| Nom | Type | Option | Description |
|---|
| color | string | (rgb, rgba, nomDeCouleur etc..) | choix de la couleur du Tag |
Upload (ANT-Desing)
| Nom | Type | Option | Description |
|---|
| text | string | 'Le texte de votre choix' | nomme le nom du téléchargement que vous souhaiter |
📖 Bibliothèque externe Utilisé
🕺Contributeurs