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:{{{Widths|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|}}}" {{{Attr|}}}>
<includeonly>{{#vardefine:IsFirst|true}}<table cellspacing="0" cellpadding="0" style="width:{{{Widths|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|}}}" {{{Attr|}}}>
   <tr style="width: 100%; font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-shadow: 1px 1px 1px black; height: 2em;{{{TitleStys|}}}">{{#if:{{{Title0|}}}|
   <tr style="width: 100%; font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-shadow: 1px 1px 1px black; height: 2em;{{{TitleStys|}}}">{{#forargs:Title
    <th 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|}}}</th>|}}{{#if:{{{Title1|}}}|
| key
    <th 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|}}}</th>|}}{{#if:{{{Title2|}}}|
| value
    <th style="width:{{{Width2|{{{Width|}}}}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color2|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color2|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty2|}}}" {{{Attr2|}}}>{{{Title2|}}}</th>|}}{{#if:{{{Title3|}}}|
| <nowiki/>
    <th 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|}}}</th>|}}{{#if:{{{Title4|}}}|
<th style="width:{{{Width{{#var:key|}}|{{{Width|}}}}}}; {{#ifeq:{{#var:IsFirst|}}|true|{{#vardefine:IsFirst|false}}|border-left: 1px #000 solid;}}border-bottom: 1px #000 solid; background-color:{{{Color{{#var:key|}}|{{{Color|}}}}}}; background-image: linear-gradient(to bottom, #eee, {{{Color{{#var:key|}}|{{{Color|}}}}}});{{{TitleSty|}}};{{{TitleSty{{#var:key|}}|}}}" {{{Attr{{#var:key|}}|}}}>{{#var:value|}}</th>
    <th 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|}}}</th>|}}{{#if:{{{Title5|}}}|
}}</tr>
    <th 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|}}}</th>|}}{{#if:{{{Title6|}}}|
   <tr style="width: 100%; vertical-align: top;{{{Styles|}}}">{{#forargs:Title
    <th 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|}}}</th>|}}{{#if:{{{Title7|}}}|
| key
    <th 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|}}}</th>|}}{{#if:{{{Title8|}}}|
| value
    <th 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|}}}</th>|}}{{#if:{{{Title9|}}}|
| <nowiki/>
    <th 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|}}}</th>|}}{{#if:{{{Title10|}}}|
<td style="padding: 0.5em;{{{Style|}}};{{{Style{{#var:key}}|}}}">{{{Content{{#var:key}}|}}}</td>
    <th 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|}}}</th>|}}{{#if:{{{Title11|}}}|
}}</tr>
    <th 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|}}}</th>|}}{{#if:{{{Title12|}}}|
    <th 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|}}}</th>|}}{{#if:{{{Title13|}}}|
    <th 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|}}}</th>|}}{{#if:{{{Title14|}}}|
    <th 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|}}}</th>|}}{{#if:{{{Title15|}}}|
    <th 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|}}}</th>|}}
  </tr>
   <tr style="width: 100%; vertical-align: top;{{{Styles|}}}">{{#if:{{{Title0|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style0|}}}">{{{Content0|}}}</td>|}}{{#if:{{{Title1|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style1|}}}">{{{Content1|}}}</td>|}}{{#if:{{{Title2|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style2|}}}">{{{Content2|}}}</td>|}}{{#if:{{{Title3|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style3|}}}">{{{Content3|}}}</td>|}}{{#if:{{{Title4|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style4|}}}">{{{Content4|}}}</td>|}}{{#if:{{{Title5|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style5|}}}">{{{Content5|}}}</td>|}}{{#if:{{{Title6|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style6|}}}">{{{Content6|}}}</td>|}}{{#if:{{{Title7|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style7|}}}">{{{Content7|}}}</td>|}}{{#if:{{{Title8|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style8|}}}">{{{Content8|}}}</td>|}}{{#if:{{{Title9|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style9|}}}">{{{Content9|}}}</td>|}}{{#if:{{{Title10|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style10|}}}">{{{Content10|}}}</td>|}}{{#if:{{{Title11|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style11|}}}">{{{Content11|}}}</td>|}}{{#if:{{{Title12|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style12|}}}">{{{Content12|}}}</td>|}}{{#if:{{{Title13|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style13|}}}">{{{Content13|}}}</td>|}}{{#if:{{{Title14|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style14|}}}">{{{Content14|}}}</td>|}}{{#if:{{{Title15|}}}|
    <td style="padding: 0.5em;{{{Style|}}};{{{Style15|}}}">{{{Content15|}}}</td>|}}
  </tr>
</table></includeonly><noinclude>{{DISPLAYTITLE:Section模板}}
</table></includeonly><noinclude>{{DISPLAYTITLE:Section模板}}
{{Section
{{Section

Revision as of 09:25, 3 September 2014

Section模板
Section模板是由boxsnake编写的UI模板,旨在美化界面。此页即为Section模板示例。
模板参数
  1. 模板参数即传入模板的变量,一般为参数名=参数值{{模板名 | 参数名1=参数值1 | 参数名2=参数值2}}或者参数值{{模板名 | 参数值1 | 参数值2}})。
  2. 后者方式传入的参数,模板用{{{参数序号}}}{{{1}}})调用。前者既可以用{{{参数序号}}}调用,也可以用{{{参数名}}}{{{param}}})调用。
参数
{{
  1. Section模板最多可以有16列,从左到右编号从0到15。
  2. 整体参数:对整个区域进行的设置。
  3. 全局参数:对整个区域内每个元素进行的设置,会覆盖相同的整体参数设置。
  4. 局部参数:对单个元素进行的设置,会覆盖相同的整体参数和局部参数设置。
名称 描述
整体参数:
SectionSty
Section模板整体样式(兼容CSS语法)。
整体参数:
TitleStys
标题栏整体样式(兼容CSS语法),会覆盖相同的SectionSty设置。
整体参数:
Styles
内容区整体样式(兼容CSS语法),会覆盖相同的SectionSty设置。
整体参数:
Widths
整个Section模板额宽度(兼容CSS语法),可以使用em,pt,百分比等,此后不需要分号,如果不指定即为100%。
整体参数:
Attr
整个Section模板的属性附加(兼容HTML语法),如class等属性。
全局参数:
TitleSty
标题栏样式,类似TitleStys,但是此样式设置是针对标题栏中的每个标题进行的设置,而非整个标题栏。此样式设置会覆盖SectionStyTitleStys的相同设置。
全局参数:
Style
内容区样式,类似Styles,但是此样式设置是针对内容区中的每个元素进行设置,而非整个内容区。此样式设置会覆盖SectionStysTitleStys的相同设置。
全局参数:
Color
标题栏颜色(兼容CSS语法),可以使用rgba,#XXXXXX和颜色名称,此后不需要分号。此样式设置会覆盖SectionSty的颜色设置,但是会被TitleStysTitleSty中的颜色设置覆盖。
全局参数:
Width
列宽度(兼容CSS语法),可以使用em,pt,百分比等,此后不需要分号。此样式设置会覆盖SectionSty的颜色设置,但是会被TitleStysTitleSty中的宽度设置覆盖。
  • 注:每一列的宽度是由标题栏宽度决定的,所以如果隐藏了标题栏,请设置内容区宽度。
局部参数:
TitleSty0 ... TitleSty15
0-15列标题栏样式(兼容CSS语法),会覆盖SectionStyTitleStysTitleSty的对应设置,同时会覆盖ColorColor0 ... Color15WidthWidth0 ... Width15的颜色和宽度设置。
局部参数:
Style0 ... Style15
0-15列内容区样式(兼容CSS语法),会覆盖SectionStyStylesStyle的对应设置。
局部参数:
Attr0 ... Attr15
0-15列标题栏附加属性(兼容HTML语法),可以设置如colspan、rowspan之类的附加属性。
局部参数:
Title0 ... Title15
0-15列标题栏内容。
局部参数:
Content0 ... Content15
0-15列内容区内容。
  • 注:如果要在内容区添加表格或其他区域内容,请使用<span> ... </span><span style="display:none">{{</span> ... <span style="display:none">}}</span>(后者可约束MediaWiki语法表格)。
}}
其他注意事项和提示
  1. 为了和上下的Section模板结合,Section模板默认是没有底部边框的,因此在需要的时候用SectionSty设置。
  2. 为了和左边的Section列结合,从第一列开始的列标题均有左边框,如果需要将非0列作为最左侧列,请用TitleStyN将对应列表标题的左边框去除。
  3. 标题栏下的横线为标题栏元素属性,而非标题栏整体属性。
其他示例
示例1
示例1
{{Section
| SectionSty=border: 2px #ccc solid; border-radius: 5px;
| Color0=lightblue
| Title0=示例1
| Content0=示例1
}}