Tile Group

<sl-tile-group> | SlTileGroup
Since 1.0 stable

Tile displays a preview of the report page with the page the and interactions to help with configuring the page. 


<sl-tile-group>
  <sl-tile>

    <div class="skeleton-overview">
      <header>
        <sl-skeleton></sl-skeleton>
        <sl-skeleton></sl-skeleton>
      </header>

      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
    </div>

  </sl-tile>
  <sl-tile>
    <div class="skeleton-overview">
      <header>
        <sl-skeleton></sl-skeleton>
        <sl-skeleton></sl-skeleton>
      </header>

      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
    </div>

  </sl-tile>
  <sl-tile>

    <div class="skeleton-overview">
      <header>
        <sl-skeleton></sl-skeleton>
        <sl-skeleton></sl-skeleton>
      </header>

      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
    </div>

  </sl-tile>
  <sl-tile>

    <div class="skeleton-overview">
      <header>
        <sl-skeleton></sl-skeleton>
        <sl-skeleton></sl-skeleton>
      </header>

      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
    </div>

  </sl-tile>
</sl-tile-group>

<style>
  .skeleton-overview {
    padding: 2rem;
    width: 100%;
    height: 100%;
  }
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .skeleton-overview header sl-skeleton:last-child {
    flex: 0 0 auto;
    width: 70%;
  }
  .skeleton-overview sl-skeleton {
    margin-bottom: 1rem;
  }
  .skeleton-overview sl-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }
  .skeleton-overview sl-skeleton:nth-child(3) {
    width: 95%;
  }
  .skeleton-overview sl-skeleton:nth-child(4) {
    width: 80%;
  }
</style>

Examples

Report container

Hello My World Hello My World Hello My World 
<sl-tile-group>
  <sl-tile>Hello</sl-tile>
  <sl-tile>My</sl-tile>
  <sl-tile>World</sl-tile>
  <sl-tile>Hello</sl-tile>
  <sl-tile>My</sl-tile>
  <sl-tile>World</sl-tile>
  <sl-tile>Hello</sl-tile>
  <sl-tile>My</sl-tile>
  <sl-tile>World</sl-tile>
</sl-tile-group>

Second Example

TODO

[component-metadata:sl-tile-group]

Slots

Name Description
(default) The default slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
column Whether this is being shown in a column. boolean false
sortable Whether to allow sorting boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.