TabPanel

デザインガイドライン

使用法

タブパネルは、関連するコンテンツのグループ間のナビゲーションを整理し、可能にします。

セット内のタブ

セットとして、すべてのタブは共通のトピックによって統一されています。明確さのために、各タブには他のタブとは異なるコンテンツを含めるべきです。

構造

• 1. コンテナ
• 2. アクティブテキストラベル
• 3. アクティブタブインジケーター
• 4. 非アクティブテキストラベル
• 5. タブアイテム

ラベル

タブラベルは単一の行に表示され、同じフォントとサイズで表示されます。タブの内容を明確かつ簡潔に説明するテキストラベルを使用し、タブのセットが共通の特性を持つアイテムの一貫したグループを含むことを確認してください。

タブラベルは2行目に折り返すことができますが、タブの2行目を追加しないでください。

アクティブタブインジケーター

アクティブタブと非アクティブタブを区別するために、アクティブタブのテキストとアイコンに下線と色の変更を適用します。

動作

ユーザーはキーボードのタブキーを押すことでタブ間をナビゲートできます。

配置

タブはコンテンツの上に配置します。タブはその下に表示されるUI領域を制御します。

開発ガイドライン

使用法

import { TabPanel } from '@wordpress/components';
const onSelect = ( tabName ) => {
   console.log( 'Selecting tab', tabName );
};
const MyTabPanel = () => (
   <TabPanel
   className="my-tab-panel"
   activeClass="active-tab"
   onSelect={ onSelect }
   tabs={ [
   {
   name: 'tab1',
   title: 'Tab 1',
   className: 'tab-one',
   },
   {
   name: 'tab2',
   title: 'Tab 2',
   className: 'tab-two',
   },
   ] }
   >
   { ( tab ) => <p>{ tab.title }</p> }
   </TabPanel>
);

プロパティ

コンポーネントは以下のプロパティを受け入れます：

className

TabPanelの外部コンテナに与えるクラス

• タイプ: String
• 必須: いいえ
• デフォルト: \’\’

orientation

タブリストの向き（verticalまたはhorizontal）

• タイプ: String
• 必須: いいえ
• デフォルト: horizontal

onSelect

タブが選択されたときに呼び出される関数。引数としてtabNameが渡されます。

• タイプ: Function
• 必須: いいえ
• デフォルト: noop

tabs

以下のプロパティを含むオブジェクトの配列：

• name: (string) タブのキーを定義します。
• title:(string) タブの翻訳されたテキストを定義します。
• className:(string) オプション。タブに付加するクラスを定義します。
• icon:(ReactNode) オプション。設定すると、タブタイトルの代わりにアイコンが表示されます。タイトルはその後、aria-labelおよびツールチップとしてレンダリングされます。
• disabled:(boolean) オプション。タブが無効または選択可能であるかどうかを決定します。

注意: 他のフィールドがオブジェクトに追加され、必要に応じて子関数からアクセスされる場合があります。

• タイプ: Array
• 必須: はい

activeClass

アクティブタブに追加するクラス

• タイプ: String
• 必須: いいえ
• デフォルト: is-active

initialTabName

コンポーネントのマウント時に選択されるタブの名前。このプロパティが設定されていない場合、最初のタブがデフォルトで選択されます。

• タイプ: String
• 必須: いいえ
• デフォルト: なし

selectOnMove

- タイプ: `````boolean

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

children

選択されたタブに基づいてタブビューをレンダリングする関数。関数には、タブプロパティで定義されたアクティブタブオブジェクトが引数として渡されます。

• タイプ: (Object) => Element
• 必須: はい