Deepyr Documentation

Status Indicator

Note: 'status' is a distinct DaisyUI component. A dedicated `Status` component will be created in deepyr. For now, we use a styled Container as a placeholder.

content

Indicator([
  // TODO: Replace with a dedicated Status() component when available.
  IndicatorItem([
    Container([], classes: 'status status-success')
  ]),
  Container(
    [text('content')],
    style: [
      Size.w(32),
      Size.h(32),
      Effects.rounded,
      BgUtil.base300,
      Layout.grid,
      Alignment.placeItemsCenter,
    ],
  ),
])

Badge as indicator

New

content

Indicator([
  IndicatorItem([
    Badge([text('New')], style: [Badge.primary]),
  ]),
  Container(
    [text('content')],
    style: [
      Size.w(32),
      Size.h(32),
      Effects.rounded,
      BgUtil.base300,
      Layout.grid,
      Alignment.placeItemsCenter,
    ],
  ),
])

For a button

12

Indicator([
  IndicatorItem([
    Badge([text('12')], style: [Badge.secondary]),
  ]),
  Button([text('inbox')]),
])

For a tab

8

Tabs(
  [
    Tab([text('Messages')]),
    Indicator([
      IndicatorItem([Badge([text('8')])]),
      Tab([text('Notifications')], isActive: true),
    ]),
    Tab([text('Requests')]),
  ],
  style: [Tabs.lift],
)

For an avatar

Justice

Indicator([
  IndicatorItem([
    Badge([text('Justice')], style: [Badge.secondary]),
  ]),
  Avatar([
    Container(
      [img(src: '/images/user1.webp')],
      style: [Size.w20, Size.h20, Effects.roundedLg],
    )
  ]),
])

For an input

Required

Indicator([
  IndicatorItem([Badge([text('Required')])]),
  Input(
    placeholder: 'Your email address',
    style: [Input.bordered],
  ),
])

A button as an indicator for a card

Job Title

Rerum reiciendis beatae tenetur excepturi

Indicator(
  [
    IndicatorItem(
      [Button([text('Apply')], style: [Button.primary])],
      style: [IndicatorItem.bottom],
    ),
    Card(
      [
        CardBody([
          CardTitle([text('Job Title')]),
          p([text('Rerum reiciendis beatae tenetur excepturi')]),
        ]),
      ],
      style: [BgUtil.base100, Effects.shadowSm],
    ),
  ],
  style: [Spacing.my(6), Spacing.mx(10)],
)

In center of an image

Only available for Pro users

Indicator([
  IndicatorItem(
    [Badge([text('Only available for Pro users')])],
    style: [IndicatorItem.center, IndicatorItem.middle],
  ),
  img(
    src: '/images/sneaker.png',
    alt: 'Shoes',
    classes: 'rounded'
  ),
],
style: [Size.maxWxs],
)

Positional Indicators

Place the indicator on any corner or edge. The component now handles centering automatically.

content

// Example for middle-center position.
Indicator([
  IndicatorItem(
    [Badge([], style: [Badge.secondary])],
    style: [IndicatorItem.middle, IndicatorItem.center],
  ),
  Container(
    [text('content')],
    style: [
      Size.w(32),
      Size.h(32),
      Effects.rounded,
      BgUtil.base300,
      Layout.grid,
      Alignment.placeItemsCenter,
    ],
  ),
])

Multiple indicators

↖︎

↑

↗︎

←

●

→

↙︎

↓

↘︎

Box

Indicator([
  IndicatorItem([Badge([text('↖︎')])], style: [IndicatorItem.top, IndicatorItem.start]),
  IndicatorItem([Badge([text('↑')])], style: [IndicatorItem.top, IndicatorItem.center]),
  IndicatorItem([Badge([text('↗︎')])], style: [IndicatorItem.top, IndicatorItem.end]),
  IndicatorItem([Badge([text('←')])], style: [IndicatorItem.middle, IndicatorItem.start]),
  IndicatorItem([Badge([text('●')])], style: [IndicatorItem.middle, IndicatorItem.center]),
  IndicatorItem([Badge([text('→')])], style: [IndicatorItem.middle, IndicatorItem.end]),
  IndicatorItem([Badge([text('↙︎')])], style: [IndicatorItem.bottom, IndicatorItem.start]),
  IndicatorItem([Badge([text('↓')])], style: [IndicatorItem.bottom, IndicatorItem.center]),
  IndicatorItem([Badge([text('↘︎')])], style: [IndicatorItem.bottom, IndicatorItem.end]),
  Container(
    [text('Box')],
    style: [
      Size.w(60),
      Size.h(32),
      BgUtil.base300,
      Layout.grid,
      Alignment.placeItemsCenter,
      Effects.rounded,
    ],
  ),
])

Responsive

Indicator changes position based on the screen resolution.

content

Indicator([
  IndicatorItem(
    [Badge([], style: [Badge.secondary])],
    style: [
      IndicatorItem.start,                      // Default (mobile)
      IndicatorItem.middle.at(Breakpoint.sm), // sm and up
      IndicatorItem.bottom.at(Breakpoint.md), // md and up
      IndicatorItem.center.at(Breakpoint.lg), // lg and up
      IndicatorItem.end.at(Breakpoint.xl),    // xl and up
    ],
  ),
  Container(
    [text('content')],
    style: [
      Size.w(32),
      Size.h(32),
      Effects.rounded,
      BgUtil.base300,
      Layout.grid,
      Alignment.placeItemsCenter,
    ],
  ),
])