Media
Pliki i obrazy: siatka biblioteki i jej kafelki, przesyłanie, okno wyboru, uporządkowane pole obrazów do formularzy, kadrowanie i punkt ostrości oraz pola presetu obrazu. Budowane z celem WCAG 2.2 AA: każdy kafelek, ramka i znacznik ma ścieżkę dla klawiatury i czytnika ekranu, stany są wypowiedziane słowami ze znakiem, a każdy układ działa od 320 px.
Strony: 8, eksporty: 8
- MediaGrid
- MediaTile
- ImagePlaceholder
- UploadDropzone
- MediaPicker
- ImageField
- ImageEditor
- PresetFields
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { MediaGrid, MediaTile, ImagePlaceholder, UploadDropzone, … } from '@skribly/ui/media'Strony tej grupyLink do sekcji Strony tej grupy
- MediaGridPliki folderu jako kafelki albo lista, z zaznaczaniem do akcji zbiorczych, akcją na plik, przeciąganiem do zmiany kolejności i plikami upuszczanymi z pulpitu. Wybierz go dla każdego widoku biblioteki; do jednego pliku poza listą użyj samego MediaTile.MediaGrid
- MediaTileJeden plik: miniatura albo znak jego rodzaju, nazwa, rozmiar i uwaga. Użyj go osobno w panelu bocznym albo widoku szczegółów; MediaGrid używa go dla każdego kafelka.MediaTile
- ImagePlaceholderPole, które zastępuje brakujący, ładujący się albo uszkodzony obraz oraz pliki bez obrazu. Wybierz je wszędzie tam, gdzie obrazu może nie być, aby układ nigdy nie skakał.ImagePlaceholder
- UploadDropzoneMiejsce dodawania plików: przycisk wyboru, obszar upuszczania i lista trwających przesyłań z postępem i statusem. Użyj go na stronach biblioteki; FileInput w formularzach zatrzymuje pliki razem z formularzem.UploadDropzone
- MediaPickerOkno wyboru jednego lub kilku plików z biblioteki, z wyszukiwaniem, folderami i przesyłaniem. Użyj go za ImageField albo dowolnym przyciskiem „wybierz obraz”.MediaPicker
- ImageFieldPole formularza przechowujące obrazy z biblioteki w kolejności, na przykład okładkę albo galerię. Wybierz je zawsze, gdy formularz zapisuje odwołania do obrazów; do dodawania połącz je z MediaPicker.ImageField
- ImageEditorKadrowanie i punkt ostrości dla jednego obrazu, z opcjonalnym obrotem i odbiciem. Użyj go w oknie dialogowym albo panelu bocznym, gdy obraz musi pasować do stałych kształtów; faktyczną pracę na obrazie wykonuje aplikacja przez wywołania zwrotne.ImageEditor
- PresetFieldsPola jednego presetu obrazu: nazwa, rozmiar, dopasowanie, format, jakość, limit wagi i reguły. Użyj ich w formularzu, który tworzy albo edytuje preset.PresetFields