Layouts

 Click on the image to open dashboardOrientation¶The default orientation for Sections is columns and for Cards is rows. This means that each Section will be shown as one column in a Page and each Card in a Section will be shown as a row. Each Section default parameters can be overwritten by adding tags to the Section markdown cell (the one with a level-2 header: ##). For example in the last Notebook to make the second Section (right column) to also be divided by colums, instead of the defualt of rows, we add an orientation=columns tag like this: In [19]: orientation=columns Copied! ## Column 2 ## Column 2 Click on the image to open dashboard To change the orientation of Sections in a Page use the global flex_orientation parameter. The default is to use the oposite orientation between Sections and Cards as follows: If dashboard flex_orientation is columns (default), then section orientation will default to rows If dashboard flex_orientation is rows, then section orientation well default to columns To set the global parameters you tag one code Cell in the Notebook with parameters. The parameters tag It's usually a good idea to have this cell at the begining of the notebook This is the same tag used by papermill so you can use it as part of a pipeline For example adding the following cell as the first cell of the Notebook we had before: In [20]: parameters Copied! flex_orientation = "rows" flex_orientation = "rows" Click on the image to open dashboard Size: Width and Height¶You might have noticed that by default all the Cards and Section space is divided equally. If there are 2 Cards in a Section each Card will get 50% of the space, if there are 3 Cards in one Section each will get 33.3% of the space and so on and the same applies for multiple Sections in one Page. These proportions can be controlled using the size={value} tag in Sections and Cards cells. For example take this notebook that focuses most of the dashboard space on the top Section with one Card. In [21]: parameters Copied! flex_orientation = "rows" flex_orientation = "rows" In [22]: size=8 Copied! ## Row 1 ## Row 1 In [23]: Copied! ### Row 1 ### Row 1 In [24]: body Copied! # <code> # In [25]: size=4 Copied! ## Row 2 ## Row 2 In [26]: Copied! ### Row 2 - Card 1 ### Row 2 - Card 1 In [27]: body Copied! # <code> # In [28]: Copied! ### Row 2 - Card 2 ### Row 2 - Card 2 In [29]: body Copied! # <code> # What does the value of size mean? Interally juptyer-flex uses Material UI and it heavily uses the Grid component. The size tag is passed directly to the xs property of the Grid items. These items size should add up to 12 Card size¶In the same way that you can control Section proportions in a Page, you can control the Card proportions inside a Section using the size parameter as a tag in the Card header (level-3 markdown header: ###). In the last example if we change these two cells: In [30]: size=9 Copied! ### Row 2 - Card 1 ### Row 2 - Card 1 In [31]: body Copied! # <code> # In [32]: size=3 Copied! ### Row 2 - Card 1 ### Row 2 - Card 1 In [33]: body Copied! # <code> # Click on the image to open dashboard Section Tabs¶You can make a Section display all it's Cards as tabs making each Card it's own tab. This allows more screen space for each Card. Tabs are especially useful when you have a large number of components to display. To do this just tag a Section with tabs (the one with the level-2 markdown header: ##). For example this notebook: In [34]: tabs Copied! ## Column 1 ## Column 1 In [35]: Copied! ### Tab 1 ### Tab 1 In [36]: body Copied! 1 1 Out[36]: 1 In [37]: Copied! ### Tab 2 ### Tab 2 In [38]: body Copied! 2 2 Out[38]: 2 In [39]: Copied! ## Column 2 ## Column 2 In [40]: Copied! ### Regular Column ### Regular Column In [41]: Copied! # <code> # In [42]: tabs no-nav-fill no-fade Copied! ## Column 3 ## Column 3 In [43]: Copied! ### Tab A ### Tab A In [44]: body Copied! "A" "A" Out[44]: 'A' In [45]: Copied! ### Tab B ### Tab B In [46]: body Copied! "B" "B" Out[46]: 'B' In [47]: Copied! ### Tab C ### Tab C In [48]: body Copied! "C" "C" Out[48]: 'C' Click on the image to open dashboard Pages¶For bigger dashboards with a lot components you can divide the dashboard into multiple pages using level-1 markdown headers (#). A Page is an object that holds one or more Sections, those Sections can be shown as columns (default) or rows inside the Page. If a dashboard has one or more Pages the top navigation of the dashboard will include links to change between those. Page parameters, such as orientation and size, can be overwritten by tagging the level-1 (#) markdown header cell. Take this example Notebook with 2 Pages and multiple sections (including tabs): In [49]: Copied! # Page 1 # Page 1 In [50]: Copied! ## Column 1 ## Column 1 In [51]: Copied! ### Column 1 ### Column 1 In [52]: body Copied! "page 1 - col 1" "page 1 - col 1" Out[52]: 'page 1 - col 1' In [53]: tabs Copied! ## Column 2 ## Column 2 In [54]: Copied! ### Column 2 - Card 1 ### Column 2 - Card 1 In [55]: body Copied! "page 1 - col 2 - card 1" "page 1 - col 2 - card 1" Out[55]: 'page 1 - col 2 - card 1' In [56]: Copied! ### Column 2 - Card 2 ### Column 2 - Card 2 In [57]: body Copied! "page 1 - col 2 - card 2" "page 1 - col 2 - card 2" Out[57]: 'page 1 - col 2 - card 2' In [58]: orientation=rows Copied! # Page 2 # Page 2 In [59]: Copied! ## Row 1 ## Row 1 In [60]: Copied! ### Row 1 ### Row 1 In [61]: body Copied! "page 2 - row 1" "page 2 - row 1" Out[61]: 'page 2 - row 1' In [62]: tabs Copied! ## Row 2 ## Row 2 In [63]: Copied! ### Card 1 ### Card 1 In [64]: body Copied! "page 2 - row 2 - card 1" "page 2 - row 2 - card 1" Out[64]: 'page 2 - row 2 - card 1' In [65]: Copied! ### Card 2 ### Card 2 In [66]: body Copied! "page 2 - row 2 - card 2" "page 2 - row 2 - card 2" Out[66]: 'page 2 - row 2 - card 2' Click on the image to open dashboard Sidebars¶Sidebars are one special type of Section or Page. They behave in the same way as regular Section, they can contain one or more Cards that will be shown in the Sidebar of the dashboard. If you tag a Page with sidebar it will be a global Sidebar, meaning that all pages will have the same sidebar. If you tag a Section with sidebar then it will only appear for the page that contains that Section. This is mostly useful when defining inputs and using Jupyter widgets, see Voila and Widgets but it can also be used to display other type of information. This example uses a global sidebar by tagging the first page with sidebar. In [67]: sidebar Copied! # Sidebar # Sidebar In [68]: Copied! ### Sidebar ### Sidebar In [69]: body Copied! """ The sidebar is the sidebar of the dashboard. It will always be there even after switching pages. This content is a regular Card, for example *this* **is** [markdown](https://daringfireball.net/projects/markdown/). """ "" """ The sidebar is the sidebar of the dashboard. It will always be there even after switching pages. This content is a regular Card, for example *this* **is** [markdown](https://daringfireball.net/projects/markdown/). """ "" Out[69]: '' In [70]: Copied! ### This is a second card ### This is a second card In [71]: body Copied! # Since we have two cards in the sidebar the content was split equaly as it happens in Sections by default but it can be controlled by the size tag. # Since we have two cards in the sidebar the content was split equaly as it happens in Sections by default but it can be controlled by the size tag. In [72]: body Copied! # This is a code cell output on the side bar # This is a code cell output on the side bar In [73]: Copied! # Page 1 # Page 1 In [74]: Copied! ## Col 1 ## Col 1 In [75]: Copied! ### This is the first page ### This is the first page In [76]: body Copied! # <code> # In [77]: Copied! ## Col 2 ## Col 2 In [78]: Copied! ### Column 2 ### Column 2 In [79]: body Copied! # <code> # In [80]: orientation=rows Copied! # Page 2 # Page 2 In [81]: Copied! ## Row 1 ## Row 1 In [82]: Copied! ### This is the second page ### This is the second page In [83]: body Copied! # <code> # In [84]: Copied! ## Row 2 ## Row 2 In [85]: Copied! ### Row 2 ### Row 2 In [86]: body Copied! # <code> # Click on the image to open dashboard Section sidebar¶If you want a sidebar that is only available to one of the Pages, tag a Section with sidebar. Click on the image to open dashboard Vertical Layouts: Scroll¶By default Jupyter-flex components are laid out to fill the height of the browser. So that multiple components (Sections, Cards) get expanded to the available space and there is no vertical scroll in the body. This is a good default that works well for a small to medium number of components, however if you have lots of charts you’ll probably want to scroll rather than fit them all onto the page. You can control this behavior globally using the flex_vertical_layout option which has a default value of fill, change it to scroll to layout charts at their natural height, scrolling the page if necessary. In [87]: parameters Copied! flex_vertical_layout = "scroll" flex_vertical_layout = "scroll" This can also be set for each page using the layout=scroll tag. Examples¶ focal-chart-top focal-chart-top-card-size grid-2x2 grid-2x3 header-columns-footer.ipynb layout-fill layout-scroll pages-diff-layouts pages section-columns + columns section-columns-rows section-rows-columns section-rows + rows section-tabs-columns section-tabs-rows sidebar-global-and-pages sidebar-global sidebar-pages 
 
 
 
 
 Previous Getting started Next Plotting Copyright 2019 - 2021 Daniel Rodriguez 
 {"base": "..", "features": ["navigation.indexes"], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "../assets/javascripts/workers/search.fcfe8b6d.min.js", "version": null} (function(){window['__CF$cv$params']={r:'70ddae1aebbe5b22',m:'rYIJO201PNjNDwAeBuUdGJAMDpSBTyQhrgUb5VoqKAk-1652972195-0-AcwgAKeZx+9Q0tfOrqsMCyTZUUmxImV57Yd8FR65JwFa3Yv5SXuTuZyh74ZFBbe8UaS1GwrfljOl3MdWnDnzqc//yoTNVGK28fPHjFEW7CLOhMgVuH1lbOJLlOVwTrjFaQ==',s:[0x177b0e9783,0x2e078c3d0b],}})();