ColorSwatch
ColorSwatchは、色の見本を表示するコンポーネントです。
インポート
import { ColorSwatch } from "@yamada-ui/react"
使い方
編集可能な例
<VStack> <Wrap gap="md"> <ColorSwatch color="#4387f4" /> <ColorSwatch color="rgba(234, 22, 174, 0.5)" /> <ColorSwatch color="hsla(251, 87%, 67%, 0.7)" /> </Wrap> <Wrap gap="md"> {Object.entries(defaultTheme.colors.whiteAlpha).map(([key, color]) => ( <ColorSwatch key={key} color={color} /> ))} </Wrap> <Wrap gap="md"> {Object.entries(defaultTheme.colors.blackAlpha).map(([key, color]) => ( <ColorSwatch key={key} color={color} /> ))} </Wrap> </VStack>
バリアントを変更する
編集可能な例
<Wrap gap="md"> <ColorSwatch color="#4387f4" variant="basic" /> <ColorSwatch color="rgba(234, 22, 174, 0.5)" variant="rounded" /> </Wrap>
サイズを変更する
編集可能な例
<Wrap gap="md"> <ColorSwatch color="#4387f4" size="sm" /> <ColorSwatch color="rgba(234, 22, 174, 0.5)" size="md" /> <ColorSwatch color="hsla(251, 87%, 67%, 0.7)" size="lg" /> </Wrap>
影を無効にする
デフォルトでは、色を見やすくするためにインラインに影がついています。影を無効にする場合は、withShadowをfalseに設定します。
編集可能な例
<Wrap gap="md"> <ColorSwatch color="#4387f4" withShadow={false} /> <ColorSwatch color="rgba(234, 22, 174, 0.5)" withShadow={false} /> <ColorSwatch color="hsla(251, 87%, 67%, 0.7)" withShadow={false} /> </Wrap>
GitHubでこのページを編集する