Template:Section: Difference between revisions
From Elwiki
mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
<includeonly><table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0; margin: 0; font-size: 1em; line-height: 1.5em; word-break: break-all; border: 1px #000 solid; border-bottom: none; border-sapcing: 0;{{{SectionSty|}}}"> | <includeonly><table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0; margin: 0; font-size: 1em; line-height: 1.5em; word-break: break-all; border: 1px #000 solid; border-bottom: none; border-sapcing: 0;{{{SectionSty|}}}"> | ||
<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 | <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:{{ | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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>|}} | ||
</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>参数值</code>''''' | 模板参数即传入模板的变量,一般为'''''<code>参数名=参数值</code>'''''('''<code><nowiki>{{模板名 | 参数名1=参数值1 | 参数名2=参数值2}}</nowiki></code>)'''或者'''''<code>参数值</code>'''''('''<code><nowiki>{{模板名 | 参数值1 | 参数值2}}</nowiki></code>''')。<br> | ||
前者方式传入的参数,模板用 | 前者方式传入的参数,模板用 | ||
模板,模板通过变量名调用变量的值(比如'''''a=2''''',那么模板调用a就会显示2),后者传入模板的话,模板根据传入值的序列用序列号调用(第一个序号为1,第二个为2,依次类推)。 | 模板,模板通过变量名调用变量的值(比如'''''a=2''''',那么模板调用a就会显示2),后者传入模板的话,模板根据传入值的序列用序列号调用(第一个序号为1,第二个为2,依次类推)。 |
Revision as of 02:06, 24 July 2014
Section模板 |
Section模板是由boxsnake编写的UI模板,旨在美化界面。此页即为Section模板示例。 |
模板参数 |
模板参数即传入模板的变量,一般为
|
{{模板名 | 参数1 | 参数名2=参数值2 }}
- 模板参数使用“|”分割。
整体参数
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表示的个体,将其他个体作为首个个体,记得要将左侧边框去掉。
- 标题参数存在但为空不会显示对应个体,所以如果需要空标题的个体,请在标题处使用空白对象或者不可见元素。
- 对于某些内容,在等号之后输入会发生错误,需要在内容外加上
<span style="display: none">{{</span>
和<span style="display: none">}}</span>
。 - 内容区域之间默认是没有黑线的,如果需要黑线请使用Style参数。
- 由于个体宽度是由标题宽度决定的,所以当隐藏标题后,应该设置内容样式而不是使用Width参数。