半径

テーマで適切な半径設定を選択する。

テーマ設定

テーマのradius設定は、コンポーネントに適用される半径の係数を管理します。

<Theme radius="medium">
  <TextField.Root size="3" placeholder="Reply…">
    <TextField.Slot side="right" px="1">
      <Button size="2">Send</Button>
    </TextField.Slot>
  </TextField.Root>
</Theme>

なし

小

中

大

フル

結果として得られるborder-radiusは状況によって異なり、コンポーネントによって異なります。たとえば、fullに設定すると、ボタンはピル型になりますが、チェックボックスは、ラジオボタンとの混同を避けるために、完全に丸くなることはありません。

<Theme radius="full">
  <Flex align="center" gap="3">
    <Button>Save</Button>
    <Switch defaultChecked />
    <Checkbox defaultChecked />
  </Flex>
</Theme>

半径のオーバーライド

特定のコンポーネントでは、独自のradiusプロパティを使用して半径係数をオーバーライドできます。

<Flex align="center" gap="3">
  <Button radius="none">Save</Button>
  <Button radius="small">Save</Button>
  <Button radius="medium">Save</Button>
  <Button radius="large">Save</Button>
  <Button radius="full">Save</Button>
</Flex>

Card、Dialog、Popoverなど、パネルをレンダリングするコンポーネントには、radiusプロパティはありませんが、テーマから半径設定を継承します。radiusプロパティは、ほとんどのテキストベースのコンポーネントでも利用できません。

半径スケール

コンポーネントで使用される半径の値は、6段階のスケールから派生しています。

特定のコンポーネントで特定のステップを直接使用することはできませんが—radiusプロパティは半径係数を設定するためだけに使用されます—半径スケールを使用して独自のコンポーネントをスタイル設定できます。

半径トークンには、CSS変数を使用してアクセスします。これらのトークンを使用すると、カスタムコンポーネントをスタイル設定し、テーマの他の部分と一貫性を保つことができます。

/* Radius values that automatically respond to the radius factor */
var(--radius-1);
var(--radius-2);
var(--radius-3);
var(--radius-4);
var(--radius-5);
var(--radius-6);

/* A multiplier that controls the theme radius */
var(--radius-factor);

/*
 * A variable used to calculate a fully rounded radius.
 * Usually used within a CSS `max()` function.
 */
var(--radius-full);

/*
 * A variable used to calculate radius of a thumb element.
 * Usually used within a CSS `max()` function.
 */
var(--radius-thumb);

前へブレークポイント

次へ影

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

半径

テーマ設定

半径のオーバーライド

半径スケール