BrowserBar and DeviceFrame

Podgląd strony: wstecz, dalej, odśwież albo zatrzymaj, adres i rozmiar podglądu, nad ramką symulującą szerokość ekranu. Wybierz go do podglądu strony podczas pracy nad nią; w aplikacji ramka zawiera iframe.

BrowserBar
DeviceFrame

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: BrowserBar and DeviceFrame

Tablet, 820 px

localhost:5173/settings

Settings

A stand-in for the previewed page. Type an address with “offline” in it and press Enter to see the error.

Noc, podgląd: BrowserBar and DeviceFrame

Tablet, 820 px

localhost:5173/settings

Settings

A stand-in for the previewed page. Type an address with “offline” in it and press Enter to see the error.

Wysoki kontrast, podgląd: BrowserBar and DeviceFrame

Tablet, 820 px

localhost:5173/settings

Settings

A stand-in for the previewed page. Type an address with “offline” in it and press Enter to see the error.

UżycieLink do sekcji Użycie

tsx

import { BrowserBar, DeviceFrame } from '@skribly/ui/code'

tsx

<BrowserBar label={t('preview.controls')} addressLabel={t('preview.address')}
  address={address} onAddressChange={setAddress} onNavigate={go}
  backLabel={t('nav.back')} forwardLabel={t('nav.forward')} reloadLabel={t('nav.reload')}
  onBack={back} onReload={reload} canGoBack={canGoBack} isLoading={loading} loadingLabel={t('preview.loading')}
  devices={devices} device={device} onDeviceChange={setDevice} deviceLabel={t('preview.size')} />
<DeviceFrame label={t('preview.page')} width={820} caption="Tablet · 820 px" isLoading={loading}
  loadingLabel={t('preview.loading')}>
  <iframe title={t('preview.page')} src={url} />
</DeviceFrame>

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

DostępnośćLink do sekcji Dostępność

Pasek jest nazwaną grupą przycisków z nazwami i dymkami podpowiedzi, formularz adresu (Enter przechodzi, fokus zaznacza tekst) i grupa przycisków opcji z rozmiarami, których nazwy są odczytywane i pokazane słowami na szerokich paskach.
Wstecz i dalej wyłączają się, gdy nie ma dokąd iść.
Ramka jest nazwanym regionem; ładowanie pokazuje nazwany wskaźnik, a błąd zastępuje stronę jako komunikat typu assertive z ikoną i słowem.
Ramka nigdy nie wychodzi poza swoje pole, a zmiana jej szerokości zatrzymuje się przy ograniczonym ruchu.

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