ui-arch-bot
21 lines
1.1 KiB
TypeScript
21 lines
1.1 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { BreadcrumbProps } from './types.js';
|
|
|
|
/*** 面包屑：nav + ol 语义结构，末项为当前页（不可点、aria-current）；有 href 渲染 <a>，无 href 渲染 button 交 onNavigate ***/
|
|
export function breadcrumb(props: BreadcrumbProps): HTMLElement {
|
|
const items = props.items;
|
|
const sep = props.separator ?? '/';
|
|
|
|
const entries = items.map((item, i) => {
|
|
const last = i === items.length - 1; // 末项即当前页
|
|
const node = last
|
|
? h('span', { class: 'ua-crumb-current', 'aria-current': 'page' }, item.label)
|
|
: item.href
|
|
? h('a', { class: 'ua-crumb-link', href: item.href }, item.label)
|
|
: h('button', { type: 'button', class: 'ua-crumb-link', onClick: () => props.onNavigate?.(item, i) }, item.label);
|
|
return h('li', { class: 'ua-crumb-item' }, node, last ? null : h('span', { class: 'ua-crumb-sep', 'aria-hidden': 'true' }, sep));
|
|
});
|
|
|
|
return h('nav', { class: 'ua-breadcrumb', 'aria-label': '面包屑导航' }, h('ol', { class: 'ua-crumb-list' }, ...entries));
|
|
}
|