Ui.Layout.Documentation

A layout for displaying documentation:

  • The left side is the navigation.
  • The center part contains the the content (with anchors).
  • The right part is the table of contents (using the anchors in the center).
Demo

You can see a demo of a Ui.Layout.Documentation below.

This page is using this component.
Documentation

Topic 1 (H2)

Some Content...

Topic 2 (H2)

Some Content...

<Ui.Layout.Documentation
items=[
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/"),
Ui.NavItem.Divider,
Ui.NavItem.Group(
iconBefore: Ui.Icons.CHECKLIST,
iconAfter: <></>,
label: "Group",
items:
[
Ui.NavItem.Link(
iconBefore: Ui.Icons.CHECK,
iconAfter: <></>,
label: "Subitem",
target: "",
href: "/"),
Ui.NavItem.Link(
iconBefore: Ui.Icons.CHECK,
iconAfter: <></>,
label: "Subitem 2",
target: "",
href: "/"),
Ui.NavItem.Group(
iconBefore: Ui.Icons.CHECKLIST,
iconAfter: <></>,
label: "Sub Group",
items:
[
Ui.NavItem.Link(
iconBefore: Ui.Icons.CHECK,
iconAfter: <></>,
label: "Subitem 3",
target: "",
href: "/"),
Ui.NavItem.Link(
iconBefore: Ui.Icons.CHECK,
iconAfter: <></>,
label: "Subitem 4",
target: "",
href: "/")
])
]),
Ui.NavItem.Item(
action: (event : Html.Event) { Window.alert("Download!") },
iconBefore: Ui.Icons.DESKTOP_DOWNLOAD,
label: "Download",
iconAfter: <></>)
]
>
<Ui.Box title=<>"Documentation"</>>
<a name="topic-1"><h2>"Topic 1 (H2)"</h2></a>
<p>"Some Content..."</p>
<a name="topic-2"><h2>"Topic 2 (H2)"</h2></a>
<p>"Some Content..."</p>
</Ui.Box>
</Ui.Layout.Documentation>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.