コンポーネント

(コンポーネント一覧:各コンポーネント名を日本語に翻訳。「プレビュー」はそのまま。)

ユーティリティ

(ユーティリティ一覧:各ユーティリティ名を日本語に翻訳。「非推奨」はそのまま。)
コンポーネント

アスペクト比

コンテンツを指定した比率で表示します。

import React from 'react';
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
import './styles.css';
const AspectRatioDemo = () => (
<div className="Container">
<AspectRatio.Root ratio={16 / 9}>
<img className="Image" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" />
</AspectRatio.Root>
</div>
);
export default AspectRatioDemo;

機能

    任意のカスタム比率を受け入れます。

インストール

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

npm install @radix-ui/react-aspect-ratio

構造

コンポーネントをインポートします。

import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => <AspectRatio.Root />;

API リファレンス

ルート

指定された比率に制限するコンテンツが含まれています。

プロパティタイプデフォルト
asChild
真偽値
false
ratio
数値
1