Overflow Actions
展开紧凑操作轨道，展示静止宽度下无法容纳的控件。
适用场景
- 当界面需要以下行为时使用 Overflow Actions：展开紧凑操作轨道，展示静止宽度下无法容纳的控件。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/overflow-actions.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
packages/vue/src/blocks/overflow-actions/demo.vue
<script setup lang="ts">
import { ref } from "vue";
import { CalendarClock, Eye, GitBranch, Pin } from "lucide-vue-next";
import { OverflowActions } from "@/components/orvui/blocks/overflow-actions";
const expanded = ref(false);
const primary = [
{ id: "preview", label: "Preview", icon: Eye },
{ id: "pin", label: "Pin", icon: Pin },
];
const extra = [
{ id: "branch", label: "Branch", icon: GitBranch },
{ id: "schedule", label: "Schedule", icon: CalendarClock },
];
</script>
<template>
<div class="flex w-full items-center justify-center">
<OverflowActions
:primary-actions="primary"
:overflow-actions="extra"
v-model:expanded="expanded"
open-label="Open action rail"
close-label="Collapse action rail"
/>
</div>
</template>
packages/vue/src/blocks/overflow-actions/src/OverflowActions.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
OverflowActions | v-model:expandedboolean | update:expanded |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
primaryActionsOverflowActionItem[]—overflowActionsOverflowActionItem[]—expanded?booleanundefineddefaultExpanded?booleanfalsecollapseOnAction?booleanfalsesize?"sm" | "md""md"openLabel?string"Show extra actions"closeLabel?string"Hide extra actions"classNames?OverflowActionsClassNames—事件
update:expanded[value: boolean]@update:expandedexpandedChange[value: boolean]@expandedChangeaction[item: OverflowActionItem]@action无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Overflow Actions？
- 通过 primaryActions、overflowActions、expanded、defaultExpanded、collapseOnAction、size、openLabel、closeLabel、classNames 配置 Overflow Actions；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:expanded、expandedChange、action，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
请留意
部分组件参考了开源作品，相关署名与独立许可请参阅 NOTICE。
更新于
来源与许可 ↗MIT · 0.1.1