Group

Align elements horizontally.

Example

Preact

<Group>
  <Button icon={<Icon icon="back" />} />
  <Button icon={<Icon icon="next" />} />
</Group>

Custom Element

<phi-group>
  <phi-button>
    <span slot="icon">
      <phi-icon icon="back" />
    </span>
  </phi-button>
  <phi-button>
    <span slot="icon">
      <phi-icon icon="next" />
    </span>
  </phi-button>
</phi-group>

Pure-CSS

<div class="phi-group left md">
  <button class="phi-button default">
    <span class="icon">＜</span>
  </button>
  <button class="phi-button default">
    <span class="icon">＞</span>
  </button>
</div>

flex-grow

You may put style="flex-grow: 1" to some children to control widths.

Cancel Complete

<Group>
  <Button icon={<Icon icon="back" />}>
    Cancel
  </Button>
  <Button icon={<Icon icon="okay" />} style="flex-grow: 1">
    Complete
  </Button>
</Group>

Alignment variants

left variant (default)

center variant

１２３

right variant

Cancel Send

space-between variant

Back Next

Gap variants

md variant (default)

Suitable to align normal elements.

sm variant (default)

Suitable to align options, tags, etc.

FooBarBaz

Reference

Preact

Properties

Property	Type	Default	Description
gap	'md'|'sm'	'md'	Switch gap variants
align	'left'|'center'|'right'	'left'	Switch alignment variants
children	ComponentChildren	empty	Child elements

Custom Element

Props / Attrs

Slot	Category	Type	Default
gap	Prop/Attr	'md'|'sm'	'md'
align	Prop/Attr	'left'|'center'|'right'	'left'

Pure-CSS

Classes

Class
phi-group	Core styles
left, center, right, space-between	Alignment variants
md, sm	Gap variants