Indicator
Indicatorは、アバターなどの要素の隅に表示するコンポーネントです。
HY
New
HY
<Wrap gap="lg">
<Indicator label="New" colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
/>
</Indicator>
<Indicator colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
shape="rounded"
/>
</Indicator>
</Wrap>
使い方
import { Indicator } from "@yamada-ui/react"
import { Indicator } from "@/components/ui"
import { Indicator } from "@workspaces/ui"
<Indicator />
バリアントを変更する
HY
New
HY
New
HY
New
<Wrap gap="lg">
<For each={["solid", "subtle", "surface"]}>
{(variant, index) => (
<Indicator key={index} variant={variant} label="New" colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
/>
</Indicator>
)}
</For>
</Wrap>
サイズを変更する
HY
New
HY
New
HY
New
<Wrap gap="lg">
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<Indicator key={index} size={size} label="New" colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
/>
</Indicator>
)}
</For>
</Wrap>
カラースキームを変更する
HY
New
HY
New
<Wrap gap="lg">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Indicator key={index} colorScheme={colorScheme} label="New">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
/>
</Indicator>
)}
</For>
</Wrap>
表示位置を変更する
表示位置を変更する場合は、placementにstart-startやcenter-endなどを指定します。
HY
New
HY
New
HY
New
HY
New
HY
New
HY
New
HY
New
HY
New
HY
New
const placements = [
"start-start",
"start-center",
"start-end",
"center-start",
"center-center",
"center-end",
"end-start",
"end-center",
"end-end",
] as const
return (
<Grid gap="lg" p="lg" templateColumns="repeat(3, 1fr)" w="fit-content">
<For each={placements}>
{(placement, index) => (
<Indicator
key={index}
label="New"
placement={placement}
colorScheme="info"
>
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
</Indicator>
)}
</For>
</Grid>
)
オフセットを変更する
オフセットを変更する場合は、offsetに値を設定します。
HY
<Wrap>
<Indicator offset="1.5" colorScheme="info">
<Avatar
size="xl"
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
</Indicator>
</Wrap>
最大値を設定する
最大値を設定する場合は、overflowCountに数値を設定します。
HY
99+
<Wrap>
<Indicator label={100} overflowCount={99} colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
</Indicator>
</Wrap>
ゼロを表示しない
ゼロを表示しない場合は、showZeroをfalseにします。
HY
0
HY
<Wrap gap="lg">
<Indicator label={0} colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
</Indicator>
<Indicator label={0} showZero={false} colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
</Indicator>
</Wrap>
境界線を表示する
境界線を表示する場合は、withBorderをtrueにします。
HY
New
<Wrap>
<Indicator withBorder colorScheme="info" label="New">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
</Indicator>
</Wrap>
ハイライトする
ハイライトする場合は、pingプロパティを使用します。
HY
New
HY
<Wrap gap="lg">
<Indicator
ping={{
scale: 1.4,
}}
label="New"
colorScheme="info"
>
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
/>
</Indicator>
<Indicator ping colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
shape="rounded"
/>
</Indicator>
</Wrap>
非表示にする
非表示にする場合は、disabledをtrueにします。
HY
<Wrap>
<Indicator disabled label="New" colorScheme="info">
<Avatar
name="Hirotomo Yamada"
src="https://avatars.githubusercontent.com/u/84060430"
/>
</Indicator>
</Wrap>