[DEV] Reference
This page serves as a reference for the available markdown options in the docs.
Diagrams ​
Android Runtime Overview ​
iOS Runtime Overview ​
Frame and Page Lifecycle ​
View Origin ​
Android View Lifecycle ​
- OnLayoutChangeListener
StackLayout (exploration) ​
Videos ​
View Origin Demo ​
Frontmatter ​
The top of the markdown file contains a section surrounded by --- this part is called the frontmatter, and it is used to set a few things on a page. For example:
---
title: Some title
---
<!-- the rest of the markdown -->Available options:
---
title: controls the h1 page title and the title in the browser tab bar
description: the page description, shown below the title and set in the description meta tags
category: the name/text of the page category, show in the breadcrumbs and above the title
categoryLink: the link where the custom category should link to
prev: the URL where the `Previous` button at the bottom should link to
prevText: the text to show in the `Previous` button. By default the text is looked up in the sidebar.
next: the URL where the `Next` button at the bottom should link to
nextText: the text to show in the `Next` button. By default the text is looked up in the sidebar.
contributors: false # to disable the contributors list in the right sidebar
contributors:
- GitHubUsername1
- GitHubUsername2
---
<!-- the rest of the markdown -->Images/Assets handling ​
Images and assets should be placed in the content/assets folder. Generally in a directory named the same as the page.
For example, if we have a page at /setup/windows the assets for this page would go in assets/images/setup/windows/.
This is not a hard-limitation, and can be switched up when necessary.
Referencing images in Markdown ​
To show the images in markdown, use the standard markdown image markup  where the path is relative to the markdown file itself.
For example:
<!-- content/setup/windows.md -->
Tabs ​
WARNING
In order to render Markdown inside a tab, you must have one line break above and below the markdown content.
For example:
<Tab>
# Test
</Tab>Will render # Test literally, while
<Tab>
# Test
</Tab>Will render a h1 Test title.
Flavor Tabs ​
All Flavor tabs will be synchronized and ordered consistently:
StepList ​
To notate steps from a screenshot, or steps in general, you can wrap any list with the <StepList> component to style the list.
Example:
<StepList>
1. This is a test step list, that should render the bullets on the left in a red circle
2. This is the second step
3. Then there's the **third** step
4. And a **fourth**
5. It can go...
6. On, and on...
7. And on and on...
8. Until we run out of things to say
9. But the list should handle **double digit** step counters just fine, as well as lines that wrap to multiple lines in case we have lots of words to say about a given step, beause sometimes steps just need that extra bit of explanation to properly make sense to the reader.
10. Finally, we can see those **double digits** in action right here.
</StepList>Important
Note the blank lines above and below the markdown list, this is required due to the way Markdown is parsed when combined with "html" elements.
- This is a test step list, that should render the bullets on the left in a red circle
- This is the second step
- Then there's the third step
- And a fourth
- It can go...
- On, and on...
- And on and on...
- Until we run out of things to say
- But the list should handle double digit step counters just fine, as well as lines that wrap to multiple lines in case we have lots of words to say about a given step, beause sometimes steps just need that extra bit of explanation to properly make sense to the reader.
- Finally, we can see those double digits in action right here.
DeviceFrame ​
To make content pretty, you can wrap it in a device frame
iOS Frame ​
Android Frame ​
Generic Window Frame ​
Props:
title: string | false- sets a custom window titlebuttons: boolean- hide window buttons
- Next
- Introduction
Contributors
