temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g164): 描述列表支持竖排与标题操作区

Browse Source
This commit is contained in:
HIsheR
2026-10-26 16:09:59 +08:00
parent bb1625a06d
commit b533903994
7 changed files with 78 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/src/descriptions.ts
+7 -3
View File
@@ -10,12 +10,16 @@ function cell(item: DescriptionItem, column: number): HTMLElement {
return cellEl;
}
/*** 描述列表：label:value 两栏网格，column 定桌面列数，窄屏由样式表降到单列；bordered 走表格形态 ***/
/*** 描述列表：label:value 两栏网格，column 定桌面列数，窄屏由样式表降到单列；bordered 走表格形态，layout=vertical 把字段名挪到值上方 ***/
export function descriptions(props: DescriptionsProps): HTMLElement {
const column = props.column ?? 3;
const grid = h('div', { class: `ua-desc ua-desc-${props.size ?? 'md'}${props.bordered ? ' is-bordered' : ''}` },
const vertical = props.layout === 'vertical' ? ' is-vertical' : '';
const grid = h('div', { class: `ua-desc ua-desc-${props.size ?? 'md'}${props.bordered ? ' is-bordered' : ''}${vertical}` },
...props.items.map((item) => cell(item, column)));
grid.style.setProperty('--ua-desc-col', String(column)); // 列数交给 CSS 变量，媒体查询可在窄屏覆盖
if (!props.title) return grid;
return h('div', { class: 'ua-desc-wrap' }, h('div', { class: 'ua-desc-title' }, props.title), grid);
const head = props.extra // 标题行：给了操作区就左右分栏，否则保持原来的单标题结构
? h('div', { class: 'ua-desc-head' }, h('div', { class: 'ua-desc-title' }, props.title), h('div', { class: 'ua-desc-extra' }, props.extra))
: h('div', { class: 'ua-desc-title' }, props.title);
return h('div', { class: 'ua-desc-wrap' }, head, grid);
}