コラプシブル

パネルを展開/折りたたみするインタラクティブなコンポーネント。

@peduarte が 3 つのリポジトリをスターしました

@radix-ui/primitives

import React from 'react';
import * as Collapsible from '@radix-ui/react-collapsible';
import { RowSpacingIcon, Cross2Icon } from '@radix-ui/react-icons';
import './styles.css';

const CollapsibleDemo = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible.Root className="CollapsibleRoot" open={open} onOpenChange={setOpen}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span className="Text" style={{ color: 'white' }}>
          @peduarte starred 3 repositories
        </span>
        <Collapsible.Trigger asChild>
          <button className="IconButton">{open ? <Cross2Icon /> : <RowSpacingIcon />}</button>
        </Collapsible.Trigger>
      </div>

      <div className="Repository">
        <span className="Text">@radix-ui/primitives</span>
      </div>

      <Collapsible.Content>
        <div className="Repository">
          <span className="Text">@radix-ui/colors</span>
        </div>
        <div className="Repository">
          <span className="Text">@radix-ui/themes</span>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
};

export default CollapsibleDemo;

機能

完全なキーボードナビゲーション。

制御することも、制御しないこともできます。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-collapsible

構造

コンポーネントをインポートし、パーツを組み合わせてください。

import * as Collapsible from '@radix-ui/react-collapsible';

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Content />
  </Collapsible.Root>
);

API リファレンス

ルート

コラプシブルのすべてのパーツを含みます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	デフォルト値なし
`open`	`boolean`	デフォルト値なし
`onOpenChange`	`関数`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効の場合に表示

トリガー

コラプシブルを切り替えるボタン。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効の場合に表示

コンテンツ

コラプシブルコンテンツを含むコンポーネント。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効の場合に表示

CSS変数	説明
`--radix-collapsible-content-width`	コンテンツが開閉するときの幅
`--radix-collapsible-content-height`	コンテンツが開閉するときの高さ

例

コンテンツサイズののアニメーション

--radix-collapsible-content-width および/または --radix-collapsible-content-height CSS変数を使用して、コンテンツが開閉するときのサイズをアニメーション化します。デモはこちら

// index.jsx
import * as Collapsible from '@radix-ui/react-collapsible';
import './styles.css';

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger>…</Collapsible.Trigger>
    <Collapsible.Content className="CollapsibleContent">
      …
    </Collapsible.Content>
  </Collapsible.Root>
);

/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state='open'] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state='closed'] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

アクセシビリティ

Disclosure WAI-ARIAデザインパターンに準拠しています。

キーボード操作

キー	説明
`スペース`	コラプシブルを開閉します。
`エンター`	コラプシブルを開閉します。

前チェックボックス

次コンテキストメニュー

GitHubでこのページを編集

概要

ガイド

コンポーネント

ユーティリティ

コラプシブル

機能