-
-
Notifications
You must be signed in to change notification settings - Fork 521
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added documentation guide for Grid Widget (#1043)
- Loading branch information
1 parent
2a493cf
commit a755cc5
Showing
2 changed files
with
100 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
``` |