Interface ListItemProps

Accepted values for enforcing element positioning.

Essentially, all the well-known HTML properties are available, but with predefined values.

See below for an example using some of the properties:

Exemplo básico:

<View
   position="fixed"
   top={0}
   left={0}
   right={0}

   backgroundColor="primary-300"
   borderColor="neutral-900"
   borderWidth="hairline"
>
 <Text color="neutral-900">My awesome text</Text>
</View>

Hierarchy

Properties

bottom? display? id? left? opacity? position? right? top? transform? transition? visibility? visualState? zIndex?

Properties

Optional bottom

bottom?: string | number

A distance from the bottom.

Example:

  <bottom={20} />

Optional display

display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

Changes the element exhibition

Example:

<display="flex"/>

Optional id

id?: string

"Fills the ID of the element (not very practical)."

Example:

 <View id="id" />

Optional left

left?: string | number

A distance from the left.

Example:

  <left={20} />

Optional opacity

opacity?: "none" | "solid" | "light" | "half" | "heavy" | "transparent"

Changes the element opacity

Example:

<opacity="light" />

Optional position

position?: "fixed" | "static" | "relative" | "absolute" | "sticky"

The element positioning.

Example:

  <position="relative" />

Optional right

right?: string | number

A distance from the right.

Example:

  <right={20} />

Optional top

top?: string | number

A distance from the top.

Example:

  <top={20} />

Optional transform

transform?: string

"Prepare a position transforming of element"

Example:

 <View transform="rotate(45deg)" />

Optional transition

transition?: string

"Prepare a transition of visual state change"

Example:

 <View transition="background-color 0.5s ease-in-out" />

Optional visibility

visibility?: "hidden" | "visible" | "collapse"

Changes the element visibility

Example:

<visibility="visible" />

Optional visualState

visualState?: "success" | "danger" | "warning"

"Determines the visual state of the component and its children."

Example:

 <View visualState="success" />

Optional zIndex

zIndex?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Value of z-index

Example:

  <zIndex={1} />

Settings

Member Visibility

Theme

On This Page