SourcePicker
SourcePicker is the frame of a dialog that adds something from one of several places: the places on the left, the detail of the current one on the right.
When to use
Use it when something can come from more than one place, such as the files of the device, a library shared with the team or a link. The application passes the places, keeps the current one (onpick asks for another) and draws the detail of each place with the detail snippet, which receives the place. The action that adds what was chosen goes in primary. When files of the device are the only place, use a FileInput.
Props
| Prop | Default | Description |
|---|---|---|
open | false | Whether the dialog is open (bindable) |
title | required | The title in the head, and the name of the places |
sources | required | The places, PickerSource[] |
current | The id of the current place | |
onpick | Called with the id of the place that is pressed | |
detail | required | The detail of the current place (a snippet) |
primary | The action that adds what was chosen (a snippet) | |
onclose | Called once when the dialog closes | |
inline | false | The same surface in the flow of a page |
A PickerSource is { id, label, description?, icon? }.
Contract
A Modal of the widest size (xl) whose body reaches its edges. A Split holds the places, a List in a navigation landmark, on the left, and the detail in a Block on the right. Each place is a pressable ListItem with its icon, its name and its description; the current one is selected. Below 48rem the modal fills the screen and the places become Tabs above the detail. The Footer holds a close button and primary.