行内折叠模块

[[iftags +组件]] [[>]] [[module rate]] [[/>]] 这是**行内折叠**模块。 [[div class="inline-colmod"]] 一个 [[include :scp-wiki-cn:component:coltop show = 行内折叠| hide= | nohide = true ]] 酷酷的 [[include :scp-wiki-cn:component:colend]] 示例。 [[/div]] [[div style="height: .8em"]] [[/div]] [[div class="inline-colmod"]] 当然， [[include :scp-wiki-cn:component:coltop show = 你也可以让它包含换行| hide= | nohide = true ]] 它也可以换行。 就像这样 [[include :scp-wiki-cn:component:colend]] 。 [[/div]] 它在需要权限验证的地方很有用，比如特殊收容措施中仅限相关人员查看的部分。 +++ 使用方法 在需要行内折叠处放置以下代码： [[div class="code"]] @@[[div class="inline-colmod"]]@@ **折叠块前的文字** @@[[include component:inline-colmod show=@@**##blue|点击前显示的文字##**@@ | content=@@**##green|点击后显示的文字##**@@]]@@ **折叠块后的文字** @@[[/div]]@@ [[/div]] 注意，@@[[include ...]]@@必须独立成行。 +++ 特别的，如果你想要连续使用它 你需要在两个之间加上一些别的东西，比如@@~~~~@@或者四个@符号，也可以是下面这段代码，不同的方式产生的效果不同。 [[code]] [[div style="height: .8em"]] [[/div]] [[/code]] +++ 如果你想要在特殊的位置换行 首先在代码顶部加入这段代码引入行内折叠模块的CSS，然后从下面选择你需要的方式： [[div class="code"]] @@[[div style="display: none;"]]@@ @@[[include :scp-wiki-cn:component:inline-colmod css-only=true]]@@ @@[[/div]]@@ [[/div]] [[div class="inline-colmod"]] 在头部换行， [[include :scp-wiki-cn:component:coltop show = 看看效果，| hide= | nohide = true ]] @@@@ 就像这样， [[include :scp-wiki-cn:component:colend]] 在头部换行。 [[/div]] [[div class="code"]] @@[[div class="inline-colmod"]]@@ 在头部换行， @@[[include :scp-wiki-cn:component:coltop show = 看看效果，| hide= | nohide = true ]]@@ @@@@@@@@ 就像这样， @@[[include :scp-wiki-cn:component:colend]]@@ 在头部换行。 @@[[/div]]@@ [[/div]] [[div class="inline-colmod"]] 在末尾换行， [[include :scp-wiki-cn:component:coltop show = 看看效果，| hide= | nohide = true ]] 就像这样 @@@@ [[include :scp-wiki-cn:component:colend]] 在末尾换行。 [[/div]] [[div class="code"]] @@[[div class="inline-colmod"]]@@ 在末尾换行， @@[[include :scp-wiki-cn:component:coltop show = 看看效果，| hide= | nohide = true ]]@@ 就像这样 @@@@@@@@ @@[[include :scp-wiki-cn:component:colend]]@@ 在末尾换行。 @@[[/div]]@@ [[/div]] 一种我不知道该怎么形容的用法： [[div class="inline-colmod"]] [[include :scp-wiki-cn:component:coltop show = 看看效果| hide= | nohide = true ]] 就像这样 [[include :scp-wiki-cn:component:colend]] [[/div]] 虽然但是，这显得很奇怪。 [[div class="code"]] 一种我不知道该怎么形容的用法： @@[[div class="inline-colmod"]]@@ @@[[include :scp-wiki-cn:component:coltop show = 看看效果| hide= | nohide = true ]]@@ 就像这样 @@[[include :scp-wiki-cn:component:colend]]@@ @@[[/div]]@@ 虽然但是，这显得很奇怪。 [[/div]] +++ 技术细节 它基于[[[component:colstyle|]]]并配以CSS的「display: inline」属性。 +++ 鸣谢 感谢[[*user hoah2333]]将此组件整合为一个页面！ [[/iftags]] [[include :scp-wiki-cn:component:coltop show = {$show} | hide= | nohide = true ]] {$content} [[include :scp-wiki-cn:component:colend]] [[module CSS]] /* Inline Collapsible Module  * by Tachiabana Yuuki  * CC BY-SA 3.0 */ .inline-colmod, .inline-colmod > p, .inline-colmod > .colmod-block, .inline-colmod .colmod-block > ul, .inline-colmod ul > .folded, .inline-colmod .folded > .colmod-link-top, .inline-colmod .folded > .colmod-link-top > .foldable-list-container, .inline-colmod .folded .foldable-list-container > a:first-child {     display: inline; } .inline-colmod .unfolded, .inline-colmod .unfolded > .colmod-link-top, .inline-colmod .unfolded > .colmod-content, .inline-colmod .unfolded > .colmod-content > p, .inline-colmod .unfolded > .colmod-content > .foldable-list-container, .inline-colmod .unfolded .foldable-list-container > a:last-child {     display: inline; } .inline-colmod .unfolded > .colmod-link-top > .foldable-list-container > a:first-child, .inline-colmod .colmod-block li > div:last-of-type {     display: none; } [[/module]]