Accepted values for Window properties

Note that some properties are inherited from other sets.

Hierarchy

Properties

backgroundColor?: string

Background color of component

Check the token table to know which values to use

Example:

   <backgroundColor="background-color" />
borderColor?: string

Border Color of component

Check the token table to know which values to use

Example:

   <borderColor="neutral-900" />
bottomInset?: boolean

When activated, it controls the bottom spacing to prevent content from being covered by the gesture bar on mobile devices.

Example:

 <Window bottomInset={true}>
color?: string

Text color of components

Check the token table to know which values to use

Example:

   <color="neutral-900" />
contentColor?: boolean

"Use contrast colors for text and background"

Example:

 <View contentColors backgroundColor="primary-500" />
display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

Changes the element exhibition

Example:

<display="flex"/>
height?: string | number

Adjust component height

Example:

   <height={100} />
id?: string

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

Example:

 <View id="id" />
maxHeight?: string | number

Adjust component maximum height

Example:

   <maxHeight={100} />
maxWidth?: string | number

Adjust component maximum width

Example:

   <maxwidth={100} />
minHeight?: string | number

Adjust component minimum height

Example:

   <minHeight={100} />
minWidth?: string | number

Adjust component minimum width

Example:

   <minWidth={100} />
opacity?: "none" | "solid" | "light" | "half" | "heavy" | "transparent"

Changes the element opacity

Example:

<opacity="light" />
sendFocusToInput?: boolean

This option should be used when there is a form component; when you touch the element, it triggers focus on the contained form component.

Example:

<Window sendFocusToInput>
<Text>Acima de um input</Text>
<Input />
</Window>
statusBarTextColor?: "white" | "black"

Determina a cor dos ícones da StatusBar do aparelho.

Use: white para branco ou black para preto. Example:

 <Window statusBarTextColor="white">
title?: string

Sets the page title; this feature is intended to be used when building web applications with Eitri.

topInset?: boolean

When activated, it controls the top spacing to prevent content from being covered by the gesture bar on mobile devices.

Example:

 <Window topInset={true}>
transform?: string

"Prepare a position transforming of element"

Example:

 <View transform="rotate(45deg)" />
transition?: string

"Prepare a transition of visual state change"

Example:

 <View transition="background-color 0.5s ease-in-out" />
viewportColor?: "none" | "neutral-700" | "neutral-300" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-500" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Determina a cor da viewport onde a aplicação irá rodar Example:

 <Window viewportColor="primary-100">
visibility?: "hidden" | "visible" | "collapse"

Changes the element visibility

Example:

<visibility="visible" />
visualState?: "success" | "danger" | "warning"

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

Example:

 <View visualState="success" />
width?: string | number

Adjust component width

Example:

   <width={100} />