Template:Section: Difference between revisions

From Elwiki
VisualWikitext
mNo edit summary
mNo edit summary
Line 2: Line 2:
   <tr style="font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-shadow: 1px 1px 1px black; height: 2em;{{{TitleStys|}}}">{{#if:{{{Title0|}}}|
   <tr style="font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-shadow: 1px 1px 1px black; height: 2em;{{{TitleStys|}}}">{{#if:{{{Title0|}}}|
     <td style="width:{{{Width0|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color0|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color0|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty0|}}}" {{{Attr0|}}}>{{{Title0|}}}</td>|}}{{#if:{{{Title1|}}}|
     <td style="width:{{{Width0|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color0|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color0|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty0|}}}" {{{Attr0|}}}>{{{Title0|}}}</td>|}}{{#if:{{{Title1|}}}|
     <td style="width:{{{Width1|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color1|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color1|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty1|}}}" {{{Attr1|}}}>{{{Title1|}}}</td>|}}{{#if:{{{Title2|}}}|
     <td style="width:{{{Width1|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color1|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color1|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty1|}}}" {{{Attr1|}}}>{{{Title1|}}}</td>|}}{{#if:{{{Title2|}}}|
     <td style="width:{{{Width2|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color2|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color2|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty2|}}}" {{{Attr2|}}}>{{{Title2|}}}</td>|}}{{#if:{{{Title3|}}}|
     <td style="width:{{{Width2|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color2|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color2|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty2|}}}" {{{Attr2|}}}>{{{Title2|}}}</td>|}}{{#if:{{{Title3|}}}|
     <td style="width:{{{Width3|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color3|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color3|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty3|}}}" {{{Attr3|}}}>{{{Title3|}}}</td>|}}{{#if:{{{Title4|}}}|
     <td style="width:{{{Width3|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color3|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color3|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty3|}}}" {{{Attr3|}}}>{{{Title3|}}}</td>|}}{{#if:{{{Title4|}}}|
     <td style="width:{{{Width4|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color4|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color4|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty4|}}}" {{{Attr4|}}}>{{{Title4|}}}</td>|}}{{#if:{{{Title5|}}}|
     <td style="width:{{{Width4|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color4|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color4|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty4|}}}" {{{Attr4|}}}>{{{Title4|}}}</td>|}}{{#if:{{{Title5|}}}|
     <td style="width:{{{Width5|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color5|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color5|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty5|}}}" {{{Attr5|}}}>{{{Title5|}}}</td>|}}{{#if:{{{Title6|}}}|
     <td style="width:{{{Width5|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color5|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color5|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty5|}}}" {{{Attr5|}}}>{{{Title5|}}}</td>|}}{{#if:{{{Title6|}}}|
     <td style="width:{{{Width6|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color6|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color6|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty6|}}}" {{{Attr6|}}}>{{{Title6|}}}</td>|}}{{#if:{{{Title7|}}}|
     <td style="width:{{{Width6|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color6|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color6|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty6|}}}" {{{Attr6|}}}>{{{Title6|}}}</td>|}}{{#if:{{{Title7|}}}|
     <td style="width:{{{Width7|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color7|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color7|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty7|}}}" {{{Attr7|}}}>{{{Title7|}}}</td>|}}{{#if:{{{Title8|}}}|
     <td style="width:{{{Width7|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color7|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color7|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty7|}}}" {{{Attr7|}}}>{{{Title7|}}}</td>|}}{{#if:{{{Title8|}}}|
     <td style="width:{{{Width8|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color8|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color8|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty8|}}}" {{{Attr8|}}}>{{{Title8|}}}</td>|}}{{#if:{{{Title9|}}}|
     <td style="width:{{{Width8|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color8|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color8|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty8|}}}" {{{Attr8|}}}>{{{Title8|}}}</td>|}}{{#if:{{{Title9|}}}|
     <td style="width:{{{Width9|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color9|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color9|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty9|}}}" {{{Attr9|}}}>{{{Title9|}}}</td>|}}{{#if:{{{Title10|}}}|
     <td style="width:{{{Width9|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color9|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color9|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty9|}}}" {{{Attr9|}}}>{{{Title9|}}}</td>|}}{{#if:{{{Title10|}}}|
     <td style="width:{{{Width10|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color10|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color10|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty10|}}}" {{{Attr10|}}}>{{{Title10|}}}</td>|}}{{#if:{{{Title11|}}}|
     <td style="width:{{{Width10|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color10|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color10|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty10|}}}" {{{Attr10|}}}>{{{Title10|}}}</td>|}}{{#if:{{{Title11|}}}|
     <td style="width:{{{Width11|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color11|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color11|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty11|}}}" {{{Attr11|}}}>{{{Title11|}}}</td>|}}{{#if:{{{Title12|}}}|
     <td style="width:{{{Width11|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color11|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color11|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty11|}}}" {{{Attr11|}}}>{{{Title11|}}}</td>|}}{{#if:{{{Title12|}}}|
     <td style="width:{{{Width12|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color12|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color12|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty12|}}}" {{{Attr12|}}}>{{{Title12|}}}</td>|}}{{#if:{{{Title13|}}}|
     <td style="width:{{{Width12|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color12|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color12|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty12|}}}" {{{Attr12|}}}>{{{Title12|}}}</td>|}}{{#if:{{{Title13|}}}|
     <td style="width:{{{Width13|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color13|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color13|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty13|}}}" {{{Attr13|}}}>{{{Title13|}}}</td>|}}{{#if:{{{Title14|}}}|
     <td style="width:{{{Width13|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color13|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color13|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty13|}}}" {{{Attr13|}}}>{{{Title13|}}}</td>|}}{{#if:{{{Title14|}}}|
     <td style="width:{{{Width14|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color14|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color14|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty14|}}}" {{{Attr14|}}}>{{{Title14|}}}</td>|}}{{#if:{{{Title15|}}}|
     <td style="width:{{{Width14|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color14|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color14|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty14|}}}" {{{Attr14|}}}>{{{Title14|}}}</td>|}}{{#if:{{{Title15|}}}|
     <td style="width:{{{Width15|{{{Width|}}}}}}; border-bottom: 1px #000 solid; background-color:{{{Color15|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color15|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty15|}}}" {{{Attr15|}}}>{{{Title15|}}}</td>|}}
     <td style="width:{{{Width15|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color15|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color15|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty15|}}}" {{{Attr15|}}}>{{{Title15|}}}</td>|}}
   </tr>
   </tr>
   <tr style="vertical-align: top;{{{Styles|}}}">{{#if:{{{Title0|}}}|
   <tr style="vertical-align: top;{{{Styles|}}}">{{#if:{{{Title0|}}}|
Line 47: Line 47:
| Title0=模板参数
| Title0=模板参数
| Content0=<span style="display:none">{{</span>
| Content0=<span style="display:none">{{</span>
模板参数即传入模板的变量，一般为'''''<code>参数名=参数值</code>'''''（'''<code><nowiki>{{模板名 | 参数名1=参数值1 | 参数名2=参数值2}}</nowiki></code>）'''或者'''''<code>参数值</code>'''''（'''<code><nowiki>{{模板名 | 参数值1 | 参数值2}}</nowiki></code>'''）。<br>
#模板参数即传入模板的变量，一般为'''''<code>参数名=参数值</code>'''''（'''''<code><nowiki>{{模板名 | 参数名1=参数值1 | 参数名2=参数值2}}</nowiki></code>）'''''或者'''''<code>参数值</code>'''''（'''''<code><nowiki>{{模板名 | 参数值1 | 参数值2}}</nowiki></code>'''''）。
前者方式传入的参数，模板用
#后者方式传入的参数，模板用'''''<code><nowiki>{{{参数序号}}}</nowiki></code>'''''（'''''<code><nowiki>{{{1}}}</nowiki></code>'''''）调用。前者既可以用'''''<code><nowiki>{{{参数序号}}}</nowiki></code>'''''调用，也可以用'''''<code><nowiki>{{{参数名}}}</nowiki></code>'''''（'''''<code><nowiki>{{{param}}}</nowiki></code>'''''）调用。
模板，模板通过变量名调用变量的值（比如'''''a=2'''''，那么模板调用a就会显示2），后者传入模板的话，模板根据传入值的序列用序列号调用（第一个序号为1，第二个为2，依次类推）。
<span style="display:none">}}</span>
*'''我如何传入模板参数？'''
}}
<span style="display:inline">}}</span>}}
<nowiki>{{模板名
| 参数1
| 参数名2=参数值2
}}</nowiki>
*模板参数使用“|”分割。
=== 整体参数 ===
==== StyleSec ====
*此参数用于为整个Section框架增加样式，样式写法兼容CSS语句。并且，此样式会覆盖之前已有的同名样式。
==== StyleTitle ====
*此参数用于为整个Section表头增加样式，样式写法兼容CSS语句。并且，此样式会覆盖之前已有的同名样式。
==== StyleContent ====
*此参数用于为整个Section内容区增加样式，样写法兼容CSS语句。并且，此样式会覆盖之前已有的同名样式。
=== 个体参数 ===
*Section模板可以由多列组成，每个列在此维基页中称为''“个体”''。一个Section模板最多可以拥有16个个体（列）。
*只要有个体对应的标题参数存在且不为空值，个体就会在Section中显示。
==== Title ====
*标题参数（即显示在Section头部的文字），参数名依次为'''Title、Title1、Title2、...、Title15'''（最多16个）。
==== Content ====
*内容参数，参数名称为'''Content'''到'''Content15'''（规则同'''Title'''参数）。对应个体的内容。
==== Width ====
*宽度参数，参数名称为'''Width'''到'''Width15'''（规则同'''Title'''参数）。指定对应个体的宽度，可以使用em，pt等，也可以使用百分比，不需要在末尾添加分号。如果不指定将由浏览器自动调整。
==== Color ====
*颜色参数，参数名称为'''Color'''到'''Color15'''（规则同'''Title'''参数）。指定对应个体标签部分的背景颜色。可以使用rgba函数，以#开头的颜色值，或者是CSS颜色值（如red，white等）。注意，颜色后不要添加分号。
==== StyleT ====
*标题附加样式，参数名称为'''StyleT'''到'''StyleT15'''（T的意思为Title，规则同'''Title'''参数）。作用类似整体参数'''StyleSec'''、'''StyleTitle'''和'''StyleContent'''，给对应的个体标题附加样式。样式写法兼容CSS语句。并且，此样式会覆盖之前已有的同名样式，以及'''StyleSec'''和'''StyleTitle'''中定义的相同样式。
==== Style ====
*内容附加样式，参数名称为'''Style'''到'''Style15'''（规则同'''Title'''参数）。对应个体内容区域的附加样式，作用和'''StyleT'''类似。
==== Attr ====
*首元素附加属性。此参数设置首元素（也就是'''Title'''对应的个体），可以为其添加类似colspan和rowspan之类的属性。
== 其他注意事项和提示 ==
*为了Section之间的接合，默认情况下，Section是没有底边的。如果需要请进行StyleSec调整。
*如果为Section设置了圆角，注意同时要调整标题和底部样式，否则对应区域可能会超出Section边框。
*标题底部的黑色线条为个体标题的样式（'''StyleT'''），而非标题的整体样式。
*从'''Title1'''对应个体开始，左侧有黑色边框，为了和之前的个体接合。如果需要跳过'''Title'''表示的个体，将其他个体作为首个个体，记得要将左侧边框去掉。
*标题参数存在但为空不会显示对应个体，所以如果需要空标题的个体，请在标题处使用空白对象或者不可见元素。
*对于某些内容，在等号之后输入会发生错误，需要在内容外加上<code><nowiki><span style="display: none">{{</span></nowiki></code>和<code><nowiki><span style="display: none">}}</span></nowiki></code>。
*内容区域之间默认是没有黑线的，如果需要黑线请使用'''Style'''参数。
*由于个体宽度是由标题宽度决定的，所以当隐藏标题后，应该设置内容样式而不是使用Width参数。

Revision as of 03:23, 24 July 2014


Section模板
Section模板是由boxsnake编写的UI模板，旨在美化界面。此页即为Section模板示例。
模板参数
{{
  1. 模板参数即传入模板的变量，一般为参数名=参数值（{{模板名 | 参数名1=参数值1 | 参数名2=参数值2}}）或者参数值（{{模板名 | 参数值1 | 参数值2}}）。
  2. 后者方式传入的参数，模板用{{{参数序号}}}（{{{1}}}）调用。前者既可以用{{{参数序号}}}调用，也可以用{{{参数名}}}（{{{param}}}）调用。
}}
Retrieved from "https://elwiki.net:443/wiki/index.php?title=Template:Section&oldid=140511"