[{"data":1,"prerenderedAt":704},["ShallowReactive",2],{"page-\u002Fnuxt-ui\u002Fpersonnaliser-un-composant":3,"pieces-nuxt-ui":662,"autour-\u002Fnuxt-ui\u002Fpersonnaliser-un-composant":687,"prerequis-\u002Fnuxt-ui\u002Fpersonnaliser-un-composant":691,"plan-nuxt-ui":693},{"id":4,"title":5,"body":6,"description":632,"extension":633,"ligne":634,"meta":635,"motsCles":636,"navigation":640,"niveau":641,"path":642,"prerequis":643,"ressources":645,"seo":653,"sources":654,"stem":660,"__hash__":661},"docs\u002Fnuxt-ui\u002F06.personnaliser-un-composant.md","Personnaliser un composant",{"type":7,"value":8,"toc":621},"minimark",[9,14,40,44,102,106,110,113,157,162,167,171,196,201,205,211,280,287,293,297,306,411,424,428,457,517,524,528,546,554,560,564,617],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,34,37],"ul",{},[18,19,20,21,25,26,29,30,33],"li",{},"Les trois niveaux de personnalisation : ",[22,23,24],"code",{},"class",", ",[22,27,28],{},"ui"," et ",[22,31,32],{},"app.config.ts",".",[18,35,36],{},"Cibler une partie précise d'un composant grâce à ses slots.",[18,38,39],{},"Changer les réglages par défaut de tous les boutons du site.",[10,41,43],{"id":42},"trois-niveaux-du-plus-local-au-plus-global","Trois niveaux, du plus local au plus global",[45,46,47,63],"table",{},[48,49,50],"thead",{},[51,52,53,57,60],"tr",{},[54,55,56],"th",{},"Niveau",[54,58,59],{},"Où",[54,61,62],{},"Portée",[64,65,66,79,90],"tbody",{},[51,67,68,73,76],{},[69,70,71],"td",{},[22,72,24],{},[69,74,75],{},"Sur le composant",[69,77,78],{},"Cette instance, la racine ou la base",[51,80,81,85,87],{},[69,82,83],{},[22,84,28],{},[69,86,75],{},[69,88,89],{},"Cette instance, n'importe quelle partie",[51,91,92,96,99],{},[69,93,94],{},[22,95,32],{},[69,97,98],{},"Configuration",[69,100,101],{},"Toutes les instances du site",[103,104,105],"p",{},"Les deux premiers l'emportent sur la configuration globale. Commence par le plus simple.",[10,107,109],{"id":108},"la-prop-class","La prop class",[103,111,112],{},"Un bouton arrondi, pour une seule page :",[114,115,120],"pre",{"className":116,"code":117,"language":118,"meta":119,"style":119},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003CUButton label=\"Lire\" class=\"rounded-full\" \u002F>\n","vue","",[22,121,122],{"__ignoreMap":119},[123,124,127,131,135,139,142,146,149,151,154],"span",{"class":125,"line":126},"line",1,[123,128,130],{"class":129},"scfrF","\u003C",[123,132,134],{"class":133},"s5JFL","UButton",[123,136,138],{"class":137},"s5iOY"," label",[123,140,141],{"class":129},"=",[123,143,145],{"class":144},"shWOn","\"Lire\"",[123,147,148],{"class":137}," class",[123,150,141],{"class":129},[123,152,153],{"class":144},"\"rounded-full\"",[123,155,156],{"class":129}," \u002F>\n",[103,158,159,161],{},[22,160,24],{}," accepte des classes Tailwind. Elle remplace le style de l'élément principal du composant, sa racine.",[103,163,164,165,33],{},"Pour un composant sans racine unique, ou pour viser une zone interne, passe à ",[22,166,28],{},[10,168,170],{"id":169},"les-slots-de-style","Les slots de style",[103,172,173,174,178,179,182,183,25,186,25,189,29,192,195],{},"Un composant est découpé en zones de style, aussi appelées ",[175,176,177],"strong",{},"slots"," (ne les confonds pas avec les slots de contenu). Pour ",[22,180,181],{},"UCard",", ce sont ",[22,184,185],{},"root",[22,187,188],{},"header",[22,190,191],{},"body",[22,193,194],{},"footer",", entre autres.",[103,197,198,199,33],{},"La documentation de chaque composant liste ses slots, dans la section du thème. Retiens que le nom sert de clé dans ",[22,200,28],{},[10,202,204],{"id":203},"la-prop-ui","La prop ui",[103,206,207,208,210],{},"La prop ",[175,209,28],{}," reçoit un objet : une clé par zone, une chaîne de classes comme valeur.",[114,212,214],{"className":116,"code":213,"language":118,"meta":119,"style":119},"\u003CUCard :ui=\"{ header: 'bg-primary\u002F10', footer: 'text-sm' }\">\n  \u003Ctemplate #header>Tarte aux pommes\u003C\u002Ftemplate>\n  \u003Cp>Une recette simple.\u003C\u002Fp>\n  \u003Ctemplate #footer>Pour 6 personnes\u003C\u002Ftemplate>\n\u003C\u002FUCard>\n",[22,215,216,252,258,264,270],{"__ignoreMap":119},[123,217,218,220,222,225,227,229,232,235,238,241,244,247,249],{"class":125,"line":126},[123,219,130],{"class":129},[123,221,181],{"class":133},[123,223,224],{"class":129}," :",[123,226,28],{"class":137},[123,228,141],{"class":129},[123,230,231],{"class":129},"\"",[123,233,234],{"class":129},"{ header: ",[123,236,237],{"class":144},"'bg-primary\u002F10'",[123,239,240],{"class":129},", footer: ",[123,242,243],{"class":144},"'text-sm'",[123,245,246],{"class":129}," }",[123,248,231],{"class":129},[123,250,251],{"class":129},">\n",[123,253,255],{"class":125,"line":254},2,[123,256,257],{"class":129},"  \u003Ctemplate #header>Tarte aux pommes\u003C\u002Ftemplate>\n",[123,259,261],{"class":125,"line":260},3,[123,262,263],{"class":129},"  \u003Cp>Une recette simple.\u003C\u002Fp>\n",[123,265,267],{"class":125,"line":266},4,[123,268,269],{"class":129},"  \u003Ctemplate #footer>Pour 6 personnes\u003C\u002Ftemplate>\n",[123,271,273,276,278],{"class":125,"line":272},5,[123,274,275],{"class":129},"\u003C\u002F",[123,277,181],{"class":133},[123,279,251],{"class":129},[103,281,282,283,286],{},"Ici, l'en-tête reçoit un fond teinté de la couleur ",[22,284,285],{},"primary"," et le pied de page un texte plus petit. Le corps de la carte ne change pas.",[288,289,290],"note",{},[103,291,292],{},"Tes classes remplacent celles du thème sur les zones concernées. Si un conflit apparaît, par exemple deux marges différentes, c'est la tienne qui gagne.",[10,294,296],{"id":295},"personnaliser-pour-tout-le-site","Personnaliser pour tout le site",[103,298,299,300,302,303,305],{},"Pour que tous les boutons changent, passe par ",[22,301,32],{},", sous ",[22,304,28],{}," puis le nom du composant.",[114,307,312],{"className":308,"code":309,"filename":310,"language":311,"meta":119,"style":119},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","export default defineAppConfig({\n  ui: {\n    button: {\n      slots: {\n        base: 'font-bold'\n      },\n      defaultVariants: {\n        color: 'neutral',\n        variant: 'outline'\n      }\n    }\n  }\n})\n","app\u002Fapp.config.ts","ts",[22,313,314,331,336,341,346,354,360,366,378,387,393,399,405],{"__ignoreMap":119},[123,315,316,320,323,327],{"class":125,"line":126},[123,317,319],{"class":318},"sOnC1","export",[123,321,322],{"class":318}," default",[123,324,326],{"class":325},"syCW7"," defineAppConfig",[123,328,330],{"class":329},"sIXEE","({\n",[123,332,333],{"class":125,"line":254},[123,334,335],{"class":129},"  ui: {\n",[123,337,338],{"class":125,"line":260},[123,339,340],{"class":129},"    button: {\n",[123,342,343],{"class":125,"line":266},[123,344,345],{"class":129},"      slots: {\n",[123,347,348,351],{"class":125,"line":272},[123,349,350],{"class":129},"        base: ",[123,352,353],{"class":144},"'font-bold'\n",[123,355,357],{"class":125,"line":356},6,[123,358,359],{"class":129},"      },\n",[123,361,363],{"class":125,"line":362},7,[123,364,365],{"class":129},"      defaultVariants: {\n",[123,367,369,372,375],{"class":125,"line":368},8,[123,370,371],{"class":129},"        color: ",[123,373,374],{"class":144},"'neutral'",[123,376,377],{"class":129},",\n",[123,379,381,384],{"class":125,"line":380},9,[123,382,383],{"class":129},"        variant: ",[123,385,386],{"class":144},"'outline'\n",[123,388,390],{"class":125,"line":389},10,[123,391,392],{"class":129},"      }\n",[123,394,396],{"class":125,"line":395},11,[123,397,398],{"class":129},"    }\n",[123,400,402],{"class":125,"line":401},12,[123,403,404],{"class":129},"  }\n",[123,406,408],{"class":125,"line":407},13,[123,409,410],{"class":329},"})\n",[15,412,413,418],{},[18,414,415,417],{},[22,416,177],{}," ajoute des classes à une zone de style : ici, tous les boutons passent en gras.",[18,419,420,423],{},[22,421,422],{},"defaultVariants"," change les réglages par défaut : sans précision, un bouton devient neutre et à contour.",[10,425,427],{"id":426},"les-variantes","Les variantes",[103,429,430,431,434,435,25,438,441,442,445,446,449,450,453,454,33],{},"Dans la configuration, ",[22,432,433],{},"variants"," décrit les classes de chaque valeur de ",[22,436,437],{},"color",[22,439,440],{},"variant"," ou ",[22,443,444],{},"size",". ",[22,447,448],{},"compoundVariants"," cible une combinaison, par exemple un bouton ",[22,451,452],{},"error"," avec la variante ",[22,455,456],{},"outline",[114,458,460],{"className":308,"code":459,"language":311,"meta":119,"style":119},"button: {\n  variants: {\n    size: {\n      md: { base: 'px-6' }\n    }\n  }\n}\n",[22,461,462,470,477,484,504,508,512],{"__ignoreMap":119},[123,463,464,467],{"class":125,"line":126},[123,465,466],{"class":329},"button",[123,468,469],{"class":129},": {\n",[123,471,472,475],{"class":125,"line":254},[123,473,474],{"class":329},"  variants",[123,476,469],{"class":129},[123,478,479,482],{"class":125,"line":260},[123,480,481],{"class":329},"    size",[123,483,469],{"class":129},[123,485,486,489,492,495,498,501],{"class":125,"line":266},[123,487,488],{"class":329},"      md",[123,490,491],{"class":129},": { ",[123,493,494],{"class":329},"base",[123,496,497],{"class":129},": ",[123,499,500],{"class":144},"'px-6'",[123,502,503],{"class":129}," }\n",[123,505,506],{"class":125,"line":272},[123,507,398],{"class":129},[123,509,510],{"class":125,"line":356},[123,511,404],{"class":129},[123,513,514],{"class":125,"line":362},[123,515,516],{"class":129},"}\n",[103,518,519,520,523],{},"Ce système repose sur ",[175,521,522],{},"Tailwind Variants",", une bibliothèque qui assemble des classes selon des variantes. Tu n'as pas à l'installer, Nuxt UI l'utilise déjà.",[10,525,527],{"id":526},"quel-niveau-choisir","Quel niveau choisir ?",[529,530,531,536,541],"ol",{},[18,532,533,534,33],{},"Un seul bouton à adapter : ",[22,535,24],{},[18,537,538,539,33],{},"Une zone interne d'un composant, une seule fois : ",[22,540,28],{},[18,542,543,544,33],{},"Un style répété sur tout le site : ",[22,545,32],{},[103,547,548,549,551,552,33],{},"Si tu copies la même prop ",[22,550,28],{}," dans cinq pages, c'est le signe qu'il faut la déplacer dans ",[22,553,32],{},[555,556,557],"tip",{},[103,558,559],{},"Quand une classe n'a aucun effet, ouvre les outils du navigateur et regarde quel élément porte quelles classes. Cela montre dans quelle zone la mettre.",[10,561,563],{"id":562},"à-retenir","À retenir",[15,565,566,578,586,604,612],{},[18,567,568,569,571,572,574,575,577],{},"Trois niveaux : ",[22,570,24],{}," (instance), ",[22,573,28],{}," (zones d'une instance), ",[22,576,32],{}," (tout le site).",[18,579,580,582,583,585],{},[22,581,24],{}," agit sur la racine ; ",[22,584,28],{}," cible une zone par son nom de slot de style.",[18,587,588,589,591,592,595,596,25,598,25,600,441,602,33],{},"Dans ",[22,590,32],{},", on écrit ",[22,593,594],{},"ui.\u003Ccomposant>"," avec ",[22,597,177],{},[22,599,433],{},[22,601,448],{},[22,603,422],{},[18,605,606,607,29,609,611],{},"Les props ",[22,608,24],{},[22,610,28],{}," priment sur la configuration globale.",[18,613,614,615,33],{},"Remonte un style répété vers ",[22,616,32],{},[618,619,620],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":119,"searchDepth":254,"depth":260,"links":622},[623,624,625,626,627,628,629,630,631],{"id":12,"depth":254,"text":13},{"id":42,"depth":254,"text":43},{"id":108,"depth":254,"text":109},{"id":169,"depth":254,"text":170},{"id":203,"depth":254,"text":204},{"id":295,"depth":254,"text":296},{"id":426,"depth":254,"text":427},{"id":526,"depth":254,"text":527},{"id":562,"depth":254,"text":563},"Modifier l'apparence d'un composant Nuxt UI avec la prop class, la prop ui et la configuration globale dans app.config.ts.","md","nuxt-ui",{},[637,638,177,32,422,433,448,522,639],"prop ui","prop class","personnalisation",true,"avance","\u002Fnuxt-ui\u002Fpersonnaliser-un-composant",[644],"\u002Fnuxt-ui\u002Ftheme-et-couleurs",[646,650],{"nom":647,"url":648,"type":649,"anglais":640},"Nuxt UI, personnaliser les composants (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","doc",{"nom":651,"url":652,"type":649,"anglais":640},"Nuxt UI, design system (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system",{"title":5,"description":632},[655,657],{"nom":656,"url":648},"Personnaliser les composants (en anglais)",{"nom":658,"url":659},"Composant Card (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fcard","nuxt-ui\u002F06.personnaliser-un-composant","I4CKiJxFXPtfUNWT8YINUkkyguLtw-6tRRxcGYh5DzM",[663,667,671,675,679,682,683],{"path":664,"title":665,"stem":666},"\u002Fnuxt-ui\u002Finstallation","Installer Nuxt UI","nuxt-ui\u002F01.installation",{"path":668,"title":669,"stem":670},"\u002Fnuxt-ui\u002Fpremiers-composants","Premiers composants","nuxt-ui\u002F02.premiers-composants",{"path":672,"title":673,"stem":674},"\u002Fnuxt-ui\u002Fformulaires","Formulaires et validation","nuxt-ui\u002F03.formulaires",{"path":676,"title":677,"stem":678},"\u002Fnuxt-ui\u002Fnavigation-et-superpositions","Navigation et superpositions","nuxt-ui\u002F04.navigation-et-superpositions",{"path":644,"title":680,"stem":681},"Thème, couleurs et mode sombre","nuxt-ui\u002F05.theme-et-couleurs",{"path":642,"title":5,"stem":660},{"path":684,"title":685,"stem":686},"\u002Fnuxt-ui","Nuxt UI","nuxt-ui\u002Findex",[688,690],{"title":680,"path":644,"stem":681,"description":689,"children":-1},"Choisir les couleurs sémantiques dans app.config.ts, ajuster le thème dans main.css et gérer le mode sombre avec UColorModeButton.",null,[692],{"path":644,"title":680,"ligne":634},[694,696,697,698,700,701,702],{"path":664,"title":665,"niveau":695,"stem":666},"debutant",{"path":668,"title":669,"niveau":695,"stem":670},{"path":672,"title":673,"niveau":695,"stem":674},{"path":676,"title":677,"niveau":699,"stem":678},"intermediaire",{"path":644,"title":680,"niveau":699,"stem":681},{"path":642,"title":5,"niveau":641,"stem":660},{"path":684,"title":685,"niveau":703,"stem":686},"memo",1794583446110]