Platform: Tile Component Technical Design
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.
<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">
<fdp-tile-body>Tile #1 content.</fdp-tile-body>
<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-body>
<fdp-tile-column>Tile #2 left content.</fdp-tile-column>
<fdp-tile-column>Tile #2 right content.</fdp-tile-column>
</fdp-tile-body>
<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>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.
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.
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.
Sets the width of tile to specified number of grid units. Minimum value of "2", maximum value of "5"
Sets the minimum width of tile to specified number of grid units. Minimum value of "2", maximum value of "5"
Sets the maximum width of tile to specified number of grid units. Minimum value of "2", maximum value of "5"
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.
<fdp-launch-tile
[width]="2"
[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>Has same properties as BaseTile with the following additional properties.
Title of the tile.
Subtitle of the tile.
Event emitted when tile is clicked.
Any content within the fdp-tile-body element will be projected into the body of the tile.
Any content in the fdp-tile-footer element will be projected into the tile footer
<fdp-slide-tile [delay]="2000" [width]="3">
<fdp-slide-tile-frame
[title]="Slide #1 Title"
[subtitle]="Slide #1 Subtitle"
[footer]="Slide #1 footer content"
[image]="http://example.com/images/tree.jpg"
(frameClick)="onFrameOneClick()"></fdp-slide-tile-frame>
<fdp-slide-tile-frame
[title]="Slide #2 Title"
[subtitle]="Slide #2 Subtitle"
[footer]="Slide #2 footer content"
[image]="http://example.com/images/ocean.jpg"
(frameClick)="onFrameTwoClick()"></fdp-slide-tile-frame>
<fdp-slide-tile-frame
[title]="Slide #3 Title"
[subtitle]="Slide #3 Subtitle"
[footer]="Slide #3 footer content"
[image]="http://example.com/images/mountain.jpg"
(frameClick)="onFrameThreeClick()"></fdp-slide-tile-frame>
</fdp-slide-tile>Has same properties as BaseTile with the following additional properties.
Number of millisecond delay between next frame.
See SlideTile example above.
Title displayed in slide tile frame.
Subtitle displayed in slide tile frame.
Footer text displayed in slide tile frame.
URL of image to display in background.
Event emitted on click of frame.
<fdp-feed-tile
[width]="4"
[title]="Feed Title"
[subtitle]="Subtitle"
[counter]="21"
(tileClick)="onTileClick()">
<fdp-tile-body>Body content.</fdp-tile-body>
<fdp-tile-footer>footer content</fdp-tile-footer>
</fdp-feed-tile>Has same properties as BaseTile with the following additional properties.
Title of the tile.
Subtitle of the tile.
Counter which is displayed in the tile.
Event emitted when tile is clicked.
Any content within the fdp-tile-body element will be projected into the body of the tile.
Any content in the fdp-tile-footer element will be projected into the tile footer.
<fdp-kpi-tile>
[width]="2"
[title]="'KPI Tile'"
[subtitle]="'Subtitle'"
[kpi]="144"
[trend]="up|down|neutral"
[state]="positive|negative|critical|neutral"
[unit]="MB"
(tileClick)="onTileClick()">
<fdp-tile-footer>footer content</fdp-tile-footer>
</fdp-kpi-tile>Has same properties as BaseTile with the following additional properties.
Title of the tile.
Subtitle of the tile.
KPI number to display.
Trend state; can be one of 'up', 'down' or 'neutral'. The state will set the trend icon.
Sets the font color of KPI.
The units of the KPI.
Icon class name to display to the side of KPI. (optional).
Event emitted when tile is clicked.
Any content in the fdp-tile-footer element will be projected into the tile footer.
Link to general support for i18n: Supporting internationalization in ngx/platform
The counter attribute can be supported by using DecimalPipe which can automatically translate numbers depending on the locale.
Special Usecase: No
- Basic
fdp-tilecan be supported as:
<fdp-tile [width]="1" i18n-title="@@title" title="Tile #1" i18n-subtitle="@@subtitle" subtitle="The first tile">
<fdp-tile-body i18n="@@tileBody">Tile #1 content.</fdp-tile-body>
<fdp-tile-footer i18n="@@tileBody">Tile #1 footer content.</fdp-tile-footer>
</fdp-tile>Note that title, subtitle, and footer can be marked in the same way as shown above for tile subtypes fdp-slide-tile-frame,fdp-launch-tile, fdp-feed-tile, and fdp-kpi-tile.
-
fdp-tile-columncan be supported as:
<fdp-tile-column i18n="@@tileColumnContent" >Tile #2 left content.</fdp-tile-column>Redesign Required: No