Added documentation guide for Grid Widget (#1043)

This commit is contained in:
Elisha Aguilera 2022-11-02 04:59:41 -07:00 committed by GitHub
parent 2a493cfee9
commit a755cc5d9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 0 deletions

View File

@ -0,0 +1,2 @@
{"version": 2, "width": 40, "height": 3, "timestamp": 1667342769, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.0, "o", "\u001b[38;5;9;48;5;0mHeader 1\u001b[0m \u001b[38;5;2;48;5;0mHeader 2\u001b[0m \u001b[38;5;12;48;5;0mHeader 3\u001b[0m\r\nRow 1 Row 2 Row 3\r\n"]

View File

@ -0,0 +1,98 @@
Title: Grid
Order: 45
Description: "Use **Grid** to render items in a grid pattern."
Highlights:
- Custom colors
- Labels
- Use your own data with a converter.
Reference: T:Spectre.Console.Grid
---
Use `Grid` to render items in a grid pattern.
<?# AsciiCast cast="grid" /?>
## Usage
### Basic usage
```csharp
var grid = new Grid();
// Add columns
grid.AddColumn();
grid.AddColumn();
grid.AddColumn();
// Add header row
grid.AddRow(new string[]{"Header 1", "Header 2", "Header 3"});
grid.AddRow(new string[]{"Row 1", "Row 2", "Row 3"});
// Write to Console
AnsiConsole.Write(grid);
```
### Align and style items within cells
```csharp
var grid = new Grid();
// Add columns
grid.AddColumn();
grid.AddColumn();
grid.AddColumn();
// Add header row
grid.AddRow(new Text[]{
new Text("Header 1", new Style(Color.Red, Color.Black)).LeftAligned(),
new Text("Header 2", new Style(Color.Green, Color.Black)).Centered(),
new Text("Header 3", new Style(Color.Blue, Color.Black)).RightAligned()
});
// Add content row
grid.AddRow(new Text[]{
new Text("Row 1").LeftAligned(),
new Text("Row 2").Centered(),
new Text("Row 3").RightAligned()
});
// Write centered cell grid contents to Console
AnsiConsole.Write(grid);
```
### Embed a grid within a grid
```csharp
var grid = new Grid();
// Add columns
grid.AddColumn();
grid.AddColumn();
grid.AddColumn();
// Add header row
grid.AddRow(new Text[]{
new Text("Header 1", new Style(Color.Red, Color.Black)).LeftAligned(),
new Text("Header 2", new Style(Color.Green, Color.Black)).Centered(),
new Text("Header 3", new Style(Color.Blue, Color.Black)).RightAligned()
});
var embedded = new Grid();
embedded.AddColumn();
embedded.AddColumn();
embedded.AddRow(new Text("Embedded I"), new Text("Embedded II"));
embedded.AddRow(new Text("Embedded III"), new Text("Embedded IV"));
// Add content row
grid.AddRow(
new Text("Row 1").LeftAligned(),
new Text("Row 2").Centered(),
embedded
);
// Write centered cell grid contents to Console
AnsiConsole.Write(grid);
```