cupper-hugo-theme/content/patterns/coding/file-trees.md

54 lines
1.4 KiB
Markdown
Raw Normal View History

2017-07-16 17:49:20 +02:00
+++
title = "File trees"
+++
2017-11-02 16:37:06 +01:00
Representing folder/file structures is simple and accessible in **Cupper**. Which is just as well, because some components may need to conform to a certain folder structure.
2017-07-16 17:49:20 +02:00
The file tree is described using a markdown nested list structure:
{{<codeBlock>}}
&#x7b;{% fileTree %}}
* Level 1 folder
* Level 2 file
* Level 2 folder
* Level 3 file
* Level 3 folder
* Level 4 file
* Level 3 folder
* Level 4 file
* Level 4 file
2017-07-17 09:57:57 +02:00
* Level 3 file
2017-07-16 17:49:20 +02:00
* Level 2 folder
* Level 3 file
* Level 3 file
* Level 3 file
2017-07-17 09:57:57 +02:00
* Level 2 file
* Level 1 file
2017-07-16 17:49:20 +02:00
&#x7b;{% /fileTree %}}
{{</codeBlock>}}
This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:
{{% fileTree %}}
* Level 1 folder
* Level 2 file
* Level 2 folder
* Level 3 file
* Level 3 folder
* Level 4 file
* Level 3 folder
* Level 4 file
* Level 4 file
2017-07-17 09:57:57 +02:00
* Level 3 file
2017-07-16 17:49:20 +02:00
* Level 2 folder
* Level 3 file
* Level 3 file
* Level 3 file
2017-07-17 00:03:03 +02:00
* Level 2 file
* Level 1 file
2017-07-16 17:49:20 +02:00
{{% /fileTree %}}
{{% warning %}}
2017-07-17 09:57:57 +02:00
The only reliable way to nest unordered lists in markdown is to indent the nested item by exactly four spaces. Using tabs or less than four spaces are unreliable methods.
2017-07-16 17:49:20 +02:00
{{% /warning %}}