Radix Vue

外观

样式 ​

Radix 组件是无样式的，并且兼容任何样式解决方案，让您完全控制样式。

样式概述 ​

功能样式 ​

您可以控制所有方面的样式，包括功能样式。例如，默认情况下，对话框叠加层 不会覆盖整个视窗。您负责添加这些样式，以及任何演示样式。

类 ​

所有组件都接受 class 属性，就像普通组件一样。这个类将传递到 DOM 元素。您可以像预期的那样在 CSS 中使用它。

传送的元素 ​

一些元素，比如模态或弹出框，被传送到了 body。当使用作用域样式来应用 CSS 时，您需要使用 深度选择器 来定位它们。

数据属性 ​

当组件是有状态的时，它们的 state 会暴露在 data-state 属性中。例如，当一个 手风琴项 被打开时，它会包含一个 data-state="open" 属性。

用 CSS 样式化 ​

对一个部分进行样式化 ​

您可以通过定位您提供的 class 来对组件的一部分进行样式化。

vue
<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "radix-vue";
</script>

<template>
  <AccordionRoot>
    <AccordionItem class="AccordionItem" value="item-1" />
    <!-- ... -->
  </AccordionRoot>
</template>

<style>
.AccordionItem {
  /* ... */
}
</style>

对一个 state 进行样式化 ​

您可以通过定位它的 data-state 属性来对组件 state 进行样式化。

css
.AccordionItem {
  border-bottom: 1px solid gainsboro;
}

.AccordionItem[data-state="open"] {
  border-bottom-width: 2px;
}

作用域样式 ​

您可以使用作用域样式来对组件进行样式化。注意传送的元素，因为它们需要使用 深度选择器 才能被定位。

vue
<script setup lang="ts">
import { DropdownMenuRoot, DropdownMenuItem, ... } from "radix-vue";
</script>

<template>
  <DropdownMenuRoot>
    <!-- ... -->
    <DropdownMenuPortal>
      <DropdownMenuContent class="DropdownMenuContent">
        <DropdownMenuItem class="DropdownMenuItem">An item</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

<style scoped>
:deep(.DropdownMenuContent) {
  /* ... */
}

.DropdownMenuItem {
  /* ... */
}
</style>

用 Tailwind CSS 进行样式化 ​

以下示例使用了 Tailwind CSS，但您可以使用任何您选择的库。

对一个部分进行样式化 ​

您可以通过定位 class 来对组件的一部分进行样式化。

vue
<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "radix-vue";
</script>

<template>
  <AccordionRoot>
    <AccordionItem class="border border-gray-400 rounded-2xl" value="item-1" />
    <!-- ... -->
  </AccordionRoot>
</template>

对一个 state 进行样式化 ​

使用 Tailwind CSS 的强大变体选择器，您可以通过定位它的 data-state 属性来对组件 state 进行样式化。

vue
<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "radix-vue";
</script>

<template>
  <AccordionRoot>
    <AccordionItem
      class="
        border border-gray-400 rounded-2xl
        data-[state=open]:border-b-2 data-[state=open]:border-gray-800
      "
      value="item-1"
    />
    <!-- ... -->
  </AccordionRoot>
</template>

扩展一个原始组件 ​

扩展一个原始组件与您扩展任何 Vue 组件的方式相同。

vue
<script setup lang="ts">
import { AccordionItem, type AccordionItemProps } from "radix-vue";

interface Props extends AccordionItemProps {
  foo: string;
}

defineProps<Props>();
</script>

<template>
  <AccordionItem v-bind="$props"><slot /></AccordionItem>
</template>

总结 ​

Radix 组件旨在封装无障碍性问题和其他复杂功能，同时确保您保留对样式的完全控制。

为了方便起见，有状态组件包括一个 data-state 属性。

信息

来源：Radix UI