MainContent

Przewijana główna kolumna, cel linku pomijającego. Wybierz szerokość wide dla tablic i tabel, full dla edytorów.

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Paragraph 1. The column scrolls on its own while the bars stay put.

Paragraph 2. The column scrolls on its own while the bars stay put.

Paragraph 3. The column scrolls on its own while the bars stay put.

Paragraph 4. The column scrolls on its own while the bars stay put.

Paragraph 5. The column scrolls on its own while the bars stay put.

Paragraph 6. The column scrolls on its own while the bars stay put.

Paragraph 1. The column scrolls on its own while the bars stay put.

Paragraph 2. The column scrolls on its own while the bars stay put.

Paragraph 3. The column scrolls on its own while the bars stay put.

Paragraph 4. The column scrolls on its own while the bars stay put.

Paragraph 5. The column scrolls on its own while the bars stay put.

Paragraph 6. The column scrolls on its own while the bars stay put.

Paragraph 1. The column scrolls on its own while the bars stay put.

Paragraph 2. The column scrolls on its own while the bars stay put.

Paragraph 3. The column scrolls on its own while the bars stay put.

Paragraph 4. The column scrolls on its own while the bars stay put.

Paragraph 5. The column scrolls on its own while the bars stay put.

Paragraph 6. The column scrolls on its own while the bars stay put.

tsx

import { MainContent } from '@skribly/ui/shell'

tsx

<MainContent width="wide">
  <PageHeader title="Board" />
  …
</MainContent>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

Landmark main z tabindex -1, aby link pomijający mógł przenieść do niego fokus, i przystanek Tab, gdy jego zawartość się przepełnia, aby klawiatura mogła przewijać tekst, w którym nic nie ma fokusa; jego obwódka pokazuje się tylko przy fokusie z klawiatury.
Wypełnienie rośnie wraz z układem, a rynna paska przewijania jest stała, więc treść nie skacze.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.