Skip to content

Commit 1289371

Browse files
ok7saithePunderWoman
ok7sai
authored and
thePunderWoman
committed
docs: aria grid replace overview example with a playful one
1 parent 56b40d8 commit 1289371

9 files changed

Lines changed: 218 additions & 4 deletions

File tree

‎adev/src/content/examples/aria/grid/src/calendar/basic/app/app.component.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ button:focus {
5959
}
6060

6161
[ngGrid] {
62+
display: table;
6263
border-spacing: 0;
6364
}
6465

‎adev/src/content/examples/aria/grid/src/calendar/material/app/app.component.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ button:focus {
6161
}
6262

6363
[ngGrid] {
64+
display: table;
6465
border-spacing: 0;
6566
}
6667

‎adev/src/content/examples/aria/grid/src/calendar/retro/app/app.component.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ button:focus {
8585
}
8686

8787
[ngGrid] {
88+
display: table;
8889
border-spacing: 0;
8990
}
9091

‎adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
2+
3+
:host {
4+
display: flex;
5+
justify-content: center;
6+
font-family: var(--inter-font);
7+
8+
--card-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);
9+
}
10+
11+
button {
12+
border: unset;
13+
padding: unset;
14+
color: unset;
15+
background: unset;
16+
outline: none;
17+
}
18+
19+
[ngGrid] {
20+
display: table;
21+
border-spacing: 0.75rem;
22+
}
23+
24+
[ngGridCell] {
25+
height: 4rem;
26+
width: 4rem;
27+
perspective: 1000px;
28+
}
29+
30+
.card {
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
width: 100%;
35+
height: 100%;
36+
position: relative;
37+
transform-style: preserve-3d;
38+
transition: transform 0.3s ease-in-out;
39+
cursor: pointer;
40+
border-radius: 0.5rem;
41+
border: 0.25rem solid #f0f0f0;
42+
box-shadow: var(--card-shadow);
43+
}
44+
45+
.card.flipped {
46+
transform: rotateY(180deg);
47+
cursor: default;
48+
}
49+
50+
.card:not(.flipped):hover,
51+
.card:not(.flipped):focus {
52+
transform: scale(1.05) translate(-2px, -2px);
53+
}
54+
55+
.card:hover,
56+
.card:focus {
57+
outline-offset: 2px;
58+
outline: 4px dashed color-mix(in srgb, var(--hot-pink) 90%, transparent);
59+
}
60+
61+
.card-face {
62+
position: absolute;
63+
width: 100%;
64+
height: 100%;
65+
backface-visibility: hidden;
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
font-size: 2rem;
70+
border-radius: 0.25rem;
71+
}
72+
73+
.card-front {
74+
background-image: var(--hot-pink-to-electric-violet-radial-gradient);
75+
color: rgba(0, 0, 0, 0.6);
76+
overflow: hidden;
77+
}
78+
79+
.card-back {
80+
background: #f0f0f0;
81+
transform: rotateY(180deg);
82+
}
83+
84+
.explode {
85+
animation: shake 0.25s 20 linear;
86+
}
87+
88+
@keyframes shake {
89+
0%,
90+
100% {
91+
transform: translate(0, 0) rotate(0deg);
92+
}
93+
20% {
94+
transform: translate(-3px, -1px) rotate(-1deg);
95+
}
96+
40% {
97+
transform: translate(3px, 1px) rotate(1deg);
98+
}
99+
60% {
100+
transform: translate(-3px, 1px) rotate(-1deg);
101+
}
102+
80% {
103+
transform: translate(3px, -1px) rotate(1deg);
104+
}
105+
}
106+
107+
.angular-logo {
108+
transform: rotate(-25deg) scale(1.1) translateY(5%);
109+
}
110+
111+
.shield-shape {
112+
d: path(
113+
'm 222.077 39.192 l -8.019 125.923 L 137.387 0 l 84.69 39.192 Z m -53.105 162.825 l -57.933 33.056 l -57.934 -33.056 l 11.783 -28.556 h 92.301 l 11.783 28.556 Z M 111.039 62.675 l 30.357 73.803 H 80.681 l 30.358 -73.803 Z M 7.937 165.115 L 0 39.192 L 84.69 0 L 7.937 165.115 Z'
114+
);
115+
fill: currentColor;
116+
}

‎adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<table ngGrid #grid="ngGrid">
2+
@for (row of gridData; track row) {
3+
<tr ngGridRow>
4+
@for (cell of row; track cell) {
5+
@let flipped = {value: false};
6+
<td ngGridCell [rowSpan]="cell.rowSpan" [colSpan]="cell.colSpan">
7+
<button
8+
ngGridCellWidget
9+
class="card"
10+
[class.flipped]="flipped.value"
11+
(click)="flipped.value = true"
12+
>
13+
<div class="card-face card-front">
14+
<svg viewBox="0 0 222 245" xmlns="http://www.w3.org/2000/svg" class="angular-logo">
15+
<path class="shield-shape" />
16+
</svg>
17+
</div>
18+
19+
<div class="card-face card-back">
20+
<div [class.explode]="flipped.value && cell.explode">{{ cell.emoji }}</div>
21+
</div>
22+
</button>
23+
</td>
24+
}
25+
</tr>
26+
}
27+
</table>

‎adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {Component} from '@angular/core';
2+
import {Grid, GridRow, GridCell, GridCellWidget} from '@angular/aria/grid';
3+
4+
interface Cell {
5+
rowSpan: number;
6+
colSpan: number;
7+
emoji: string;
8+
explode: boolean;
9+
}
10+
11+
const bomb = '💣';
12+
const emojis = ['🥳', '🤩', '🎉', '🚀', '🔥', '💯', '🦄', '🤯', '💖', '✨', bomb];
13+
14+
function randomSpan(): number {
15+
const spanChanceTable = [...Array(10).fill(1), ...Array(4).fill(2), ...Array(1).fill(3)];
16+
const randomIndex = Math.floor(Math.random() * spanChanceTable.length);
17+
return spanChanceTable[randomIndex];
18+
}
19+
20+
function generateValidGrid(rowCount: number, colCount: number): Cell[][] {
21+
const grid: Cell[][] = [];
22+
const visitedCoords = new Set<string>();
23+
for (let r = 0; r < rowCount; r++) {
24+
const row = [];
25+
for (let c = 0; c < colCount; c++) {
26+
if (visitedCoords.has(`${r},${c}`)) {
27+
continue;
28+
}
29+
30+
const rowSpan = Math.min(randomSpan(), rowCount - r);
31+
const maxColSpan = Math.min(randomSpan(), colCount - c);
32+
let colSpan = 1;
33+
while (colSpan < maxColSpan) {
34+
if (visitedCoords.has(`${r},${c + colSpan}`)) break;
35+
colSpan += 1;
36+
}
37+
38+
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
39+
40+
row.push({
41+
rowSpan,
42+
colSpan,
43+
emoji,
44+
explode: emoji === bomb,
45+
});
46+
47+
for (let rs = 0; rs < rowSpan; rs++) {
48+
for (let cs = 0; cs < colSpan; cs++) {
49+
visitedCoords.add(`${r + rs},${c + cs}`);
50+
}
51+
}
52+
}
53+
grid.push(row);
54+
}
55+
return grid;
56+
}
57+
58+
@Component({
59+
selector: 'app-root',
60+
templateUrl: 'app.component.html',
61+
styleUrl: 'app.component.css',
62+
imports: [Grid, GridRow, GridCell, GridCellWidget],
63+
})
64+
export class App {
65+
readonly gridData: Cell[][] = generateValidGrid(6, 6);
66+
}

‎adev/src/content/examples/aria/grid/src/table/basic/app/app.component.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ input[type='checkbox'] {
2626
}
2727

2828
[ngGrid] {
29+
display: table;
2930
background-color: var(--septenary-contrast);
3031
border-spacing: 0;
3132
}

‎adev/src/content/examples/aria/grid/src/table/retro/app/app.component.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ input[type='checkbox'] {
5151

5252
[ngGrid] {
5353
border-spacing: 0 0.5rem;
54+
display: table;
5455
}
5556

5657
[ngGrid] th,

‎adev/src/content/guide/aria/grid.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010

1111
A grid enables users to navigate two-dimensional data or interactive elements using directional arrow keys, Home, End, and Page Up/Down. Grids work for data tables, calendars, spreadsheets, and layout patterns that group related interactive elements.
1212

13-
<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/table/basic/app/app.component.ts">
14-
<docs-code header="TS" path="adev/src/content/examples/aria/grid/src/table/basic/app/app.component.ts"/>
15-
<docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/table/basic/app/app.component.html"/>
16-
<docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/table/basic/app/app.component.css"/>
13+
<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.ts">
14+
<docs-code header="TS" path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.ts"/>
15+
<docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.html"/>
16+
<docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.component.css"/>
1717
</docs-code-multifile>
1818

1919
## Usage

0 commit comments

Comments
 (0)