配色カード
異なる配色を表し、ライトおよびダークテーマに特化されています。- 使用方法
- プロパティ
import { ColorSchemeCard } from "twenty-ui/display";
export const MyComponent = () => {
return (
<ColorSchemeCard
variant="Dark"
selected={true}
/>
);
};
| プロパティ | タイプ | 説明 | デフォルト |
|---|---|---|---|
| バリアント | string | 配色のバリエーション。 オプションには ダーク、ライト、および システム が含まれています | ライト |
| 選択済み | ブール型 | true の場合、選択されているカラースキームを示すチェックマークを表示します | |
| 追加のプロパティ | React.ComponentPropsWithoutRef<'div'> | 標準の HTML div エレメントのプロパティ |
配色ピッカー
ユーザーが異なる配色を選択できます。- 使用方法
- プロパティ
import { ColorSchemePicker } from "twenty-ui/display";
export const MyComponent = () => {
return <ColorSchemePicker
value="Dark"
onChange
/>;
};
| プロパティ | タイプ | 説明 |
|---|---|---|
| 値 | カラースキーム | 現在選択されている配色 |
| onChange | 関数 | ユーザーが配色を選択したときにトリガーされるコールバック関数 |