Description list
DescriptionList component enables users to organize information and is commonly used to
display metadata in key-value pairs.Basic usage
tsxCopied1<DescriptionList2items={[3{ term: "Name", description: "Baosky" },4{ term: "Breed", description: "British Shorthair" },5{ term: "Age", description: "2 years 1 month" },6{ term: "Weight", description: "9 lbs" },7]}8/>
Task backed
DescriptionList can be backed by an Airplane task rather than setting the items prop. Set the
task prop to call an Airplane task. The items are automatically
inferred from the output of the Task.tsxCopied1<DescriptionList task="get_cat" />
- A list of objects, where each object has a
termanddescriptionproperty, e.g.[{term: "Name", description: "John Doe"}]. - An object where the keys are the
termand the values are thedescription, e.g.{Name: "John Doe"}.
Customizing data
DescriptionList, use outputTransform
to convert the output. This prop is a function that receives the task output and returns new items.tsxCopied1<DescriptionList2task="get_cat"3outputTransform={(o) => {4return {5...o,6Name: o.Name.toUpperCase(),7};8}}9/>
Component API
Alignment of the term and description.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
List of terms and descriptions.
Renders a loading state when true.
Callback to transform the task output before it populates the description list items.
The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.
If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task") or an AirplaneFunc—the return value of airplane.task() (task={myTask}).
If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug prop to pass the task configuration as a SlugQuery. If you are using an AirplaneFunc, specify the fn prop to pass the task configuration as a FunctionQuery.