この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
RadixUIについて
Radix Primitivesは、アクセシビリティ、カスタマイズ、および開発者エクスペリエンスに重点を置いた低レベルのUIコンポーネントライブラリです。これらのコンポーネントは、設計システムのベースレイヤーとして使用することも、段階的に採用することもできます。
RadixUIはReactのUIライブラリになります。スタイルの設定がされていないのが特徴で、柔軟性が高く、さまざまなスタイリング方法が使えます。
試してみた
使用方法
RadixUIをインストールします。使用するコンポーネントごとにインストールするのが特徴です。
$ yarn add @radix-ui/"使いたいコンポーネント"@latest -E
使用する際は、コンポーネントをインポートして、それぞれのパーツを組み立てていきます。
import * as Accordion from '@radix-ui/react-accordion';
() => (
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Content />
</Accordion.Item>
</Accordion.Root>
);
スタイリング
また、コンポーネントはclassNameをpropsとして受け取ることができるので、そのままcssを当てることができます。
data-state属性を使用すると、コンポーネントの状態によってスタイルを設定することができます。
.accordion-item {
border-bottom: 1px solid #ccc;
}
.accordion-item[data-state='open'] {
border-bottom-width: 2px;
}
stitches
stitchesを使用したスタイリング方法。公式のコンポーネントデザイン例では、stitchesが採用されています。
import React from "react";
import { styled } from "@stitches/react";
import { violet, blackA } from "@radix-ui/colors";
import { CheckIcon } from "@radix-ui/react-icons";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
const StyledCheckbox = styled(CheckboxPrimitive.Root, {
all: "unset",
backgroundColor: "white",
width: 25,
height: 25,
borderRadius: 4,
display: "flex",
alignItems: "center",
justifyContent: "center",
boxShadow: `0 2px 10px ${blackA.blackA7}`,
"&:hover": { backgroundColor: violet.violet3 },
"&:focus": { boxShadow: `0 0 0 2px black` },
});
const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
color: violet.violet11,
});
export const Checkbox = StyledCheckbox;
export const CheckboxIndicator = StyledIndicator;
const Flex = styled("div", {
display: "flex",
justifyContent: "center",
height: "100vh",
});
const Label = styled("label", {
fontSize: 15,
lineHeight: 1,
userSelect: "none",
});
export const CheckboxDemo = () => (
<form>
<Flex css={{ alignItems: "center" }}>
<Checkbox defaultChecked id="c1">
<CheckboxIndicator>
<CheckIcon />
</CheckboxIndicator>
</Checkbox>
<Label css={{ paddingLeft: 15 }} htmlFor="c1">
Accept terms and conditions.
</Label>
</Flex>
</form>
);
export default CheckboxDemo;
変数に格納したものとexportすることで、デザインが当たったコンポーネントを作成できます。
tailwind.css
tailwind.cssのUIライブラリとしては、headlessUIの採用率が高いイメージがあります。headlessUIでは少し物足りないなというプロジェクトでは、選択肢の一つになると思います。
import React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
export const CheckboxDemo = () => (
<div className="flex h-screen justify-center items-center">
<CheckboxPrimitive.Root
className="border border-blue-500"
defaultChecked
id="c1"
>
<CheckboxPrimitive.Indicator>
<CheckIcon />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
<label style={{ paddingLeft: 15 }} htmlFor="c1">
Accept terms and conditions.
</label>
</div>
);
export default CheckboxDemo;
もちろん、特定のライブラリに依存していないため、他にもさまざまなライブラリを使用できます。
まとめ
今回は、RadixUIを使ってみました。自分でスタイリングする分、作業量は増えますが自由度は高いです。独自のデザインでコンポーネントを作成する場面では、選択肢が広く0からスタイリングできるRadixUIは、柔軟性が高くおすすめだと思います。
ではまた。