iter(g282): 代码块支持长行折行
This commit is contained in:
@@ -26,5 +26,5 @@ export function codeBlock(props: CodeBlockProps): HTMLElement {
|
||||
title ? h('span', { class: 'ua-code-title' }, title) : h('span', null, ''),
|
||||
props.copyable === false ? null : copyButton({ text: props.code, label: '复制', size: 'sm', variant: 'ghost', onCopied: props.onCopy }),
|
||||
);
|
||||
return h('div', { class: 'ua-code', role: 'group', 'aria-label': props.ariaLabel ?? '代码块' }, head, body);
|
||||
return h('div', { class: `ua-code${props.wrap ? ' is-wrap' : ''}`, role: 'group', 'aria-label': props.ariaLabel ?? '代码块' }, head, body); // is-wrap 只改折行,行号与缩进不动
|
||||
}
|
||||
|
||||
@@ -1047,6 +1047,7 @@ export interface CodeBlockProps {
|
||||
lang?: string; // 语言名(如 ts / css);无 title 时作头部标题
|
||||
title?: string; // 头部标题(如文件名);优先于 lang
|
||||
lineNumbers?: boolean; // 是否显示行号列;缺省 true(单行代码自动省略)
|
||||
wrap?: boolean; // 长行是否折行(窄屏 / 长日志场景);缺省 false(横向滚动,行号保持对齐)
|
||||
maxHeight?: number; // 代码区最高高度(px),超出在框内滚动;缺省不限高
|
||||
copyable?: boolean; // 右上角是否出现复制按钮;缺省 true
|
||||
onCopy?: (text: string) => void; // 复制成功回调(参数为实际写入剪贴板的内容)
|
||||
|
||||
@@ -4155,6 +4155,11 @@
|
||||
"t": "boolean",
|
||||
"d": "是否显示行号列;缺省 true(单行代码自动省略)"
|
||||
},
|
||||
{
|
||||
"n": "wrap",
|
||||
"t": "boolean",
|
||||
"d": "长行是否折行(窄屏 / 长日志场景);缺省 false(横向滚动,行号保持对齐)"
|
||||
},
|
||||
{
|
||||
"n": "maxHeight",
|
||||
"t": "number",
|
||||
@@ -4182,7 +4187,8 @@
|
||||
"头部标题用 title(文件名)或 lang(语言名),两者都给时 title 优先",
|
||||
"长代码给 maxHeight,超出在框内滚动;滚动条已是统一细条,暗色下不会露原生亮条",
|
||||
"单行代码自动省掉行号列;想彻底不要行号传 lineNumbers: false",
|
||||
"不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉"
|
||||
"不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉",
|
||||
"窄屏或长日志要折行就传 wrap: true:长行按容器宽度换行,行号仍只占首行左侧;对齐要求高的代码别开,折行会让缩进失去参照"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -5865,3 +5865,9 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
|
||||
margin-left: auto;
|
||||
color: var(--ua-color-text-faint);
|
||||
}
|
||||
|
||||
/* 折行模式:长行按容器宽度换行,行号仍只占首行左侧——适合窄屏读日志,不适合对齐要求高的代码 */
|
||||
.ua-code.is-wrap .ua-code-line {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user