[{"data":1,"prerenderedAt":617},["ShallowReactive",2],{"navigation_docs":3,"-ecrire-story-storybook":81,"-ecrire-story-storybook-surround":612},[4,15,63],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":14},"Démarrer","i-lucide-rocket","\u002Fdemarrer","1.demarrer",[10],{"title":11,"path":12,"stem":13},"Votre première présentation","\u002Fdemarrer\u002Fpremiere-presentation","1.demarrer\u002F1.premiere-presentation",false,{"title":16,"icon":17,"path":18,"stem":19,"children":20,"page":14},"Écrire","i-lucide-pen-line","\u002Fecrire","2.ecrire",[21,25,29,33,37,41,45],{"title":22,"path":23,"stem":24},"La syntaxe","\u002Fecrire\u002Fsyntaxe","2.ecrire\u002F1.syntaxe",{"title":26,"path":27,"stem":28},"Les composants","\u002Fecrire\u002Fcomposants","2.ecrire\u002F2.composants",{"title":30,"path":31,"stem":32},"Intégrer une story Storybook","\u002Fecrire\u002Fstory-storybook","2.ecrire\u002F3.story-storybook",{"title":34,"path":35,"stem":36},"Placer une image à côté du texte","\u002Fecrire\u002Fimage-a-cote-du-texte","2.ecrire\u002F4.image-a-cote-du-texte",{"title":38,"path":39,"stem":40},"Ajouter des notes de présentation","\u002Fecrire\u002Fnotes-de-presentation","2.ecrire\u002F5.notes-de-presentation",{"title":42,"path":43,"stem":44},"Exporter en PDF","\u002Fecrire\u002Fexport-pdf","2.ecrire\u002F6.export-pdf",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":14},"Référence","i-lucide-book-open","\u002Fecrire\u002Freference","ecrire\u002Freference",[51,55,59],{"title":52,"path":53,"stem":54},"@vignettes\u002Fnuxt","\u002Fecrire\u002Freference\u002Fnuxt","ecrire\u002Freference\u002Fnuxt\u002FREADME",{"title":56,"path":57,"stem":58},"@vignettes\u002Fschemas","\u002Fecrire\u002Freference\u002Fschemas","ecrire\u002Freference\u002Fschemas\u002FREADME",{"title":60,"path":61,"stem":62},"@vignettes\u002Fstorybook","\u002Fecrire\u002Freference\u002Fstorybook","ecrire\u002Freference\u002Fstorybook\u002FREADME",{"title":64,"icon":65,"path":66,"stem":67,"children":68,"page":14},"Studio","i-lucide-layout-grid","\u002Fstudio","3.studio",[69,73,77],{"title":70,"path":71,"stem":72},"Les rôles","\u002Fstudio\u002Froles","3.studio\u002F1.roles",{"title":74,"path":75,"stem":76},"Visibilité et partage","\u002Fstudio\u002Fvisibilite-et-partage","3.studio\u002F2.visibilite-et-partage",{"title":78,"path":79,"stem":80},"Versions et brouillon","\u002Fstudio\u002Fversions-et-brouillon","3.studio\u002F3.versions-et-brouillon",{"id":82,"title":30,"body":83,"description":607,"extension":608,"meta":609,"navigation":219,"path":31,"seo":610,"stem":32,"__hash__":611},"docs\u002F2.ecrire\u002F3.story-storybook.md",{"type":84,"value":85,"toc":602},"minimark",[86,90,101,106,137,140,144,175,299,305,309,332,577,598],[87,88,89],"p",{},"Une diapositive peut afficher une story d'un Storybook publié en ligne. La story est rendue en direct : la diapositive montre l'état actuel du composant.",[87,91,92,93,100],{},"Les exemples de cette page affichent le Storybook public de ",[94,95,99],"a",{"href":96,"rel":97},"https:\u002F\u002Fcomponents.react-dsfr.codegouv.studio",[98],"nofollow","react-dsfr",", les composants React du Système de Design de l'État.",[102,103,105],"h2",{"id":104},"trouver-ladresse-du-storybook-et-lidentifiant-de-la-story","Trouver l'adresse du Storybook et l'identifiant de la story",[107,108,109,118,128],"ol",{},[110,111,112,113,117],"li",{},"Ouvrez la story dans votre Storybook. L'adresse a la forme ",[114,115,116],"code",{},"https:\u002F\u002Fstorybook.example.com\u002F?path=\u002Fstory\u002Fcomponents-card--default",".",[110,119,120,121,124,125,117],{},"L'adresse du Storybook est la partie avant ",[114,122,123],{},"\u002F?path="," : ",[114,126,127],{},"https:\u002F\u002Fstorybook.example.com",[110,129,130,131,124,134,117],{},"L'identifiant de la story est la partie après ",[114,132,133],{},"\u002Fstory\u002F",[114,135,136],{},"components-card--default",[87,138,139],{},"Le Storybook doit accepter d'être affiché dans une autre page. Si la diapositive reste vide, le serveur du Storybook l'interdit : demandez à l'équipe qui le publie d'autoriser l'adresse du studio.",[102,141,143],{"id":142},"une-story-dans-une-diapositive","Une story dans une diapositive",[87,145,146,147,150,151,154,155,158,159,163,164,124,167,170,171,174],{},"Ajoutez l'adresse du Storybook dans l'en-tête, avec la clé ",[114,148,149],{},"storybook",". Dans la diapositive, l'annotation ",[114,152,153],{},":layout"," reçoit l'identifiant de la story dans ",[114,156,157],{},"story",", et une ",[94,160,162],{"href":161},"\u002Fecrire\u002Fsyntaxe#les-mises-en-page","mise en page"," dans ",[114,165,166],{},"name",[114,168,169],{},"media-below"," place la story sous le titre, sur toute la largeur, et ",[114,172,173],{},"media-right"," à droite du texte.",[176,177,178],"deck-example",{},[179,180,185],"pre",{"className":181,"code":182,"language":183,"meta":184,"style":184},"language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\nstorybook: https:\u002F\u002Fcomponents.react-dsfr.codegouv.studio\n---\n\n### L'en-tête du site\n\n:layout{name=\"media-below\" story=\"components-header--header-with-quick-access-items\" lightbox=\"true\"}\n\nLe bloc Marianne, le nom du service et les accès rapides.\n","mdc","",[114,186,187,196,209,214,221,231,236,287,292],{"__ignoreMap":184},[188,189,192],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"sMK4o","---\n",[188,197,199,202,205],{"class":190,"line":198},2,[188,200,149],{"class":201},"swJcz",[188,203,204],{"class":194},":",[188,206,208],{"class":207},"sfazB"," https:\u002F\u002Fcomponents.react-dsfr.codegouv.studio\n",[188,210,212],{"class":190,"line":211},3,[188,213,195],{"class":194},[188,215,217],{"class":190,"line":216},4,[188,218,220],{"emptyLinePlaceholder":219},true,"\n",[188,222,224,227],{"class":190,"line":223},5,[188,225,226],{"class":194},"### ",[188,228,230],{"class":229},"sBMFI","L'en-tête du site\n",[188,232,234],{"class":190,"line":233},6,[188,235,220],{"emptyLinePlaceholder":219},[188,237,239,241,244,247,250,253,256,258,260,263,265,267,270,272,275,277,279,282,284],{"class":190,"line":238},7,[188,240,204],{"class":194},[188,242,243],{"class":201},"layout",[188,245,246],{"class":194},"{",[188,248,166],{"class":249},"spNyl",[188,251,252],{"class":194},"=",[188,254,255],{"class":194},"\"",[188,257,169],{"class":207},[188,259,255],{"class":194},[188,261,262],{"class":249}," story",[188,264,252],{"class":194},[188,266,255],{"class":194},[188,268,269],{"class":207},"components-header--header-with-quick-access-items",[188,271,255],{"class":194},[188,273,274],{"class":249}," lightbox",[188,276,252],{"class":194},[188,278,255],{"class":194},[188,280,281],{"class":207},"true",[188,283,255],{"class":194},[188,285,286],{"class":194},"}\n",[188,288,290],{"class":190,"line":289},8,[188,291,220],{"emptyLinePlaceholder":219},[188,293,295],{"class":190,"line":294},9,[188,296,298],{"class":297},"sTEyZ","Le bloc Marianne, le nom du service et les accès rapides.\n",[87,300,301,304],{},[114,302,303],{},"lightbox=\"true\""," ouvre la story en plein écran au clic.",[102,306,308],{"id":307},"plusieurs-stories-côte-à-côte","Plusieurs stories côte à côte",[87,310,311,314,315,318,319,322,323,325,326,328,329,117],{},[114,312,313],{},"Screens"," place ses blocs ",[114,316,317],{},"StoryFrame"," en colonnes ; ",[114,320,321],{},"cols"," fixe leur nombre. Chaque ",[114,324,317],{}," reçoit l'identifiant de sa story dans ",[114,327,157],{}," et une légende dans ",[114,330,331],{},"label",[176,333,334],{},[179,335,337],{"className":181,"code":336,"language":183,"meta":184,"style":184},"---\nstorybook: https:\u002F\u002Fcomponents.react-dsfr.codegouv.studio\n---\n\n### Les trois variantes du bouton\n\n:::Screens{cols=\"3\"}\n::StoryFrame{story=\"components-button--default\" ratio=\"wide\" previewWidth=\"260\" label=\"Principal\"}\n::\n::StoryFrame{story=\"components-button--button-secondary\" ratio=\"wide\" previewWidth=\"260\" label=\"Secondaire\"}\n::\n::StoryFrame{story=\"components-button--button-tertiary\" ratio=\"wide\" previewWidth=\"260\" label=\"Tertiaire\"}\n::\n:::\n",[114,338,339,343,351,355,359,366,370,392,450,455,508,513,566,571],{"__ignoreMap":184},[188,340,341],{"class":190,"line":191},[188,342,195],{"class":194},[188,344,345,347,349],{"class":190,"line":198},[188,346,149],{"class":201},[188,348,204],{"class":194},[188,350,208],{"class":207},[188,352,353],{"class":190,"line":211},[188,354,195],{"class":194},[188,356,357],{"class":190,"line":216},[188,358,220],{"emptyLinePlaceholder":219},[188,360,361,363],{"class":190,"line":223},[188,362,226],{"class":194},[188,364,365],{"class":229},"Les trois variantes du bouton\n",[188,367,368],{"class":190,"line":233},[188,369,220],{"emptyLinePlaceholder":219},[188,371,372,375,377,379,381,383,385,388,390],{"class":190,"line":238},[188,373,374],{"class":194},":::",[188,376,313],{"class":201},[188,378,246],{"class":194},[188,380,321],{"class":249},[188,382,252],{"class":194},[188,384,255],{"class":194},[188,386,387],{"class":207},"3",[188,389,255],{"class":194},[188,391,286],{"class":194},[188,393,394,397,399,401,403,405,407,410,412,415,417,419,422,424,427,429,431,434,436,439,441,443,446,448],{"class":190,"line":289},[188,395,396],{"class":194},"::",[188,398,317],{"class":201},[188,400,246],{"class":194},[188,402,157],{"class":249},[188,404,252],{"class":194},[188,406,255],{"class":194},[188,408,409],{"class":207},"components-button--default",[188,411,255],{"class":194},[188,413,414],{"class":249}," ratio",[188,416,252],{"class":194},[188,418,255],{"class":194},[188,420,421],{"class":207},"wide",[188,423,255],{"class":194},[188,425,426],{"class":249}," previewWidth",[188,428,252],{"class":194},[188,430,255],{"class":194},[188,432,433],{"class":207},"260",[188,435,255],{"class":194},[188,437,438],{"class":249}," label",[188,440,252],{"class":194},[188,442,255],{"class":194},[188,444,445],{"class":207},"Principal",[188,447,255],{"class":194},[188,449,286],{"class":194},[188,451,452],{"class":190,"line":294},[188,453,454],{"class":194},"::\n",[188,456,458,460,462,464,466,468,470,473,475,477,479,481,483,485,487,489,491,493,495,497,499,501,504,506],{"class":190,"line":457},10,[188,459,396],{"class":194},[188,461,317],{"class":201},[188,463,246],{"class":194},[188,465,157],{"class":249},[188,467,252],{"class":194},[188,469,255],{"class":194},[188,471,472],{"class":207},"components-button--button-secondary",[188,474,255],{"class":194},[188,476,414],{"class":249},[188,478,252],{"class":194},[188,480,255],{"class":194},[188,482,421],{"class":207},[188,484,255],{"class":194},[188,486,426],{"class":249},[188,488,252],{"class":194},[188,490,255],{"class":194},[188,492,433],{"class":207},[188,494,255],{"class":194},[188,496,438],{"class":249},[188,498,252],{"class":194},[188,500,255],{"class":194},[188,502,503],{"class":207},"Secondaire",[188,505,255],{"class":194},[188,507,286],{"class":194},[188,509,511],{"class":190,"line":510},11,[188,512,454],{"class":194},[188,514,516,518,520,522,524,526,528,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,562,564],{"class":190,"line":515},12,[188,517,396],{"class":194},[188,519,317],{"class":201},[188,521,246],{"class":194},[188,523,157],{"class":249},[188,525,252],{"class":194},[188,527,255],{"class":194},[188,529,530],{"class":207},"components-button--button-tertiary",[188,532,255],{"class":194},[188,534,414],{"class":249},[188,536,252],{"class":194},[188,538,255],{"class":194},[188,540,421],{"class":207},[188,542,255],{"class":194},[188,544,426],{"class":249},[188,546,252],{"class":194},[188,548,255],{"class":194},[188,550,433],{"class":207},[188,552,255],{"class":194},[188,554,438],{"class":249},[188,556,252],{"class":194},[188,558,255],{"class":194},[188,560,561],{"class":207},"Tertiaire",[188,563,255],{"class":194},[188,565,286],{"class":194},[188,567,569],{"class":190,"line":568},13,[188,570,454],{"class":194},[188,572,574],{"class":190,"line":573},14,[188,575,576],{"class":194},":::\n",[87,578,579,582,583,585,586,589,590,593,594,597],{},[114,580,581],{},"ratio"," donne la forme du cadre (",[114,584,421],{}," pour 16\u002F9, ",[114,587,588],{},"portrait"," pour 3\u002F4) et ",[114,591,592],{},"previewWidth"," la largeur, en pixels, à laquelle la story est rendue avant d'être réduite au cadre. La ",[94,595,596],{"href":61},"référence de @vignettes\u002Fstorybook"," décrit les autres réglages.",[599,600,601],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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);}",{"title":184,"searchDepth":198,"depth":198,"links":603},[604,605,606],{"id":104,"depth":198,"text":105},{"id":142,"depth":198,"text":143},{"id":307,"depth":198,"text":308},"Afficher dans une diapositive un écran de votre design system, rendu en direct depuis son Storybook.","md",{},{"title":30,"description":607},"1hHyOjZBLZ-tvZRmKn2LlLFnDExcOLLZPtJNX7mcTf0",[613,615],{"title":26,"path":27,"stem":28,"description":614,"children":-1},"Les blocs qui mettent en forme une diapositive, du texte en colonnes aux schémas.",{"title":34,"path":35,"stem":36,"description":616,"children":-1},"Téléverser une image dans le studio et l'afficher à droite du texte d'une diapositive.",1792517109438]