Difference between revisions of "Sidebar content"

From ImpVis Wiki
Jump to navigation Jump to search
(Created page with "The <code>iv-sidebar-content</code>component creates a summary of all the sidebar sections at the top of the pane. It is placed inside the pane component. As the user scro...")
 
 
Line 12: Line 12:


Description: If true, will show previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation
Description: If true, will show previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation
[[File:Themes.png|none|thumb|Available themes. ]]
===Events===
'''scrollTo'''


''Description:''


'''title'''
'''themeVars'''


Type: String
''Description:''  
 
Required: true
 
Description: Title of the sidebar section
 
 
'''icon'''
 
Type: String
 
Default: 'star'
 
Description: Can specify the icon displayed next to the sidebar section title. Can choose any icon from [https://fontawesome.com/v5.15/icons?d=gallery&p=2 this website].
 
 
'''highlight'''
 
Type: Boolean
 
Default: false
 
Description: If true, highlights the sidebar section.
[[File:SidebarSectionHighlight.png|none|thumb|Sidebar section when highlight prop is set to true.]]


==Design Choice==
==Design Choice==
The sidebar section title is in a boxed shape to make it stand out against any text. Icons can be specified to add a graphical visual element.
The progress bar at the top of the pane allows the user to see how far through the pane content they are, and clearly see which section they're on by showing only the icons for the other sections. The next/previous buttons at the bottom of the pane match the styling of the pane for consistency.  


[[Category:Layouts]]
[[Category:Layouts]]

Latest revision as of 10:45, 22 July 2021

The iv-sidebar-contentcomponent creates a summary of all the sidebar sections at the top of the pane. It is placed inside the pane component. As the user scrolls down the pane, the display at the top of the pane reflects which sidebar section the user is on. Pagination can also be turned on, which shows previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation.

SidebarContent.png

Technical Information

Props

showPagination

Type: Boolean

Default: true

Description: If true, will show previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation

Events

scrollTo

Description:

themeVars

Description:

Design Choice

The progress bar at the top of the pane allows the user to see how far through the pane content they are, and clearly see which section they're on by showing only the icons for the other sections. The next/previous buttons at the bottom of the pane match the styling of the pane for consistency.