Changeset View
Changeset View
Standalone View
Standalone View
source/patterns/navigation/column.rst
| Show All 9 Lines | 8 | .. container:: available plasma | |||
|---|---|---|---|---|---|
| 10 | |nbsp| | 10 | |nbsp| | ||
| 11 | 11 | | |||
| 12 | Examples of column-based navigation in a phone and a desktop UI | 12 | Examples of column-based navigation in a phone and a desktop UI | ||
| 13 | 13 | | |||
| 14 | .. image:: /img/Desktop.png | 14 | .. image:: /img/Desktop.png | ||
| 15 | :alt: Column-based navigation on the desktop | 15 | :alt: Column-based navigation on the desktop | ||
| 16 | :scale: 40% | 16 | :scale: 40% | ||
| 17 | 17 | | |||
| 18 | .. image:: /img/PageRow.png | 18 | .. raw:: html | ||
| 19 | :alt: Column-based navigation on mobile | 19 | | ||
| 20 | :scale: 20% | 20 | <video src="https://cdn.kde.org/hig/video/20181031-1/Column1.webm" | ||
| 21 | loop="true" playsinline="true" width="320" controls="true" | ||||
| 22 | onended="this.play()" class="border"></video> | ||||
| 21 | 23 | | |||
| 22 | When to use | 24 | When to use | ||
| 23 | ----------- | 25 | ----------- | ||
| 24 | 26 | | |||
| 25 | Column-based navigation is ideal for navigating through a hierarchically | 27 | Column-based navigation is ideal for navigating through a hierarchically | ||
| 26 | organized information space, where users often go back and forth between | 28 | organized information space, where users often go back and forth between | ||
| 27 | different levels of the hierarchy | 29 | different levels of the hierarchy | ||
| 28 | For example: | 30 | For example: | ||
| Show All 38 Lines | |||||