Reka UI logoReka UI 中文文档
backdrop
Examples
指南

样式设计

Reka UI 采用无样式设计，兼容任何样式解决方案，让您完全掌控样式设计。

样式设计概述

功能样式

您可以全面控制样式的各个方面，包括功能样式。例如，默认情况下，对话框遮罩不会覆盖整个视口。您需要负责添加这些样式以及任何展示样式。

类名

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

传送元素

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

数据属性

当组件具有状态时，其状态将通过 data-state 属性公开。例如，当手风琴项打开时，它会包含一个 data-state="open" 属性。

使用 CSS 设计样式

样式化部件

您可以通过提供 class 来定位组件部件并为其添加样式。

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

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

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

样式化状态

您可以通过组件的 data-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 "reka-ui";
</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 "reka-ui";
</script>

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

样式化状态

利用 Tailwind CSS 强大的变体选择器，您可以通过组件的 data-state 属性来定位并为其状态添加样式。

vue
<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "reka-ui";
</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 "reka-ui";

interface Props extends AccordionItemProps {
  foo: string;
}

defineProps<Props>();
</script>

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

总结

Reka UI 旨在封装无障碍访问问题和其他复杂功能，同时确保您能完全控制样式设计。

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