Indicator

Indicatorは、アバターなどの要素の隅に表示するコンポーネントです。

インポート

import { Indicator } from "@yamada-ui/react"

Copied!

使い方

編集可能な例

<Wrap p="md" gap="md">
  <Indicator label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

バリアントを変更する

編集可能な例

<Wrap p="md" gap="md">
  <Indicator variant="solid" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

サイズを変更する

編集可能な例

<Wrap p="md" gap="md">
  <Indicator size="sm" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator size="md" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator size="lg" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

カラースキーマを変更する

編集可能な例

<Wrap p="md" gap="md">
  <Indicator variant="solid" colorScheme="secondary" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" colorScheme="green" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

表示位置を変更する

インジケーターの表示位置を変更したい場合は、placementにtop-leftやrightなどを指定します。

編集可能な例

<Grid w="fit-content" templateColumns="repeat(3, 1fr)" p="md" gap="md">
  <Indicator placement="top-left" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="top" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="top-right" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="left" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Box />

  <Indicator placement="right" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="bottom-left" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="bottom" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="bottom-right" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Grid>

Copied!

オフセットを変更する

要素の大きさによっては、インジケーターが意図しない位置になる場合があります。その場合は、offsetで調整します。

編集可能な例

<Wrap p="md" gap="md">
  <Indicator label="new" offset={4}>
    <Avatar
      size="2xl"
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

ゼロを表示しない

例えば、通知の数をインジケーターで表示している場合、0を表示したくないケースがあると思います。その場合は、showZeroをfalseに設定することで表示されなくなります。

編集可能な例

<Wrap p="md" gap="md">
  <Indicator label={0}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator showZero={false} label={0}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

境界線を表示する

要素とインジケーターの間に境界線をつけたい場合は、withBorderをtrueにします。

編集可能な例

<Wrap p="md" gap="md">
  <Indicator label={99} withBorder>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

ハイライトする

ハイライトする場合は、pingをtrueにします。

編集可能な例

<Wrap gap="md">
  <Indicator label="new" ping pingScale={1.4}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" label="new" ping pingScale={1.4}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator size="lg" offset={1.5} ping>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" size="lg" offset={1.5} ping>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

非表示にする

isDisabledをtrueにすることで、インジケーターは非表示になります。

編集可能な例

<Wrap p="md" gap="md">
  <Indicator isDisabled label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

GitHubでこのページを編集する

前Avatar 次トランジション