スニペット
スニペットは、インラインまたは複数行のコードスニペットを表示するために使用できるコンポーネントです。
インストール
npx nextui-cli@latest add snippet
上記のコマンドは個別のインストール専用です。もし @nextui-org/reactがすでにグローバルにインストールされている場合は、この手順をスキップできます。
インポート
使用方法
サイズ
色
バリアント
カスタムシンボル
コピーなし
hideCopyButton プロパティを true に設定することで、コピーボタンを非表示にできます。
カスタムツールチップ
tooltipProps プロパティを使用することで、ツールチップをカスタマイズできます。
注:
Tooltipのプロパティの詳細については、Tooltip のページをご覧ください。
複数行
カスタムアイコン
copyIcon および checkIcon プロパティを使用することで、コピーとコピー完了のアイコンをカスタマイズできます。
スロット
- base: スニペットのベーススロット。これはメインのコンテナです。
- content: これは
<pre/>スロットのラッパーです。 - pre: スニペットの
<pre/>スロット。コードをラップするために使用されます。 - symbol: シンボルラッパースロット。
- copyButton: コピーボタンのスロット。
- copyIcon: コピーアイコンのスロット。
- checkIcon: チェックアイコンのスロット。
API
スニペットのプロパティ
| 属性 | タイプ | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | ReactNode[] | スニペットの内容。 | - |
| size | sm | md | lg | スニペットのサイズ。 | md |
| radius | none | sm | md | lg | スニペットの角の丸み。 | lg |
| symbol | string | ReactNode | スニペットの前に表示するシンボル。 | $ |
| timeout | number | クリップボードをリセットするまでの待機時間（ミリ秒単位）。 | 2000 |
| codeString | string | コピーするコード文字列。codeString が渡された場合、子要素の代わりにこれがコピーされます。 | - |
| tooltipProps | TooltipProps | ツールチップのプロパティ。 | - |
| copyIcon | ReactNode | コピーアイコン。 | - |
| checkIcon | ReactNode | チェックアイコン。 | - |
| disableTooltip | boolean | ツールチップを無効にするかどうか。 | false |
| disableCopy | boolean | コピーボタンを無効にするかどうか。 | false |
| hideCopyButton | boolean | コピーボタンを非表示にするかどうか。 | false |
| hideSymbol | boolean | シンボルを非表示にするかどうか。 | false |
| copyButtonProps | ButtonProps | コピーボタンのプロパティ。 | - |
| disableAnimation | boolean | アニメーションを無効にするかどうか。 | false |
| classNames | Record<"base"｜"content"｜"pre"｜"symbol"｜"copyButton"｜"checkIcon", string> | スニペットのスロットにカスタムクラス名をセットできます。 | - |
スニペットのイベント
| 属性 | タイプ | 説明 |
|---|---|---|
| onCopy | (value: string ｜ string[]) => void; | コードがコピーされたときに呼び出されるハンドラー。 |
