Extension Header

overview every extension tab should have a fixed header that is positioned at the top of the extension library, independent of the scrollable area in the toolbox the extension name, image, and any commonly accessed functions should go into the header there are two types of extension header, with the choice depending on whether inner tabs are used within the component tab basic header code example a helper class is provided to ease the creation of our standard library headers cm basiclibraryheaderbuilder headerbuilder(icon("wall/libraryheader"), $walltab); // optional buttons headerbuilder addbutton(librarybutton(icon("facelift2023/schemes"), tooltip=$wallsettingssection, 	 callback=f(control ) { 	 if (!autocrashing) createpropsschemesdialog(wallschemekey); 	 })); this builder can then be passed to the library like so cm library lib( , headerbuilder=headerbuilder); cm library( , headerbuilder=headerbuilder) { // limbs go here } anatomy a extension header (mandatory) background colour neutral/white 100 (#ffffff) border colour border/border 1 (#b3b3b3) width 312px height 48px border top weight 1 border bottom weight 1 b extension icon (optional) c extension title (mandatory) text colour neutral/grey 86 (#242424) text style heading 4 for logotype usage, please refer to the branding section at the bottom of this page d,e,f header button (optional) max 3 in row note that the header buttons can be customized to your extension's needs these icons are only used as an example alternative anatomy there is an alternative header style that can be chosen if a scheme dropdown is required g scheme dropdown (mandatory) h header button max 1 in row note that in this style, only one header button is allowed, as the rest of the space has been allocated to the dropdown layout & spacing default without extension icon with schemes dropdown header buttons only 2 header buttons only 1 header button no header button text handling default without extension icon with schemes dropdown header buttons only 2 header buttons only 1 header button no header button header with tabs the basic header can be extended with tabs (which can be presented as a row of accented tabs or a dropdown) tabs are like compartments within a toolbox, each organizing different tools or features relevant to the extension, allowing users to easily switch between them without cluttering the entire extension tab bar when to use? there is a need to display multiple sub tabs within a single toolbox tab as a way to better organize information into categories to avoid long toolboxes and scroll time code example to utilize tabs, a specialized header builder, tabbedlibraryheaderbuilder is used instead the usedropdownstyle parameter can be set to true to utilize extension header docid 329vj0pqzc4rwqu qmv3d instead of extension header docid 329vj0pqzc4rwqu qmv3d additionally, in the event that the accent tab row was to exceed a width of 284px , the builder will automatically switch to the dropdown style instead cm // create a tabbed library header builder tabbedlibraryheaderbuilder headerbuilder(icon("wall/libraryheader"), $walltab, usedropdownstyle=false); // optional buttons headerbuilder addbutton(librarybutton(icon("facelift2023/schemes"), tooltip=$wallsettingssection, 	 callback=f(control ) { 	 if (!autocrashing) createpropsschemesdialog(wallschemekey); 	 })); 	 now that we have our specialized header builder, we will demonstrate how to create individual tabs below cm // create a root library limb librarylimb rootlibrarylimb(pkg, "root"); // create your first tab with a tab limb tablimb maintab(rootlibrarylimb, pkg, "main"); // append limbs that should be under your first tab, with the // parent as main tab librarylimb maintabfirstsection(maintab, pkg, "mainfirst"); messagelimb(maintabfirstsection, pkg, key="examplemsg", msgtype=messagetype info, label="first section message"); // to add additional tabs, repeat the same initialization process tablimb secondtab(rootlibrarylimb, pkg, "secondary"); // append limbs that should be under your second tab, with the // parent as second tab librarylimb secondtabfirstsection(secondtab, pkg, "secondfirst"); voidcallbacklimb(secondtabfirstsection, ); // assign the header builder like usual and there you go! library lib( , headerbuilder=headerbuilder); cm // remember to assign a tabbed library header builder library( , headerbuilder=headerbuilder) { // create a root library limb container librarylimb rootlibrarylimb("root") { // create your first tab with a tab limb container tablimb maintab("main") { // append limbs that should be under your first tab 	 container librarylimb maintabfirstsection("mainfirst"){ 	 limb messagelimb message("examplemsg", 	 msgtype=messagetype info, label="first section message"); 	 } 	 } 	 	 // to add additional tabs, repeat the same initialization process 	 container tablimb secondtab("secondary") { 	 // append limbs that should be under your second tab 	 container librarylimb secondtabfirstsection("secondfirst"){ 	 limb voidcallbacklimb button("btn", ); 	 } 	 } } } // there you go! anatomy tabs a accent tabs this accent tab row cannot exceed a width of 284px, and is affected by both the number of tabs and the width of each tab if this width is exceeded, then the dropdown presentation will be used instead (see below) dropdown b dropdown tabs the usage of this presentation is encouraged when tab names are long, and will be forced when the width of the accent tab row exceeds 284px layout & spacing tabs dropdown text handling all margins are the same as with the basic header with no tabs, with only the height being changed note that the height of the header is differs slightly depending on whether a accent tabs or dropdown presentation are used tabs dropdown branding branding image the branding image is an optional component of the toolbox it represents the product or identity of specific extensions, ensuring a consistent and recognizable visual appearance it should be placed above the extension header to maintain a clear visual hierarchy anatomy a branding image (optional) max image 1 only width 312px height 48px logotype a logotype can be used instead of an icon and title to make the extension more recognizable the logotype should only appear on the first extension tab all other tabs within the same extension must follow the guidelines above we don’t have any specific restrictions regarding the appearance of logotypes however, it’s important that the company behind the extension is clearly visible—using both the icon and the company name in any combination requirement make sure that your logotype clearly states the name of the company if it doesn’t, you should use the option that combines both icon and text instead anatomy a logotype (optional) usage only on the first extension tab placement left aligned max width 196px height 24px