Add layout documentation

spectreconsole · Jan 9, 2023 · eba2a8c · eba2a8c
1 parent bc6ba26
commit eba2a8c
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 0 deletions.
diff --git a/docs/input/assets/casts/layout-plain.cast b/docs/input/assets/casts/layout-plain.cast
@@ -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"]
+
diff --git a/docs/input/assets/casts/layout-rich.cast b/docs/input/assets/casts/layout-rich.cast
@@ -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"]
+
diff --git a/docs/input/widgets/layout.md b/docs/input/widgets/layout.md
@@ -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();
+```
diff --git a/resources/scripts/Generator/Commands/AsciiCast/Samples/LayoutSample.cs b/resources/scripts/Generator/Commands/AsciiCast/Samples/LayoutSample.cs
@@ -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);
+        }
+    }
+}