Using Sections to Organize Page Content
Introduced in the example app earlier, VDL sections can help you structure and organize your page content - they correspond to the Bootstrap container class.
Sections can be nested, and can have an optional
heading attribute:
<vdl-section heading="Welcome to Portfolio Optimization"
heading-level="1">
<vdl-section heading="Return per share"
heading-level="2"></vdl-section>
</vdl-section>
As is depicted above, you can also provide a heading-level attribute that controls the weight of the heading text - these follow the typical HTML conventions, with level 1 the largest.
Controlling Section Widths
By default, sections have a fixed width of 1140 pixels. If the browser window is too narrow to display the full content, scrollbars will appear. You can customize the width by adding the
width attribute to the
<vdl-section> element - widths are specified in pixels.
<vdl-section width="1000">This section is 1000 pixels wide.</vdl-section>
By contrast to using a fixed width, sections can also be defined as fluid using a
layout="fluid" attribute, where text and other content reflow to fit the browser's width whenever it is resized.
<vdl-section layout="fluid"> This text will wrap onto the next line if the window becomes too narrow. </vdl-section>
In a default fixed width section, the column widths are fixed at 97.5 pixels per size unit. If the width of a fixed section is set to something other than the default, the column widths will adjust automatically to maintain 12 columns across the section width.
The width attribute is not permitted on a fluid section.