Page Content

<sl-page-content> | SlPageContent
Since 2.0 experimental

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>

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.

Learn more about using slots.