mirror of
				https://github.com/nsnail/spectre.console.git
				synced 2025-10-31 09:09:25 +08:00 
			
		
		
		
	Add layout documentation
This commit is contained in:
		 Patrik Svensson
					Patrik Svensson
				
			
				
					committed by
					
						 Patrik Svensson
						Patrik Svensson
					
				
			
			
				
	
			
			
			 Patrik Svensson
						Patrik Svensson
					
				
			
						parent
						
							bc6ba26840
						
					
				
				
					commit
					eba2a8cc76
				
			
							
								
								
									
										3
									
								
								docs/input/assets/casts/layout-plain.cast
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								docs/input/assets/casts/layout-plain.cast
									
									
									
									
									
										Normal 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"] | ||||
|  | ||||
							
								
								
									
										3
									
								
								docs/input/assets/casts/layout-rich.cast
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								docs/input/assets/casts/layout-rich.cast
									
									
									
									
									
										Normal 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"] | ||||
|  | ||||
							
								
								
									
										64
									
								
								docs/input/widgets/layout.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										64
									
								
								docs/input/widgets/layout.md
									
									
									
									
									
										Normal 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(); | ||||
| ``` | ||||
| @@ -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); | ||||
|         } | ||||
|     } | ||||
| } | ||||
		Reference in New Issue
	
	Block a user