new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

data-list

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

DataList component purpose

The DataList component displays metadata as a list of key-value pairs. It is based on the `dl` element and supports common margin props.

DataList.Root structure and purpose

DataList.Root contains all the parts of the data list. It supports the `orientation` prop to control layout direction (vertical or horizontal), the `size` prop to control sizing (values 1, 2, 3), and common margin props.

DataList.Item structure and purpose

DataList.Item wraps a key-value pair. It supports an `align` prop (e.g., 'center') to vertically align its contents.

DataList.Label structure and styling

DataList.Label contains the key of the key-value pair. It supports the `minWidth` prop to set minimum width (e.g., '88px'), the `color` prop to assign a specific color value, and the `highContrast` prop to increase color contrast with the background.

DataList.Value structure and purpose

DataList.Value contains the value of the key-value pair. It can wrap other components such as Badge, Link, Code, IconButton, and Flex.

DataList orientation prop usage

The `orientation` prop on DataList.Root can be set to 'vertical' or 'horizontal' and supports responsive breakpoints. For example, `orientation={{ initial: 'vertical', sm: 'horizontal' }}` changes the layout from vertical on small screens to horizontal on screens at the 'sm' breakpoint and above.

DataList size prop values

The `size` prop on DataList.Root accepts values 1, 2, and 3 to control the size of the data list.

DataList Label color options

The DataList.Label component supports color assignments including 'indigo', 'cyan', 'orange', and 'crimson'. Colors follow the theme's color system.

DataList basic example

A DataList displays metadata as key-value pairs. Example: `<DataList.Root><DataList.Item><DataList.Label minWidth="88px">Status</DataList.Label><DataList.Value><Badge color="jade" variant="soft" radius="full">Authorized</Badge></DataList.Value></DataList.Item></DataList.Root>` shows a data list item with a status label and badge value.

Radix Themes 3.1.2 DataList overflow-wrap

Radix Themes version 3.1.2 added `overflow-wrap: anywhere` style to the DataList component so that long values such as IDs can break over to the next line.

Radix Themes 3.0.0 new components: DataList

Radix Themes 3.0.0 added a new DataList component for displaying text data as key-value pairs. It has the following parts: Root, Item, Label, Value.

Give your agent this brain