Radix Vue

外観

プリミティブ ​

Radixの機能を代替要素タイプまたは独自のVueコンポーネントに構成します。

コンポーネントを構築する場合、基礎となる要素または代替要素にいくつかの機能をユーザーが構成できるようにしたい場合があります。これは、Primitive がユーザーにこの機能を公開するため、便利な場所です。

APIリファレンス ​

プロパティデフォルトタイプ
as
div
string | Component
現在の要素がレンダリングされる要素またはコンポーネント。
asChild
false
boolean
レンダリングされるデフォルトの要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをご覧ください。

使用方法 ​

as 値の変更 ​

レンダリングされるデフォルトの要素またはコンポーネントを変更する場合は、プロパティを定義するときにデフォルトの as を設定できます。

vue
<script setup lang="ts">
import { Primitive, type PrimitiveProps } from 'radix-vue'

const props = withDefaults(defineProps<PrimitiveProps>(), {
  as: 'span'
})
</script>

<template>
  <!-- Now this element will be rendered as `span` by default -->
  <Primitive v-bind="props">
    ...
  </Primitive>
</template>

asChild のレンダリング ​

レンダリングされるデフォルトの要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをご覧ください。