Add layout documentation

This commit is contained in:
Patrik Svensson 2023-01-08 16:02:48 +01:00 committed by Patrik Svensson
parent bc6ba26840
commit eba2a8cc76
4 changed files with 100 additions and 0 deletions

View File

@ -0,0 +1,3 @@
{"version": 2, "width": 82, "height": 24, "title": "layout (plain)", "env": {"TERM": "Spectre.Console"}}
[0, "o", "\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250C\u2500Top (40 x 12)\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 Placeholder \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 Hello \u001B[34mWorld!\u001B[0m \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\u2502 \u2502\u250C\u2500Bottom (40 x 12)\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 Placeholder \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"]

View File

@ -0,0 +1,3 @@
{"version": 2, "width": 82, "height": 24, "title": "layout (rich)", "env": {"TERM": "Spectre.Console"}}
[0, "o", "\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u256D\u2500Top (40 x 12)\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 Placeholder \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 Hello \u001B[38;5;12mWorld!\u001B[0m \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F\r\n\u2502 \u2502\u256D\u2500Bottom (40 x 12)\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 Placeholder \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2502 \u2502\u2502 \u2502\r\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F"]

View File

@ -0,0 +1,64 @@
Title: Layout
Order: 45
Description: "Use **Layout** to layout widgets in the terminal."
Reference: T:Spectre.Console.Layout
---
Use `Layout` to layout widgets in the terminal.
<?# AsciiCast cast="layout" /?>
## Usage
```csharp
// Create the layout
var layout = new Layout("Root")
.SplitColumns(
new Layout("Left"),
new Layout("Right")
.SplitRows(
new Layout("Top"),
new Layout("Bottom")));
// Update the left column
layout["Left"].Update(
new Panel(
Align.Center(
new Markup("Hello [blue]World![/]"),
VerticalAlignment.Middle))
.Expand());
// Render the layout
AnsiConsole.Write(layout);
```
## Setting minimum size
```csharp
layout["Left"].MinimumSize(10);
```
## Setting ratio
```csharp
layout["Left"].Ratio(2);
```
## Settings explicit size
```csharp
layout["Left"].Size(32);
```
## Hide layout
```csharp
layout["Left"].Invisible();
```
## Show layout
```csharp
layout["Left"].Visible();
```

View File

@ -0,0 +1,30 @@
using Spectre.Console;
using Spectre.Console.Json;
namespace Generator.Commands.Samples
{
public class LayoutSample : BaseSample
{
public override (int Cols, int Rows) ConsoleSize => (80, 24);
public override void Run(IAnsiConsole console)
{
var layout = new Layout("Root")
.SplitColumns(
new Layout("Left"),
new Layout("Right")
.SplitRows(
new Layout("Top"),
new Layout("Bottom")));
layout["Left"].Update(
new Panel(
Align.Center(
new Markup("Hello [blue]World![/]"),
VerticalAlignment.Middle))
.Expand());
AnsiConsole.Write(layout);
}
}
}