Page Content

<sl-page-content> | SlPageContent
Since 1.0 stable

A container for page content and footer. Should be used in conjunction with sl-page-header

Team settings

 
<sl-page-header heading="Team settings"></sl-page-header>

<sl-page-content>
  <p>Team settings</p>
</sl-page-content>

Examples

Explanatory text card

Use the body slot to add one of these.

This is where you can modify your team settings

Team settings

 
<sl-page-header heading="Team settings">
  <div slot="body">
    This is where you can modify your team settings
  </div>
</sl-page-header>

<sl-page-content>
  <p>Team settings</p>
</sl-page-content>

Using tabs

You can use the tabs slot on sl-page-header to add a tab strip to the bottom of the page header. This allows the tabs to have a white background, while the tab content has a grey background. Note that this means you must listen for sl-tab-show from the tab group and dynamically change the content of the sl-page-content component manually.

Branding Image library Page settings
Branding settings
 
<sl-page-header heading="Team settings">
  <sl-tab-group slot="tabs" id="tab-group">
    <sl-tab slot="nav" panel="branding">Branding</sl-tab>
    <sl-tab slot="nav" panel="image-library">Image library</sl-tab>
    <sl-tab slot="nav" panel="page-settings">Page settings</sl-tab>
  </sl-tab-group>
</sl-page-header>

<sl-page-content>
  <div id="branding" class="tab-content">Branding settings</div>
  <div hidden id="image-library" class="tab-content">Image library</div>
  <div hidden id="page-settings" class="tab-content">Page settings</div>
</sl-page-content>

<script>
  document
    .querySelector('#tab-group')
    .addEventListener('sl-tab-show', e => {
      document.querySelectorAll('.tab-content').forEach(t => t.hidden = true);
      document.getElementById(e.detail.name).hidden = false;
    });
</script>

Using breadcrumbs

You can use the breadcrumbs slot on sl-page-header to add breadcrumbs to the top of the page header. Note that single page application need to breadcrumb links to ensure breadcrumbs update in the page header on click..

Home Section one Section two Branding Image library Page settings
Branding settings
 
<sl-page-header heading="Team settings">
  <sl-breadcrumb slot="breadcrumbs" id="breadcrumb-group">
    <sl-breadcrumb-item href="#">Home</sl-breadcrumb-item>
    <sl-breadcrumb-item href="#">Section one</sl-breadcrumb-item>
    <sl-breadcrumb-item href="#">Section two</sl-breadcrumb-item>
  </sl-breadcrumb>
  <sl-tab-group slot="tabs" id="tab-group">
    <sl-tab slot="nav" panel="branding">Branding</sl-tab>
    <sl-tab slot="nav" panel="image-library">Image library</sl-tab>
    <sl-tab slot="nav" panel="page-settings">Page settings</sl-tab>
  </sl-tab-group>

</sl-page-header>

<sl-page-content>
  <div id="branding" class="tab-content">Branding settings</div>
  <div hidden id="image-library" class="tab-content">Image library</div>
  <div hidden id="page-settings" class="tab-content">Page settings</div>
</sl-page-content>

<script>
  document
    .querySelector('#tab-group')
    .addEventListener('sl-tab-show', e => {
      document.querySelectorAll('.tab-content').forEach(t => t.hidden = true);
      document.getElementById(e.detail.name).hidden = false;
    });
</script>

Footers

Use the footer-left and footer-right slots of the sl-page-content component to add items in the page footer.

Adding the inline-footer attribute will result in the footer being immediately below the content instead of fixed to the bottom of the viewport.

If the footer is not inline, then the page content will fill it’s container provided that container has a defined height.

This is where you can modify your team settings
Inline footer
Cancel
Save 
<sl-page-header heading="Team settings">
  <div slot="body">
    This is where you can modify your team settings
  </div>
</sl-page-header>

<sl-page-content>
  <div>
    <sl-switch id="toggle-inline">Inline footer</sl-switch>
  </div>

  <div slot="footer-left">
    <sl-button variant="secondary">Cancel</sl-button>
  </div>
  <div slot="footer-right">
    <sl-button>Save</sl-button>
  </div>
</sl-page-content>

<script>
  (() => {
    document.getElementById("toggle-inline").addEventListener("sl-change", (e) => e.target.closest("sl-page-content").toggleAttribute("inline-footer"));
  })();
</script>

TODO

Second Example

TODO

[component-metadata:sl-page-content]

Slots

Name Description
(default) The default slot.
footer-left left hand side of the footer
footer-right right hand side of the footer

Learn more about using slots.