Platform: Tile Component Technical Design

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>
  <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

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.

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"

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.