Deepyr Documentation

Join

Group multiple `deepyr` components together. The `Join` container automatically applies the `join-item` class to its direct children.

Join([
  Button([text('Button')]),
  Button([text('Button')]),
  Button([text('Button')]),
])

Group items vertically

Join(
  [
    Button([text('Button')]),
    Button([text('Button')]),
    Button([text('Button')]),
  ],
  style: [Join.vertical],
)

Responsive: vertical on small screen, horizontal on large screen

Join(
  [
    Button([text('Button')]),
    Button([text('Button')]),
    Button([text('Button')]),
  ],
  style: [Join.vertical, Join.horizontal.at(Breakpoint.lg)],
)

With extra elements in the group

Demonstrates composing `Input`, `Select`, and `Button` with an `Indicator`.

new

Join([
  Input(
    placeholder: 'Search',
    style: [Size.w(21.2), Size.w(52).at(Breakpoint.md)],
  ),
  Select(
    style: [Size.w(23.2), Size.wAuto.at(Breakpoint.md)],
    [
      option([text('Filter')], disabled: true, selected: true),
      option([text('Sci-fi')]),
      option([text('Drama')]),
      option([text('Action')]),
    ],
  ),
  Indicator(
    [
      IndicatorItem([
        Badge([text('new')], style: [Badge.secondary]),
      ]),
      Button([text('Search')]),
    ],
  ),
])

Custom border radius

Join([
  Input(
    placeholder: 'Email',
    style: [Size.w(36), Size.w(52).at(Breakpoint.lg)],
  ),
  Button(
    [text('Subscribe')],
    // 'rounded-r-full' will be available in a future Effects update.
    classes: 'rounded-r-full',
  ),
])

Join radio inputs with btn style

This uses primitive `input()` components. Since they don't extend `UiComponent`, the `join-item` class must be added manually via `classes`.

// The "smart" Join component only works on `UiComponent` children.
// For primitive components like `input()`, add `join-item` manually.
Join([
  input(
    type: InputType.radio,
    name: 'options',
    classes: 'join-item btn',
    attributes: {'aria-label': 'Radio 1'},
  ),
  input(
    type: InputType.radio,
    name: 'options',
    classes: 'join-item btn',
    attributes: {'aria-label': 'Radio 2', 'checked': ''},
  ),
  input(
    type: InputType.radio,
    name: 'options',
    classes: 'join-item btn',
    attributes: {'aria-label': 'Radio 3'},
  ),
])