溢出列表
@astryxdesign/core v0.7.1 · OverflowList
使用方法
OverflowList 按容器宽度决定能放下几项，剩下的收进「更多」菜单。默认从末尾收起，collapseFrom="start" 时从开头收起。visibleCount 可以直接指定可见项数，跳过测量，测试时用得上。
每一项是 { label, href?, iconClass? }。自定义外观用 item 插槽，自定义溢出菜单用 overflow 插槽。
vue
<script setup lang="ts">
import { OverflowList } from '@astryx-vue/core/OverflowList'
const items = [
{ href: '/home', label: '首页' },
{ href: '/files', label: '文件' },
{ href: '/settings', label: '设置' },
]
</script>
<template>
<OverflowList :items="items" />
</template>解剖
| 部分 | 说明 |
|---|---|
| 列表 | 装着当前可见内容的横向列表容器。 |
| 项 | 使用方提供的项里，按当前宽度和数量限制选出来显示的那些。 |
| 溢出指示 | 可选的、由使用方渲染的指示，表示被宽度或数量限制收起来的项。 |
最佳实践
| 指引 | 实践 |
|---|---|
| 推荐 | 让列表宽度跟着父级走。项一多，组件会自己把放不下的收进菜单。 |
| 推荐 | 需要至少留下几项时设置 minVisibleItems。 |
| 避免 | 不要同时用插槽把同一项再画一遍到菜单外面。可见项和溢出项是切开的两段。 |
示例
限量工具栏
maxVisibleItems 把一行限制成三个操作，即使还能放下更多；其余进入下拉菜单。
从开头折叠
从开头隐藏放不下的项，让最新的项保持可见。
多行标签
React
TypeScript
StyleX
Storybook
Vitest
Playwright
ESLint
Prettier
Vite
pnpm
标签最多换到两行，其余折叠成数量徽章。
徽章标签
React
TypeScript
StyleX
Storybook
Vitest
可调整宽度的徽章行，溢出时收成一个数量徽章。
下拉操作
操作工具栏把放不下的按钮收进下拉菜单。
表格筛选
表格上方的筛选条：搜索框在最前，旁边每个字段既是关闭的触发器，也是自己的筛选条；行变窄时，条件从末尾收成一个数量。