Skip to main content

InlineGroup

Import​

import { InlineGroup } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode

Description​

Sets the children.

gap​

Typenumber | string | arrayOf
Default'var(--size-spacing-02)'

Description​

Sets the gap.

If number, the values between 1 and 12 ​​represent, respectively, the 12 available CSS spacing tokens.

You can use all size-spacing values: https://tangram.rdstation.com.br/docs/foundations/spacing/

If string, the full value will be passed on as the CSS gap rule.

You can also pass an array with two values, the first for the horizontal spacing and the second for the vertical spacing.

// Can be a number:
<InlineGroup gap={3}>...</InlineGroup>

// Can be a string:
<InlineGroup gap="20px">...</InlineGroup>

// Can be an array :
<InlineGroup gap={[3, '40px']}>...</InlineGroup>

inline​

Typebool
Defaultfalse

Description​

Sets if the display property will be inline-flex.

lineBreak​

Typebool
Defaultfalse

Description​

Sets if the items will break into two or more lines, if they exceed the available width.

verticalAlign​

Type
Enum of:
  • InlineGroup.verticalAlignments.top
  • InlineGroup.verticalAlignments.center
  • InlineGroup.verticalAlignments.bottom
  • InlineGroup.verticalAlignments.baseline
  • InlineGroup.verticalAlignments.stretch
DefaultInlineGroup.verticalAlignments.top

Description​

Sets the vertical alignment.

horizontalAlign​

Type
Enum of:
  • InlineGroup.horizontalAlignments.left
  • InlineGroup.horizontalAlignments.center
  • InlineGroup.horizontalAlignments.right
DefaultInlineGroup.horizontalAlignments.left

Description​

Sets the horizontal alignment.

as​

Typenode
Default'div'

Description​

Sets the element type to be rendered for this component. By default, it will render a div element.

<InlineGroupItem />​

Import​

import { InlineGroupItem } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Sets the children.

fluid​

Typebool
Defaultfalse
Description​

Makes InlineGroupItem full available width.

verticalAlign​

Type
Enum of:
  • InlineGroupItem.verticalAlignments.top
  • InlineGroupItem.verticalAlignments.center
  • InlineGroupItem.verticalAlignments.bottom
  • InlineGroupItem.verticalAlignments.baseline
  • InlineGroupItem.verticalAlignments.stretch
Description​

Sets the vertical alignment.

as​

Typenode
Default'div'
Description​

Sets the element type to be rendered for this subcomponent. By default, it will render a div element.

Feedback​