Composites
Tiles
Dashboard tiles are typically found in a Dashboard workspace. They are used to summarize, synthesize and allow exploration of different cross-sections of data within the application.
Quick look
- Other than the content within the tile, there are a few aspects about them that are customizable: they can have/not have up to (2) filters, they can/not have a customization menu, and they can/not have a show more section.
- Filters are ways of including or excluding data that would show up in the tile. Examples are incomplete/complete, tag, status, etc… As of now they support a select list, although a combobox is a reasonable option as well.
- The customization menu has a few options inside it: Remove this tile (if the tile is removable) and customize. The customization itself will (from a modal) will allow the user to make more substantial changes to what data is present in the tile not just filtering what is there by default.
- The show more section will double the size of the tile (vertically) and show more information (based on context). It will also allow for a scrollbar to appear if the data exceeds what can be shown in the tile’s expanded form. It can also optionally have a show fewer which will collapse the tile back to its original form.
- Filters, expansions and customizations on tiles are all sticky and will be remembered even after a user leaves a session and comes back.
Try it out
Tile
sort by
Date
- Date
- Name
- Thing 1
- Thing 2
- Thing 3
Code samples
- HTML
- PUG
<div class="dqpl-tile">
<div class="dqpl-tile-header">
<div class="dqpl-row">
<h4>Tile</h4>
<div class="dqpl-options-menu-wrap">
<button class="dqpl-options-menu-trigger" type="button" aria-controls="options-menu-1" aria-label="Sample Options" aria-expanded="false">
<div class="fa fa-ellipsis-v" aria-hidden="true"></div>
</button>
<ul class="dqpl-options-menu" id="options-menu-1" role="menu" aria-expanded="false">
<li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Item 1</li>
<li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Item 2</li>
</ul>
</div>
</div>
<div class="dqpl-row">
<div class="dqpl-label" id="filter-label">Filter</div>
<div class="dqpl-select">
<div class="dqpl-combobox" role="combobox" tabindex="0" aria-readonly="true" aria-autocomplete="none" aria-owns="filter-list" aria-expanded="false" aria-labelledby="filter-label" aria-activedescendant="default">
<div class="dqpl-pseudo-value">Filter option 1</div>
</div>
<ul class="dqpl-listbox" role="listbox" id="filter-list">
<li class="dqpl-option" role="option" id="default">Filter option 1</li>
<li class="dqpl-option" role="option">Filter option 2</li>
</ul>
</div>
</div>
</div>
<div class="dqpl-tile-content">
<ul class="dqpl-list">
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
</ul>
</div>
<div class="dqpl-tile-footer">
<p>Footer content</p>
</div>
</div>
For more information on implementation read thewiki.