Skip to content

Commit

Permalink
Added documentation guide for Grid Widget (#1043)
Browse files Browse the repository at this point in the history
  • Loading branch information
Elisha-Aguilera authored Nov 2, 2022
1 parent 2a493cf commit a755cc5
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/input/assets/casts/grid-rich.cast
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"]
98 changes: 98 additions & 0 deletions docs/input/widgets/grid.md
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);
```

0 comments on commit a755cc5

Please sign in to comment.