Template:CollapsibleUsage：修订间差异

2024年7月20日 (六) 23:45的最新版本

这只是一个折叠内容使用教程, 并不含任何实际的模板功能

因为折叠内容是mediawiki项目本身自带的功能, 不需要自定义模板, 通过官方教程学习使用即可
核心类名(class):
- mw-collapsible 创建折叠对象
- mw-collapsed 默认折叠
- mw-collapsible-content 被折叠的内容区域

用法

<div class="mw-collapsible mw-collapsed" style="border-bottom:1px solid blue" data-expandtext="展开" data-collapsetext="折叠">
<h5 style="color:blue;border-bottom:1px solid blue">标题部分, 也可以用其他元素代替</h5>
<div class="mw-collapsible-content">
你可以在此处放置任何内容
<strong>比如放置一个html标签</strong>
{{StyledHeader
| text = 比如放置一个模板
| header = h3
| bgcolor = #f0f0f0
| color = #333
| border-left = 10px
}}
折叠块标题部分的样式都可以通过上面的div标签的行内CSS样式修改
</div></div>

效果展示

折叠1-使用任何自定义样式的标题, 且内容默认展开

你可以在此处放置任何内容 比如放置一个html标签 折叠块标题部分的样式都可以通过上面的div标签的行内CSS样式修改

比如一个表格
参数名称	参数
接口	USB Type-C
主控芯片	ESP32-S3
屏幕类型	TFT
屏幕控制芯片	Display ：ST7789
屏幕控制芯片	Touch ：CST328
板载设备	姿态传感器：QMI8658
	RTC时钟：PCF85063
	PCM音频解码：PCM5101
	Micro SD
	电池充电管理模块
产品尺寸	73.06（H）x 50.54（V） mm

折叠2-使用模板样式标题, 且内容默认折叠

你可以在此处放置任何内容 比如放置一个html标签

比如一个表格

折叠块标题部分的样式都可以通过上面的div标签的行内CSS样式修改

@@ 第1行： / 第1行： @@
 <noinclude>
 == 这只是一个折叠内容使用教程, 并不含任何实际的模板功能 ==
-* 因为折叠内容是mediawiki项目本身自带的功能, 不需要自定义模板, 通过官方教程学习使用即可
+* 因为折叠内容是mediawiki项目本身自带的功能, 不需要自定义模板, 通过<html><a href="https://www.mediawiki.org/wiki/Manual:Collapsible_elements/zh" target="_blank">官方教程</a></html>学习使用即可
-* 教程链接: https://www.mediawiki.org/wiki/Manual:Collapsible_elements/zh
+* 核心类名(class):
+** mw-collapsible  创建折叠对象
+** mw-collapsed    默认折叠
+** mw-collapsible-content  被折叠的内容区域
 == 用法 ==
 <pre><nowiki>
-<div class="toccolours mw-collapsible" style="width:400px; overflow:auto; color:blue;border-bottom:1px solid black" data-expandtext="展开" data-collapsetext="折叠">
+<div class="mw-collapsible mw-collapsed" style="border-bottom:1px solid blue" data-expandtext="展开" data-collapsetext="折叠">
-<div style="font-weight:bold;line-height:1.6;color:blue">这里是标题</div>
+<h5 style="color:blue;border-bottom:1px solid blue">标题部分, 也可以用其他元素代替</h5>
 <div class="mw-collapsible-content">
-你可以在此处放置任何内容, 样式都可以通过上面的div标签的行内CSS样式修改
+你可以在此处放置任何内容
 <strong>比如放置一个html标签</strong>
 {{StyledHeader
@@ 第17行： / 第20行： @@
 | border-left = 10px
 }}
+折叠块标题部分的样式都可以通过上面的div标签的行内CSS样式修改
 </div></div>
 </nowiki></pre>
 == 效果展示 ==
-<div class="toccolours mw-collapsible" style="width:400px; overflow:auto; color:blue;border-bottom:1px solid black" data-expandtext="展开" data-collapsetext="折叠">
+<div class="mw-collapsible" data-expandtext="展开" data-collapsetext="折叠">
-<div style="font-weight:bold;line-height:1.6;color:blue">这里是标题</div>
+<h5 style="color:blue;border-bottom:1px solid blue">折叠1-使用任何自定义样式的标题, 且内容默认展开</h5>
 <div class="mw-collapsible-content">
-你可以在此处放置任何内容, 样式都可以通过上面的div标签的行内CSS样式修改
+你可以在此处放置任何内容
 <strong>比如放置一个html标签</strong>
+折叠块标题部分的样式都可以通过上面的div标签的行内CSS样式修改
+{| class="wikitable prettytable"
+|+比如一个表格
+!参数名称
+!参数
+|-
+|接口
+|USB Type-C
+|-
+|主控芯片
+|ESP32-S3
+|-
+|屏幕类型
+|TFT
+|-
+| rowspan="2" |屏幕控制芯片
+|Display ：ST7789
+|-
+|Touch ：CST328
+|-
+| rowspan="5" |板载设备
+|姿态传感器 ：QMI8658
+|-
+|RTC时钟 ：PCF85063
+|-
+|PCM音频解码 ：PCM5101
+|-
+|Micro SD
+|-
+|电池充电管理模块
+|-
+|产品尺寸
+|73.06（H）x 50.54（V） mm
+|}
+</div></div>
+<br>
+<div class="mw-collapsible mw-collapsed" data-expandtext="展开" data-collapsetext="折叠">
 {{StyledHeader
-| text = 比如放置一个模板
+| text = 折叠2-使用模板样式标题, 且内容默认折叠
 | header = h3
 | bgcolor = #f0f0f0
@@ 第32行： / 第73行： @@
 | border-left = 10px
 }}
+<div class="mw-collapsible-content">
+你可以在此处放置任何内容
+<strong>比如放置一个html标签</strong>
+{| class="wikitable"
+|+比如一个表格
+| [[File:Upload-by-zh-site.jpg|365x218px| 图片描述]]
+| [[File:Upload-by-zh-site.jpg|365px| 图片描述]]
+| [[File:Upload-by-en-site.jpg|365px| 图片描述]]
+|}
+折叠块标题部分的样式都可以通过上面的div标签的行内CSS样式修改
 </div></div>
 </noinclude>