CircularOptionPicker

使用法

import { useState } from 'react';
import { CircularOptionPicker } from '../circular-option-picker';
const Example = () => {
   const [ currentColor, setCurrentColor ] = useState();
   const colors = [
   { color: '#f00', name: 'Red' },
   { color: '#0f0', name: 'Green' },
   { color: '#00f', name: 'Blue' },
   ];
   const colorOptions = (
   <>
   { colors.map( ( { color, name }, index ) => {
   return (
   <CircularOptionPicker.Option
   key={ `${ color }-${ index }` }
   tooltipText={ name }
   style={ { backgroundColor: color, color } }
   isSelected={ index === currentColor }
   onClick={ () => setCurrentColor( index ) }
   aria-label={ name }
   />
   );
   } ) }
   </>
   );
   return (
   <CircularOptionPicker
   options={ colorOptions }
   actions={
   <CircularOptionPicker.ButtonAction
   onClick={ () => setCurrentColor( undefined ) }
   >
   { 'Clear' }
   </CircularOptionPicker.ButtonAction>
   }
   />
   );
};

プロパティ

className: string

ラッパー要素に適用するCSSクラスです。

• 必須: いいえ
  

actions: ReactNode

オプションの後にレンダリングされるアクション（例：ColorPaletteに見られる「クリア」ボタンなど）。

通常はCircularOptionPicker.ButtonActionまたはCircularOptionPicker.DropdownLinkActionコンポーネントです。

• 必須: いいえ
  

options: ReactNode

レンダリングされるオプション（例：カラースウォッチなど）。

通常はCircularOptionPicker.Optionコンポーネントです。

• 必須: いいえ
  

children: ReactNode

子要素です。

• 必須: いいえ
  

asButtons: boolean

コントロールがボタンのセットとして表示されるかどうか、各ボタンには独自のタブストップがあります。

• 必須: いいえ
• デフォルト: false
  

loop: boolean

キーボード操作がラップするのを防ぎます。asButtonsが真でない場合にのみ使用されます。

• 必須: いいえ
• デフォルト: true
  

サブコンポーネント

CircularOptionPicker.ButtonAction

ButtonActionは、オプション自体と並んでボタンとしてレンダリングされるアクションです。

一般的な使用例は、現在選択されているオプションを選択解除するための「クリア」ボタンです。

プロパティ

className: string

基盤となるButtonコンポーネントに適用するCSSクラスです。

• 必須: いいえ

children: ReactNode

ボタンの子要素です。

• 必須: いいえ

継承されたプロパティ

CircularOptionPicker.ButtonActionは、hrefおよびtargetを除くすべてのButtonプロパティを継承します。

CircularOptionPicker.DropdownLinkAction

CircularOptionPicker.DropdownLinkActionは、ドロップダウントグルの背後に隠されたアクションです。ボタンはリンクとしてフォーマットされ、anchor要素としてレンダリングされます。

プロパティ

className: string

基盤となるDropdownコンポーネントに適用するCSSクラスです。

• 必須: いいえ

linkText: string

ボタンに表示されるテキストです。

• 必須: はい

dropdownProps: object

基盤となるDropdownコンポーネントのプロパティです。

classNameおよびrenderToggleを除くすべてのDropdownプロパティを継承します。

• 必須: はい

buttonProps: object

基盤となるButtonコンポーネントのプロパティです。

href、target、およびchildrenを除くすべてのButtonプロパティを継承します。

• 必須: いいえ