Skip to content

Platform: Tile Component Technical Design

Jump to bottom
Kevin Okamoto edited this page Feb 11, 2020 · 20 revisions

Tile/Tile Grid

The definitions of a "Tile" differ between Fiori 3 and Fundamental-Styles. Where Fiori 3 defines a tile as being a container of fixed height and set width sizes, the Fundamental-Styles tile is a container with flexible dimensions.

This design assumes that Fundamental-Styles will eventually adopt the Fiori 3 definition of a Tile.

Example

<fdp-tile-grid> <!-- Tile grid is not part of the Tile component, please see TileGrid spec -->
  <fdp-tile [width]="1" [title]="Tile #1" [subtitle]="The first tile">
    <p>Tile #1 content.</p>
    <fdp-tile-footer>Tile #1 footer content.</fdp-tile-footer>
  </fdp-tile>
  <fdp-tile [minWidth]="2" [maxWidth]="4" [title]="Tile #2" [subtitle]="The second tile">
    <fdp-tile-column>Tile #2 left content.</fdp-tile-column>
    <fdp-tile-column>Tile #2 right content.</fdp-tile-column>
    <fdp-tile-footer>
       <fdp-tile-column>Tile #2 left footer content.<fdp-tile-column>
       <fdp-tile-column>Tile #2 right footer content.<fdp-tile-column>
    </fdp-tile-footer>
  </fdp-tile>
</fdp-tile-grid>

Design

The Fiori 3 design documentation outlines several tile types:

  • Launch Tile
  • Slide Tile
  • Feed Tile
  • KPI Tile

Each one of these tiles have different specifications for the layout of the tile interior. However all tiles have the same specifications for the "outer" tile dimensions and behavior within the tile grid. As such, we should design a "BaseTile" component from which all tile types will extend from.

Tile Sizes

Fiori 3 specifications define two sizes of tile: "small" and "large". The size of the tile used is determined by screen size. The Fundamental-Styles CSS library should be able to handle this size switching using media type rules. Consequently, we do not have to handle the size properties at the component level.

Tile Grid

Fiori 3 specifications define the layout of tiles based on a grid system. All tiles have a fixed height of two grid units. Tiles are allowed to grow in width by grid unit - The smallest width being two grid units and the largest width being five grid units.

Tile component widths can be specified by setting a minimum width, maximum width or a fixed width.

Tiles within a grid are positioned end-to-end horizontally and will wrap to the next row based on available screen width.

BaseTile

Property Bindings

title: String

Title of the tile.

subtitle: String

Subtitle of the tile.

width: Number

Sets the width of tile to specified number of grid units. Minimum value of "2", maximum value of "5"

minWidth: Number

Sets the minimum width of tile to specified number of grid units. Minimum value of "2", maximum value of "5"

maxWidth: Number

Sets the maximum width of tile to specified number of grid units. Minimum value of "2", maximum value of "5"

Event Binding

tileClick

Event emitted when tile is clicked.

Projected Content

Body

Any content within the fdp-tile element will be projected into the body of the tile, with the exception of elements in a fdp-tile-footer element.

Footer

Any content in the fdp-tile-footer element will be projected into the tile footer.

Tile Columns

Tile content can be split into two columns using the fdp-tile-column component. The fdp-tile-column component will put the encapsulated content into a container (div) with the proper spacing and padding.

LaunchTile

Example

<fdp-launch-tile [title]="'Launch Tile'" [subtitle]="'Subtitle'" (tileClick)="onTileClick()">
  <fdp-tile-body>Body content.</fdp-tile-body>
  <fdp-tile-footer>footer content</fdp-tile-footer>
</fdp-launch-tile>

Property Bindings

Same as BaseTile.

Event Bindings

Same as BaseTile.

Projected Content

fdp-tile-body

Content of tile body.

fdp-tile-footer

Content of tile footer.

SlideTile

FeedTile

KPITile

Notes

  • Need "Basic" tile from which we can extend to more complex tiles like "KPI Tile" and "Carousel Tile"
  • Create separate doc for TileGrid
Clone this wiki locally