Interface QuantityInputProps

Accepted values for sizing elements.

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

We discourage developers from using these tags. If possible, use flexbox for layout design. However, you are not prohibited from using them.

See below for an example using some of the properties:

Example:

<View
   width={200}
   height={100}
>
 <Text color="neutral-900">My awesome text</Text>
</View>

Hierarchy

Properties

bottom? display? height? id? left? max? maxHeight? maxWidth? minHeight? minWidth? onChange opacity? position? right? top? transform? transition? value? visibility? visualState? width? 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 height

height?: string | number

Adjust component height

Example:

   <height={100} />

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 max

max?: number

The limit of the quantity. Example:

<QuantityInput max={10}/>

Optional maxHeight

maxHeight?: string | number

Adjust component maximum height

Example:

   <maxHeight={100} />

Optional maxWidth

maxWidth?: string | number

Adjust component maximum width

Example:

   <maxwidth={100} />

Optional minHeight

minHeight?: string | number

Adjust component minimum height

Example:

   <minHeight={100} />

Optional minWidth

minWidth?: string | number

Adjust component minimum width

Example:

   <minWidth={100} />

onChange

onChange: ((e) => void)

Type declaration

    • (e): void

    • Function called when the quantity is changed. Example:

      <QuantityInput onChange={this.myFunction}/>

      Parameters

      • e: any

        the quantity.

      Returns void

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 value

value?: number

The quantity that is initiated If the value is greater than the maximum, it will become 1 Example:

<QuantityInput value={2}/>

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 width

width?: string | number

Adjust component width

Example:

   <width={100} />

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