mirror of
https://github.com/typst/typst
synced 2025-05-14 04:56:26 +08:00
134 lines
2.6 KiB
Typst
134 lines
2.6 KiB
Typst
// Test basic styling using the grid.cell element.
|
|
|
|
--- grid-cell-override ---
|
|
// Cell override
|
|
#grid(
|
|
align: left,
|
|
fill: red,
|
|
stroke: blue,
|
|
inset: 5pt,
|
|
columns: 2,
|
|
[AAAAA], [BBBBB],
|
|
[A], [B],
|
|
grid.cell(align: right)[C], [D],
|
|
align(right)[E], [F],
|
|
align(horizon)[G], [A\ A\ A],
|
|
grid.cell(align: horizon)[G2], [A\ A\ A],
|
|
grid.cell(inset: 0pt)[I], [F],
|
|
[H], grid.cell(fill: blue)[J]
|
|
)
|
|
|
|
--- grid-cell-show ---
|
|
// Cell show rule
|
|
#show grid.cell: it => [Zz]
|
|
|
|
#grid(
|
|
align: left,
|
|
fill: red,
|
|
stroke: blue,
|
|
inset: 5pt,
|
|
columns: 2,
|
|
[AAAAA], [BBBBB],
|
|
[A], [B],
|
|
grid.cell(align: right)[C], [D],
|
|
align(right)[E], [F],
|
|
align(horizon)[G], [A\ A\ A]
|
|
)
|
|
|
|
--- grid-cell-show-and-override ---
|
|
#show grid.cell: it => (it.align, it.fill)
|
|
#grid(
|
|
align: left,
|
|
row-gutter: 5pt,
|
|
[A],
|
|
grid.cell(align: right)[B],
|
|
grid.cell(fill: aqua)[B],
|
|
)
|
|
|
|
--- grid-cell-set ---
|
|
// Cell set rules
|
|
#set grid.cell(align: center)
|
|
#show grid.cell: it => (it.align, it.fill, it.inset)
|
|
#set grid.cell(inset: 20pt)
|
|
#grid(
|
|
align: left,
|
|
row-gutter: 5pt,
|
|
[A],
|
|
grid.cell(align: right)[B],
|
|
grid.cell(fill: aqua)[B],
|
|
)
|
|
|
|
--- grid-cell-folding ---
|
|
// Test folding per-cell properties (align and inset)
|
|
#grid(
|
|
columns: (1fr, 1fr),
|
|
rows: (2.5em, auto),
|
|
align: right,
|
|
inset: 5pt,
|
|
fill: (x, y) => (green, aqua).at(calc.rem(x + y, 2)),
|
|
[Top], grid.cell(align: bottom)[Bot],
|
|
grid.cell(inset: (bottom: 0pt))[Bot], grid.cell(inset: (bottom: 0pt))[Bot]
|
|
)
|
|
|
|
--- grid-cell-align-override ---
|
|
// Test overriding outside alignment
|
|
#set align(bottom + right)
|
|
#grid(
|
|
columns: (1fr, 1fr),
|
|
rows: 2em,
|
|
align: auto,
|
|
fill: green,
|
|
[BR], [BR],
|
|
grid.cell(align: left, fill: aqua)[BL], grid.cell(align: top, fill: red.lighten(50%))[TR]
|
|
)
|
|
|
|
--- grid-cell-various-overrides ---
|
|
#grid(
|
|
columns: 2,
|
|
fill: red,
|
|
align: left,
|
|
inset: 5pt,
|
|
[ABC], [ABC],
|
|
grid.cell(fill: blue)[C], [D],
|
|
grid.cell(align: center)[E], [F],
|
|
[G], grid.cell(inset: 0pt)[H]
|
|
)
|
|
|
|
--- grid-cell-show-emph ---
|
|
#{
|
|
show grid.cell: emph
|
|
grid(
|
|
columns: 2,
|
|
gutter: 3pt,
|
|
[Hello], [World],
|
|
[Sweet], [Italics]
|
|
)
|
|
}
|
|
|
|
--- grid-cell-show-based-on-position ---
|
|
// Style based on position
|
|
#{
|
|
show grid.cell: it => {
|
|
if it.y == 0 {
|
|
strong(it)
|
|
} else if it.x == 1 {
|
|
emph(it)
|
|
} else {
|
|
it
|
|
}
|
|
}
|
|
grid(
|
|
columns: 3,
|
|
gutter: 3pt,
|
|
[Name], [Age], [Info],
|
|
[John], [52], [Nice],
|
|
[Mary], [50], [Cool],
|
|
[Jake], [49], [Epic]
|
|
)
|
|
}
|
|
|
|
--- table-cell-in-grid ---
|
|
// Error: 7-19 cannot use `table.cell` as a grid cell
|
|
// Hint: 7-19 use `grid.cell` instead
|
|
#grid(table.cell[])
|