Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-30 20:41:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): document vertical vs horizontal layout

Browse Source
This commit is contained in:
Elian Doran 2025-03-12 12:50:30 +02:00
parent 3a41d8fd11
commit 034998fa97
No known key found for this signature in database
27 changed files with 573 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
docs/User Guide/!!!meta.json
View File

@ -1665,6 +1665,126 @@
], ],
"dirFileName": "UI Elements", "dirFileName": "UI Elements",
"children": [ "children": [
{
"isClone": false,
"noteId": "x0JgW8UqGXvq",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"x0JgW8UqGXvq"
],
"title": "Vertical and horizontal layout",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "Ms1nauBra7gq",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-layout",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "_lbSettings",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
"dataFileName": "Vertical and horizontal layout.md",
"attachments": [
{
"attachmentId": "7VlCImOtpKzK",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Vertical and horizontal la.png"
},
{
"attachmentId": "9sCZBqokn4vf",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Vertical and horizontal la.png"
},
{
"attachmentId": "gw3DaUul5ccI",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Vertical and horizontal la.png"
},
{
"attachmentId": "jhiE5DTkLOCK",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "3_Vertical and horizontal la.png"
},
{
"attachmentId": "JwO3rUNb9tyU",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "4_Vertical and horizontal la.png"
},
{
"attachmentId": "NVjM5z6IsNZf",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_Vertical and horizontal la.png"
},
{
"attachmentId": "Z2F8ipVjwugg",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "6_Vertical and horizontal la.png"
}
]
},
{ {
"isClone": false, "isClone": false,
"noteId": "x3i7MxGccDuM", "noteId": "x3i7MxGccDuM",
@ -1675,12 +1795,20 @@
"x3i7MxGccDuM" "x3i7MxGccDuM"
], ],
"title": "Global menu", "title": "Global menu",
"notePosition": 10, "notePosition": 20,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [], "attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "x0JgW8UqGXvq",
"isInheritable": false,
"position": 10
}
],
"format": "markdown", "format": "markdown",
"dataFileName": "Global menu.md", "dataFileName": "Global menu.md",
"attachments": [ "attachments": [
@ -1699,6 +1827,14 @@
"mime": "image/jpg", "mime": "image/jpg",
"position": 10, "position": 10,
"dataFileName": "1_Global menu_image.png" "dataFileName": "1_Global menu_image.png"
},
{
"attachmentId": "rCnBqSyldhp9",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "2_Global menu_image.png"
} }
] ]
}, },
@ -1712,7 +1848,7 @@
"BlN9DFI679QC" "BlN9DFI679QC"
], ],
"title": "Ribbon", "title": "Ribbon",
"notePosition": 20, "notePosition": 30,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -1749,7 +1885,7 @@
"4TIF1oA4VQRO" "4TIF1oA4VQRO"
], ],
"title": "Options", "title": "Options",
"notePosition": 40, "notePosition": 50,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -1777,7 +1913,7 @@
"oPVyFC7WL2Lp" "oPVyFC7WL2Lp"
], ],
"title": "Note Tree", "title": "Note Tree",
"notePosition": 50, "notePosition": 60,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -1853,6 +1989,62 @@
"dataFileName": "1_Note Tree_image.png" "dataFileName": "1_Note Tree_image.png"
} }
] ]
},
{
"isClone": false,
"noteId": "xYmIYSP6wE3F",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"xYmIYSP6wE3F"
],
"title": "Launcher Bar",
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-sidebar",
"isInheritable": false,
"position": 10
}
],
"format": "markdown",
"dataFileName": "Launcher Bar.md",
"attachments": []
},
{
"isClone": false,
"noteId": "Ms1nauBra7gq",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"Ms1nauBra7gq"
],
"title": "Quick search",
"notePosition": 80,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-search-alt-2",
"isInheritable": false,
"position": 10
}
],
"format": "markdown",
"dataFileName": "Quick search.md",
"attachments": []
} }
] ]
}, },

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/1_Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 B

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/2_Global menu_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/2_Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 B

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/3_Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/4_Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/5_Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 780 B

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/6_Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 B

11
docs/User Guide/User Guide/Basic Concepts/UI Elements/Global menu.md
View File

@ -1,9 +1,8 @@
# Global menu # Global menu
The position of the global menu differs based on which layout is selected in settings: The global menu configures the current window (zoom, keeping the window on top) and offers access to some more advanced options.
* For the vertical layout, the icon is in the top-left of the screen, in the form of the Trilium icon. ![](2_Global%20menu_image.png)
* For the horizontal layout, the icon is in the top-right of the screen, in form of a hamburger menu icon.
| | | ## Accessing the global menu
| --- | --- |
| ![](Global%20menu_image.png) <br> <br>The global menu in the vertical layout. | ![](1_Global%20menu_image.png) <br> <br>The global menu in the horizontal layout. | See [Vertical and horizontal layout](Vertical%20and%20horizontal%20layout.md) since the position of the global menu is changed based on which layout has been selected.

4
docs/User Guide/User Guide/Basic Concepts/UI Elements/Launcher Bar.md Normal file
View File

@ -0,0 +1,4 @@
# Launcher Bar
## Position of the launcher bar
It's possible to display the launcher bar either vertically, on the left side of the screen, or horizontally on the top

0
docs/User Guide/User Guide/Basic Concepts/UI Elements/Quick search.md Normal file
View File

BIN
docs/User Guide/User Guide/Basic Concepts/UI Elements/Vertical and horizontal la.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 482 B

34
docs/User Guide/User Guide/Basic Concepts/UI Elements/Vertical and horizontal layout.md Normal file
View File

@ -0,0 +1,34 @@
# Vertical and horizontal layout
## Layouts
Trilium supports two different layouts, based on your preference.
### Vertical layout
The vertical layout is Trilium's original layout:
* The [Launcher Bar](Launcher%20Bar.md) is positioned on the left side of the screen, with buttons being laid out vertically.
* The tab bar is at the top, but to the right of the [Note Tree](Note%20Tree.md).
* The [Quick search](Quick%20search.md) is at the top of the [Note Tree](Note%20Tree.md).
* The [Note Tree](Note%20Tree.md) can be collapsed by pressing the ![](6_Vertical%20and%20horizontal%20la.png) button at the bottom of the [Launcher Bar](Launcher%20Bar.md).
* The [Global menu](Global%20menu.md) can be accessed via the ![](5_Vertical%20and%20horizontal%20la.png) icon at the top of the [Launcher Bar](Launcher%20Bar.md).
![](4_Vertical%20and%20horizontal%20la.png)
### Horizontal layout
The horizontal layout is a more traditional layout, since it bears similarity with other applications. In this mode:
* The [Launcher Bar](Launcher%20Bar.md) is at the top of the screen, with the buttons laid horizontally.
* The tab bar is at the top of the screen, but now covers the entirety of the width, allowing for more tabs to be displayed at once.
* The [Quick search](Quick%20search.md) is now part of the [Launcher Bar](Launcher%20Bar.md). It can be moved around according to preference and even removed if needed.
* The [Note Tree](Note%20Tree.md) can be collapsed by pressing the small ![](2_Vertical%20and%20horizontal%20la.png) button to the left of the first tab.
* The [Global menu](Global%20menu.md) can be accessed via the ![](1_Vertical%20and%20horizontal%20la.png) button at the end of the [Launcher Bar](Launcher%20Bar.md).
![](3_Vertical%20and%20horizontal%20la.png)
## Changing the layout
Go to [Settings](#root/_hidden/_lbRoot/_lbVisibleLaunchers/_lbSettings) and look for the _Appearance_ option on the left. Then look for the _Layout_ section, where there is the possibility to switch between the two available layouts.
Selecting an option will immediately apply the new layout by reloading the window.

206
src/public/app/doc_notes/en/User Guide/!!!meta.json generated
View File

@ -30,7 +30,7 @@
"title": "Advanced Usage", "title": "Advanced Usage",
"notePosition": 10, "notePosition": 10,
"prefix": null, "prefix": null,
"isExpanded": true, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -1665,6 +1665,126 @@
], ],
"dirFileName": "UI Elements", "dirFileName": "UI Elements",
"children": [ "children": [
{
"isClone": false,
"noteId": "x0JgW8UqGXvq",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"x0JgW8UqGXvq"
],
"title": "Vertical and horizontal layout",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "Ms1nauBra7gq",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-layout",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "_lbSettings",
"isInheritable": false,
"position": 60
}
],
"format": "html",
"dataFileName": "Vertical and horizontal layout.html",
"attachments": [
{
"attachmentId": "7VlCImOtpKzK",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Vertical and horizontal la.png"
},
{
"attachmentId": "9sCZBqokn4vf",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Vertical and horizontal la.png"
},
{
"attachmentId": "gw3DaUul5ccI",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Vertical and horizontal la.png"
},
{
"attachmentId": "jhiE5DTkLOCK",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "3_Vertical and horizontal la.png"
},
{
"attachmentId": "JwO3rUNb9tyU",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "4_Vertical and horizontal la.png"
},
{
"attachmentId": "NVjM5z6IsNZf",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_Vertical and horizontal la.png"
},
{
"attachmentId": "Z2F8ipVjwugg",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "6_Vertical and horizontal la.png"
}
]
},
{ {
"isClone": false, "isClone": false,
"noteId": "x3i7MxGccDuM", "noteId": "x3i7MxGccDuM",
@ -1675,12 +1795,20 @@
"x3i7MxGccDuM" "x3i7MxGccDuM"
], ],
"title": "Global menu", "title": "Global menu",
"notePosition": 10, "notePosition": 20,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [], "attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "x0JgW8UqGXvq",
"isInheritable": false,
"position": 10
}
],
"format": "html", "format": "html",
"dataFileName": "Global menu.html", "dataFileName": "Global menu.html",
"attachments": [ "attachments": [
@ -1699,6 +1827,14 @@
"mime": "image/jpg", "mime": "image/jpg",
"position": 10, "position": 10,
"dataFileName": "1_Global menu_image.png" "dataFileName": "1_Global menu_image.png"
},
{
"attachmentId": "rCnBqSyldhp9",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "2_Global menu_image.png"
} }
] ]
}, },
@ -1712,7 +1848,7 @@
"BlN9DFI679QC" "BlN9DFI679QC"
], ],
"title": "Ribbon", "title": "Ribbon",
"notePosition": 20, "notePosition": 30,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -1749,7 +1885,7 @@
"4TIF1oA4VQRO" "4TIF1oA4VQRO"
], ],
"title": "Options", "title": "Options",
"notePosition": 40, "notePosition": 50,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -1777,7 +1913,7 @@
"oPVyFC7WL2Lp" "oPVyFC7WL2Lp"
], ],
"title": "Note Tree", "title": "Note Tree",
"notePosition": 50, "notePosition": 60,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -1853,6 +1989,62 @@
"dataFileName": "1_Note Tree_image.png" "dataFileName": "1_Note Tree_image.png"
} }
] ]
},
{
"isClone": false,
"noteId": "xYmIYSP6wE3F",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"xYmIYSP6wE3F"
],
"title": "Launcher Bar",
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-sidebar",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Launcher Bar.html",
"attachments": []
},
{
"isClone": false,
"noteId": "Ms1nauBra7gq",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"Ms1nauBra7gq"
],
"title": "Quick search",
"notePosition": 80,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-search-alt-2",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Quick search.html",
"attachments": []
} }
] ]
}, },
@ -1867,7 +2059,7 @@
"title": "Note", "title": "Note",
"notePosition": 40, "notePosition": 40,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": true,
"type": "text", "type": "text",
"mime": "text/markdown", "mime": "text/markdown",
"attributes": [ "attributes": [

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/1_Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/2_Global menu_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/2_Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/3_Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/4_Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/5_Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 780 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/6_Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 B

37
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Global menu.html generated
View File

@ -13,34 +13,15 @@
<h1 data-trilium-h1>Global menu</h1> <h1 data-trilium-h1>Global menu</h1>
<div class="ck-content"> <div class="ck-content">
<p>The position of the global menu differs based on which layout is selected <p>The global menu configures the current window (zoom, keeping the window
in settings:</p> on top) and offers access to some more advanced options.</p>
<ul> <p>
<li>For the vertical layout, the icon is in the top-left of the screen, in <img src="2_Global menu_image.png" width="245" height="332">
the form of the Trilium icon.</li> </p>
<li>For the horizontal layout, the icon is in the top-right of the screen, <h2>Accessing the global menu</h2>
in form of a hamburger menu icon.</li> <p>See&nbsp;<a class="reference-link" href="Vertical%20and%20horizontal%20layout.html">Vertical and horizontal layout</a>&nbsp;since
</ul> the position of the global menu is changed based on which layout has been
<table> selected.</p>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Global menu_image.png" alt="" />
<br />
<br />The global menu in the vertical layout.</td>
<td>
<img src="1_Global menu_image.png" alt="" />
<br />
<br />The global menu in the horizontal layout.</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</body> </body>

23
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Launcher Bar.html generated Normal file
View File

@ -0,0 +1,23 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Launcher Bar</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Launcher Bar</h1>
<div class="ck-content">
<h2>Position of the launcher bar</h2>
<p>It's possible to display the launcher bar either vertically, on the left
side of the screen, or horizontally on the top</p>
</div>
</div>
</body>
</html>

19
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Quick search.html generated Normal file
View File

@ -0,0 +1,19 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Quick search</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Quick search</h1>
<div class="ck-content"></div>
</div>
</body>
</html>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Vertical and horizontal la.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 482 B

74
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Vertical and horizontal layout.html generated Normal file
View File

@ -0,0 +1,74 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Vertical and horizontal layout</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Vertical and horizontal layout</h1>
<div class="ck-content">
<h2>Layouts</h2>
<p>Trilium supports two different layouts, based on your preference.</p>
<h3>Vertical layout</h3>
<p>The vertical layout is Trilium's original layout:</p>
<ul>
<li>The&nbsp;<a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>&nbsp;is
positioned on the left side of the screen, with buttons being laid out
vertically.</li>
<li>The tab bar is at the top, but to the right of the&nbsp;<a class="reference-link"
href="Note%20Tree.html">Note Tree</a>.</li>
<li>The&nbsp;<a class="reference-link" href="Quick%20search.html">Quick search</a>&nbsp;is
at the top of the&nbsp;<a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</li>
<li>The&nbsp;<a class="reference-link" href="Note%20Tree.html">Note Tree</a>&nbsp;can
be collapsed by pressing the
<img src="6_Vertical and horizontal la.png"
width="11" height="11">button at the bottom of the&nbsp;<a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.</li>
<li>The&nbsp;<a class="reference-link" href="Global%20menu.html">Global menu</a>&nbsp;can
be accessed via the
<img src="5_Vertical and horizontal la.png" width="26"
height="23">icon at the top of the&nbsp;<a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.</li>
</ul>
<p>
<img src="4_Vertical and horizontal la.png" width="1043" height="684">
</p>
<h3>Horizontal layout</h3>
<p>The horizontal layout is a more traditional layout, since it bears similarity
with other applications. In this mode:</p>
<ul>
<li>The&nbsp;<a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>&nbsp;is
at the top of the screen, with the buttons laid horizontally.</li>
<li>The tab bar is at the top of the screen, but now covers the entirety of
the width, allowing for more tabs to be displayed at once.</li>
<li>The&nbsp;<a class="reference-link" href="Quick%20search.html">Quick search</a>&nbsp;is
now part of the&nbsp;<a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.
It can be moved around according to preference and even removed if needed.</li>
<li>The&nbsp;<a class="reference-link" href="Note%20Tree.html">Note Tree</a>&nbsp;can
be collapsed by pressing the small
<img src="2_Vertical and horizontal la.png"
width="14" height="13">button to the left of the first tab.</li>
<li>The&nbsp;<a class="reference-link" href="Global%20menu.html">Global menu</a>&nbsp;can
be accessed via the
<img src="1_Vertical and horizontal la.png" width="15"
height="11">button at the end of the&nbsp;<a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.</li>
</ul>
<figure class="image">
<img style="aspect-ratio:1043/684;" src="3_Vertical and horizontal la.png"
width="1043" height="684">
</figure>
<h2>Changing the layout</h2>
<p>Go to&nbsp;<a class="reference-link" href="#root/_hidden/_lbRoot/_lbVisibleLaunchers/_lbSettings">Settings</a>&nbsp;and
look for the <i>Appearance</i> option on the left. Then look for the <i>Layout </i>section,
where there is the possibility to switch between the two available layouts.</p>
<p>Selecting an option will immediately apply the new layout by reloading
the window.</p>
</div>
</div>
</body>
</html>

9
src/public/app/doc_notes/en/User Guide/navigation.html generated
View File

@ -84,6 +84,9 @@
<ul> <ul>
<li>UI Elements <li>UI Elements
<ul> <ul>
<li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Vertical%20and%20horizontal%20layout.html"
target="detail">Vertical and horizontal layout</a>
</li>
<li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Global%20menu.html" <li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Global%20menu.html"
target="detail">Global menu</a> target="detail">Global menu</a>
</li> </li>
@ -94,6 +97,12 @@
<li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Note%20Tree.html" <li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Note%20Tree.html"
target="detail">Note Tree</a> target="detail">Note Tree</a>
</li> </li>
<li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Launcher%20Bar.html"
target="detail">Launcher Bar</a>
</li>
<li><a href="User%20Guide/Basic%20Concepts/UI%20Elements/Quick%20search.html"
target="detail">Quick search</a>
</li>
</ul> </ul>
</li> </li>
<li><a href="User%20Guide/Basic%20Concepts/Note.html" target="detail">Note</a> <li><a href="User%20Guide/Basic%20Concepts/Note.html" target="detail">Note</a>