Media
Files and images: the library grid and its tiles, uploads, a picker dialog, an ordered image field for forms, crop and focal point, and the fields of an image preset. Built to WCAG 2.2 AA as a target: every tile, frame and marker has a keyboard and screen reader path, states are said in words with a glyph, and every layout reflows from 320px.
8 pages, 8 exports
- MediaGrid
- MediaTile
- ImagePlaceholder
- UploadDropzone
- MediaPicker
- ImageField
- ImageEditor
- PresetFields
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { MediaGrid, MediaTile, ImagePlaceholder, UploadDropzone, … } from '@skribly/ui/media'Pages in this groupLink to the section Pages in this group
- MediaGridThe files of a folder as tiles or as a list, with selection for bulk actions, an action per file, drag to reorder and files dropped from the desktop. Pick it for any library view; use MediaTile alone for one file outside a list.MediaGrid
- MediaTileOne file: a thumbnail or the glyph of its kind, the name, the size and a notice. Use it alone in a sidebar or a detail view; MediaGrid uses it for every tile.MediaTile
- ImagePlaceholderThe box that stands in for a missing, loading or broken image, and for files with no picture. Pick it wherever an image may be absent, so the layout never jumps.ImagePlaceholder
- UploadDropzoneWhere files are added: a picker button, a drop area and the list of running uploads with progress and status. Use it on library pages; FileInput in forms keeps files with the form instead.UploadDropzone
- MediaPickerA dialog for choosing one or more files from the library, with search, folders and upload. Use it behind an ImageField or any "choose an image" button.MediaPicker
- ImageFieldA form field holding images from the library in order, such as a cover or a gallery. Pick it whenever a form saves image references; pair it with MediaPicker to add.ImageField
- ImageEditorCrop and focal point for one image, with optional rotate and flip. Use it in a dialog or a side panel when an image has to fit fixed shapes; the app does the actual image work through the callbacks.ImageEditor
- PresetFieldsThe fields of one image preset: name, size, fit, format, quality, weight limit and rules. Use it in the form that creates or edits a preset.PresetFields