Radix Vue

外観

はじめに ​

Radix Primitives を使い始めるためのクイックチュートリアルです。

ポップオーバーの実装 ​

このクイックチュートリアルでは、ポップオーバーコンポーネントをインストールしてスタイルを設定します。

1. ライブラリのインストール ​

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

sh
$ npm add radix-vue

2. パーツのインポート ​

パーツをインポートして構成します。

vue
<!-- Popover.vue -->
<script setup lang="ts">
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>More info</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent>
        Some more info...
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

3. スタイルの追加 ​

必要な場所にスタイルを追加します。

vue
<template>
  <PopoverRoot>
    <PopoverTrigger class="PopoverTrigger">
      More info
    </PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent">
        Some more info...
        <PopoverClose />
        <PopoverArrow class="PopoverArrow" />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

<style>
.PopoverTrigger {
  background-color: white;
  border-radius: 4px;
}

.PopoverContent {
  border-radius: 4px;
  padding: 20px;
  width: 260px;
  background-color: white;
}

.PopoverArrow {
  background-color: white;
}
</style>

デモ ​

完全なデモを次に示します。

vue
<script setup lang="ts">
import {
  PopoverArrow,
  PopoverClose,
  PopoverContent,
  PopoverPortal,
  PopoverRoot,
  PopoverTrigger,
} from 'radix-vue'
import './styles.css'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger class="PopoverTrigger">
      More info
    </PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent">
        Some more info...
        <PopoverClose />
        <PopoverArrow class="PopoverArrow" />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

まとめ ​

上記の手順は、アプリケーションで Radix Primitive を使用するために必要なことを簡単に説明しています。

これらのコンポーネントは、ラップ方法を制御できるほど低レベルです。チームと製品のニーズに合わせて、独自のハイレベル API を自由に導入できます。

いくつかの簡単な手順で、複雑さを気にすることなく、完全にアクセス可能なポップオーバーコンポーネントを実装しました。

  • WAI-ARIA デザインパターンに準拠しています。
  • 制御することも、制御しないこともできます。
  • 側面、配置、オフセット、衝突処理をカスタマイズします。
  • オプションで矢印を表示します。
  • フォーカスは完全に管理可能で、カスタマイズ可能です。
  • 解雇と階層化の動作は高度にカスタマイズ可能です。