模块暂不可用: 此动态功能尚未由只读迁移站支持。
WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:v2para)
概述
本组件是对行内折叠模块的改进,不过基于定向改造的定向内容显隐而非传统的多重折叠模块,移除了原行内折叠按钮两侧的 空格 并提供了更多的自定义空间。使用方法
+ 点击展开参数列表
默认值不是无的参数都是可选的!
| 参数 | 效果 | 可接受值 | 默认值 |
|---|---|---|---|
| incol | 激活基础模式 | --] | 无 |
| incol-start | 激活进阶模式头 | --] | 无 |
| incol-end | 激活进阶模式尾 | --] | 无 |
| show | 展开按钮文本 | 任意字符串 | 显示 |
| hide | 隐藏按钮文本 | 任意字符串 | {$show} |
| before | 折叠前共用文本 | 任意字符串 | 空 |
| after | 折叠后共用文本 | 任意字符串 | 空 |
| coltext1 | 展开前文本-按钮前 | 任意字符串 | 空 |
| coltext2 | 展开前文本-按钮后 | 任意字符串 | 空 |
| coltext3 | 展开后文本-按钮前 | 任意字符串 | 空 |
| coltext4 | 展开后文本-按钮后 | 任意字符串 | 空 |
| content | 折叠内容 | 任意字符串 | 空 |
| cont | 折叠内容 | 任意字符串 | 空 |
| fold | 是否默认折叠内容 | y/no | y |
基础模式
直接引用本组件不会对页面产生任何影响,启用参数incol激活组件的基础模式:基础模式下,组件结构如下:[[include :scp-wiki-cn:component:incol incol=--]]]
| 折叠前共用文本(before) | 展开前文本1(coltext1) | 展开按钮文本(show) | 展开前文本2(coltext2) | 折叠后共用文本(after) |
| 折叠前共用文本(before) | 展开后文本1(coltext3) | 隐藏按钮文本(hide) | 展开后文本2(coltext4) | 折叠后共用文本(after) |
| 折叠内容(content) | ||||
扩展模式
扩展模式用于容纳部分与include冲突的需换行语法,先放入组件头:[[include :scp-wiki-cn:component:incol incol-start=--]
|before=折叠前共用文本
|show=展开按钮文本
|hide=隐藏按钮文本
|coltext1=展开前文本1
|coltext2=展开前文本2
|coltext3=展开后文本1
|coltext4=展开后文本2
|after=折叠后共用文本]]
[[include :scp-wiki-cn:component:incol incol-end=--]]]
示例
[[include :scp-wiki-cn:component:incol incol=--]
|show=点击这里可以展开——
|hide=点击隐藏
|coltext1=文本可以应用部分[[span style="color: red"]]维基语法[[/span]]!
|coltext2=也可以插入@@[*https://scpper.mer.run/ 链接]@@
|coltext3=设置为@@@@便可以隐藏该项内容
|coltext4=@@@@
|before=-这段文本在折叠前一直显示-
|after=。
|content=附加折叠内容]]
WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)
如参数列表所言,默认值不是无的参数都是可选的,适当隐藏/略去某些参数可以达成有趣的效果。
[[include :scp-wiki-cn:component:incol incol=--]
|show=简单的行内折叠
|hide=@@@@
|coltext4=有趣的行内折叠
|before=这是一条
|after=。]]
WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)
需要换行的语法是无法插入content或cont的,而扩展模式可以解决这一点。
[[include :scp-wiki-cn:component:incol incol-start=--]
|before=我在行内想
|show=展开这个表格
|hide=折叠这个表格
|after=!]]
||~ 这是 ||~ 表格 ||
|| 你应该 || 早就知道 ||
|||| 怎么写这个了吧 ||
[[include :scp-wiki-cn:component:incol incol-end=--]]]
WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)
| 这是 | 表格 |
|---|---|
| 你应该 | 早就知道 |
| 怎么写这个了吧 | |
WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)
使用扩展模式亦可以实现嵌套折叠。
注意事项
- 由于未解决的技术问题,在编辑预览模式下组件生成的折叠按钮可能会无响应,保存页面后便不会有此问题。
- 由于[[module CSS]]的局限,初次引用本组件的页面在保存前无法预览组件内容,保存页面即可。
组件源代码
WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)
/* 逻辑主体 */
.hide-y > * > .folded > :is(.foldable-list-container, .etster) > .ab,
.hide-y > * > .unfolded > :is(.foldable-list-container, .etster) > .af,
.hide-no > * > .unfolded > :is(.foldable-list-container, .etster) > .ab,
.hide-no > * > .folded > :is(.foldable-list-container, .etster) > .af,
.foldable-cont .ab > span,
.foldable-cont .af > span,
.foldable-content > br:first-child,
.hide-y > * > .folded > .foldable-content,
.hide-no > * > .unfolded > .foldable-content {
display: none;
}
.foldable-cont :is(.ab, .af) > span:is(.s, [style*=":"]) {
display: inline;
}
.foldable-cont :is(ul, li) {
display: block !important;
line-height: normal;
list-style: none;
margin: 0;
padding: 0;
}
.foldable-cont .foldable-list-container, .foldable-cont .etster {
pointer-events: none;
user-select: none;
}
.foldable-cont .etster {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.foldable-cont .etster > :is(.af, .ab),
.foldable-cont .foldable-list-container .ftext {
visibility: hidden;
}
.foldable-cont .etster .ftext, .foldable-list-container :is(.af, .ab) a {
pointer-events: all;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}[!-- 折叠相关 --]
[!--{$incol}
[[div_ class="foldable-cont hide-{$fold}"]]
[[ul]][[li class="folded" style="position: relative;"]]
[[div_ class="etster"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab" style="visibility: hidden;"]]{$coltext3}[[span class="s"]]{$hide}[[/span]]{$coltext4}[[/span]][[span class="ftext" style="visibility: hidden;"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-list-container"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="{$show} s"]][# {$show}][[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="{$hide} s"]][# {$hide}][[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]][[/div]]
[[div_ class="etster"]]
[[span class="ftext" style="visibility: hidden;"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="s"]]{$hide}[[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-content"]]
@@@@
{$content}
[[/div]][[/li]][[/ul]]
[[/div]]
[!----]
[!--{$incol-start}
[[div_ class="foldable-cont hide-{$fold}"]]
[[ul]][[li class="folded" style="position: relative;"]]
[[div_ class="etster"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab" style="visibility: hidden;"]]{$coltext3}[[span class="s"]]{$hide}[[/span]]{$coltext4}[[/span]][[span class="ftext" style="visibility: hidden;"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-list-container"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="{$show} s"]][# {$show}][[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="{$hide} s"]][# {$hide}][[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]][[/div]]
[[div_ class="etster"]]
[[span class="ftext" style="visibility: hidden;"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="s"]]{$hide}[[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-content"]]
@@@@
[!----]
[!--{$incol-end}
[[/div]][[/li]][[/ul]]
[[/div]]
[!----]WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)






