package Ġdev . f rit z 2 . headless demo Ċ Ċ import Ġdev . f rit z 2 . core . Render Context Ċ import Ġdev . f rit z 2 . core . href Ċ import Ġdev . f rit z 2 . core . transition Ċ import Ġdev . f rit z 2 . headless . components . dis closure Ċ Ċ fun ĠRender Context . dis closure Demo () Ġ{ ĊĠĠĠ Ġval Ġfa qs Ġ= ĠlistOf < Pair < String , ĠRender Context . () Ġ-> ĠUnit >>( ĊĠĠĠĠĠĠĠ Ġ" What 's Ġthe Ġbest Ġthing Ġabout Ġf rit z 2 ?" Ġto Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ """ We Ġare Ġstrongly Ġbi ased Ġ- Ġthere Ġare Ġso Ġmany Ġthings Ġyou Ġcan Ġname . ĠOne Ġoutstanding Ġaspect Ġfor Ġus Ġis ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ| Ġthe Ġfact , Ġthat Ġit Ġis Ġan Ġopen Ġsource Ġproject , Ġwhich Ġmakes Ġso Ġmuch Ġfun Ġto Ġdevelop ! """. trim Margin () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" But Ġwe Ġare Ġcurious Ġto Ġknow , Ġwhat Ġyou Ġlike Ġabout Ġf rit z 2 ? ĠSo Ġplease Ġgive Ġus Ġfeedback !" ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠ Ġ" Can Ġyou Ġexplain Ġthe Ġpower Ġof Ġthe Ġhead less Ġapproach ?" Ġto Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ """ Diff icult . ĠOnce Ġyou Ġhave Ġgr as ped Ġit , Ġyou Ġin her ently Ġloose Ġthe Ġcapability Ġto Ġexplain Ġthe Ġprinciple ĠĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ| Ġto Ġothers ... ĠðŁĺ ģ ĠS CN R ! ĠOf Ġcourse Ġwe Ġcan Ġtry . ĠHave Ġa Ġlook Ġat Ġthis Ġ""" . trim Margin () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġa (" text - primary Ġhover : text - primary - 7 0 0 ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattr (" tab index ", Ġ"- 1 ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" www . f rit z 2 . dev / blog / posts / par adig m - shift - for - components /") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" article " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Ġabout Ġit Ġand Ġconsult Ġthe Ġdocumentation ." ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠ Ġ" Will Ġthere Ġever Ġbe Ġa Ġf rit z 3 ?" Ġto Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ """ N obody Ġknows . ĠBut Ġit Ġwould Ġrather Ġbe Ġa Ġf rit z 2 2 ĠðŁĺ ī Ġ""" . trim Margin () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠ Ġ" Why Ġyou Ġchoose Ġso Ġoften Ġfour Ġitems Ġfor Ġyour Ġhead less Ġexamples ?" Ġto Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ """ Four Ġis Ġa Ġnice Ġnumber ! ĠThink Ġof Ġepisode ĠIV , Ġthe Ġsense Ġof Ġeverything Ġ( 4 2 ) Ġstarts Ġwith Ġa Ġ 4 ... ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ| Ġand Ġlast Ġbut Ġnot Ġleast : ĠWe Ġhave Ġnever Ġthought Ġabout Ġit Ġto Ġbe Ġhonest ! """. trim Margin () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ) ĊĊĠĠĠ Ġdiv (" max - w - 3 xl ") Ġ{ ĊĠĠĠĠĠĠĠ Ġdiv (" py - 8 Ġpx - 4 ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġh 1 (" text - left Ġtext - gray - 8 0 0 Ġfont - medium Ġtext - lg ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" F requ ently Ġasked Ġquestions " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdl (" mt - 6 Ġspace - y - 6 ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġfa qs . with Index (). forEach Ġ{ Ġ( index , Ġfa q ) Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġ( question , Ġanswer ) Ġ= Ġfa q ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdis closure ("", Ġid Ġ= Ġ" dis closure -$ index ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdt (" text - base ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ/* Ġ<!-- ĠExpand / collapse Ġquestion Ġbutton Ġ--> Ġ*/ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdis closure Button ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ""" relative Ġz - 1 0 Ġflex Ġjustify - between Ġitems - start Ġw - full Ġmy - 2 Ġp - 4 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ| Ġbg - primary - 8 0 0 Ġrounded - lg Ġhover : bg - primary - 9 0 0 ĠĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ| Ġtext - left Ġtext - white ĠĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ| Ġfocus : outline - none Ġfocus : ring - 4 Ġfocus : ring - primary - 6 0 0 """. trim Margin () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan (" font - medium ") Ġ{ Ġ+ question Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan (" ml - 6 Ġh - 7 Ġflex Ġitems - center ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġopened . render ( into Ġ= Ġthis ) Ġ{ ĠisOpen Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" w - 5 Ġh - 5 Ġml - 2 Ġ- mr - 1 ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcontent Ġ= Ġif Ġ( isOpen ) ĠHero Icons . chevron _ up Ġelse ĠHero Icons . chevron _ down ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdis closure Panel ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ"- mt - 6 Ġpt - 7 Ġpb - 4 Ġpl - 4 Ġpr - 1 2 Ġbg - primary - 1 0 0 Ġrounded - lg Ġorigin - top ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtag Ġ= ĠRender Context :: dd ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtransition ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" transition Ġduration - 1 0 0 Ġease - out ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" opacity - 0 Ġscale - y - 9 5 ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" opacity - 1 0 0 Ġscale - y - 1 0 0 ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" transition Ġduration - 1 0 0 Ġease - in ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" opacity - 1 0 0 Ġscale - y - 1 0 0 ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" opacity - 0 Ġscale - y - 9 5 " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv (" text - base Ġtext - gray - 7 0 0 ") Ġ{ Ġanswer ( this ) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ