NameValueList

a name-value list displays a group of name-value pairs

Using Grommet for HPE?See NameValueList examples and guidance.

The NameValueList component can be customized with any of the properties available in Grid.

Props

align

How to align the contents along the cross axis. Any 'align-items' valid CSS value is accepted, including composed ones such 'first baseline' and 'unsafe start'.

string

"start"

"center"

"end"

"baseline"

"stretch

layout

The orientation to layout the NameValuePairs.

string

"column"

"grid"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

nameProps

The alignment and width of the name.

object

{ width: "xsmall", align: "end" }

pairProps

The orienation to layout the name and value.

object

{ direction: "column" }

{ direction: "column-reverse" }

{ direction: "row" }

valueProps

The alignment and width of the value.

object

{ width: "large", align: "end" }

React/DOM Properties

At its core, the NameValueList component is a regular <dl> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for dl elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

nameValueList.gap

The gap to apply when pairProps.direction = row (default). If an object is provided, "column" affects the gap size between the name and value and "row" affects the gap size between NameValuePairs. If a string is provided, a uniform gap will be applied to both.

object

{ column: 'large', row: 'small' }

string

"small"

nameValueList.pair.column.gap

The gap to apply when pairProps.direction = column. If an object is provided, "column" affects the gap size between columns of NameValuePairs (applicable when layout = grid) and "row" affects the gap size between rows of NameValuePairs. If a string is provided, a uniform gap will be applied to both.

object

{ column: 'large', row: 'medium' }

string

"small"

NameValuePair

one pair within the namevaluelist

Props

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string

"start"

"center"

"end"

"stretch"

"baseline"

children

The value of the NameValuePair.

node

<Anchor>jane.doe@email.com</Anchor>

number

string

"Grommet helps you build responsive and accessible mobile-first projects."

name

The name for the NameValuePair.

string

"Created on"

node

<Text size="small">Description</Text>

React/DOM Properties

At its core, the NameValuePair component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

nameValueList.name.width

The width of the name.

string

"small"

nameValuePair.name

Any valid Text Props for the name.

object

{ weight: 'bold' }

nameValueList.value.width

The width of the value.

string

"medium"

nameValuePair.value

Any valid Text Props for the value.

object

{ color: 'text-strong' }