BaseControl

使用法

import { BaseControl, useBaseControlProps } from '@wordpress/components';
// Render a `BaseControl` for a textarea input
const MyCustomTextareaControl = ({ children, ...baseProps }) => (
   // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
   // and the inner control itself. Namely, it takes care of generating a unique `id`,
   // properly associating it with the `label` and `help` elements.
   const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
   return (
   <BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
   <textarea { ...controlProps }>
   { children }
   </textarea>
   </BaseControl>
   );
);

プロパティ

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

id

制御要素のHTML id（BaseControlの子として渡される）で、ラベルとヘルプテキストが生成されます。これは、ラベルをその要素にアクセス可能に関連付けるために必要です。

推奨される方法は、useBaseControlPropsフックを使用することで、これにより一意のidが自動的に生成されます。そうでない場合、このプロパティに明示的なidを渡すことを選択した場合、idの一意性を確保する責任があります。

• タイプ: String
• 必須: いいえ
  

ラベル

このプロパティが追加されると、ラベルプロパティをコンテンツとして使用してラベルが生成されます。

• タイプ: String
• 必須: いいえ
  

視覚からラベルを隠す

trueの場合、ラベルはスクリーンリーダーにのみ表示されます。

• タイプ: Boolean
• 必須: いいえ
  

ヘルプ

制御の追加説明。制御の意味のある説明や指示にのみ使用してください。説明を含む要素は、aria-describedby属性を介してBaseControlにプログラム的に関連付けられます。

• タイプ: ReactNode
• 必須: いいえ
  

className

ラッパーdivに追加する他のクラス。

• タイプ: String
• 必須: いいえ
  

子要素

BaseControl内に表示されるコンテンツ。

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

__nextHasNoMarginBottom

将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: false
  

BaseControl.VisualLabel

これは、BaseControl内にレンダリングされる子要素がすでにアクセス可能にラベル付けされている場合、例えばボタンなど、`````label`````プロパティが渡された場合に`````BaseControl`````が使用するラベルに相当する追加の視覚ラベルをそのセクションに対して希望する場合にのみ使用するべきです。  
 <a name="usage-2"></a>
## 使用法
``````bash
import { BaseControl } from '@wordpress/components';
const MyBaseControl = () => (
   <BaseControl
   __nextHasNoMarginBottom
   help="This button is already accessibly labeled."
   >
   <BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
   <Button>Select an author</Button>
   </BaseControl>
);
`

プロパティ

className

ラッパーdivに追加する他のクラス。

• タイプ: String
• 必須: いいえ

子要素

- タイプ: `````Element

• 必須: はい