Template:Section: Difference between revisions

From Elwiki
VisualWikitext
mNo edit summary
mNo edit summary
Line 3: Line 3:
| key
| key
| value
| value
| {{#ifexpr:{{#if:{{#var:value|}}|1|0}} and {{Isnumeric|{{#var:key|}}}}|<th style="width:{{{Width{{#var:key|}}|{{{Width|}}}}}}; {{#ifeq:{{#var:key|}}|0||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|}}|}}}><h3>{{#var:value|}}</h3></th>}}}}</tr>
| {{#ifexpr:{{#if:{{#var:value|}}|1|0}} and {{Isnumeric|{{#var:key|}}}}|<th style="width:{{{Width{{#var:key|}}|{{{Width|}}}}}}; {{#ifeq:{{#var:key|}}|0||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>}}}}</tr>
   <tr style="width: 100%; vertical-align: top;{{{Styles|}}}">{{#forargs:Title
   <tr style="width: 100%; vertical-align: top;{{{Styles|}}}">{{#forargs:Title
| key
| key
| value
| value
| {{#ifexpr:{{#if:{{#var:value|}}|1|0}} and {{Isnumeric|{{#var:key|}}}}|<td id="{{#var:key}}" style="padding: 0.5em;{{{Style|}}};{{{Style{{#var:key|}}|}}}">{{{Content{{#var:key|}}|}}}</td>}}}}</tr>
| {{#ifexpr:{{#if:{{#var:value|}}|1|0}} and {{Isnumeric|{{#var:key|}}}}|<td id="{{#var:key}}" style="padding: 0.5em;{{{Style|}}};{{{Style{{#var:key|}}|}}}">{{{Content{{#var:key|}}|}}}</td>}}}}</tr>
</table></includeonly><noinclude>{{DISPLAYTITLE:Section模板}}
</table></includeonly><noinclude>{{DISPLAYTITLE:Section}}
{{Section
{{Section
| Color0=lightgreen
| Color0=lightgreen
| Title0=Section模板
| Title0=Section Template
| Content0=Section模板是由[[User:boxsnake|boxsnake]]编写的UI模板，旨在美化界面。此页即为Section模板示例。
| Content0=Section is an UI template developed by '''[[User:boxsnake|boxsnake]]''', in order to enhance the UI design. Also, this is an example of Section
}}
{{Section
| Color0=blue
| Title0=模板参数
| Content0=<span>
#模板参数即传入模板的变量，一般为'''''<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>'''''）调用。
</span>
}}
}}
{{Section
{{Section
| Color0=purple
| Color0=purple
| Title0=参数
| Title0=Parameters
| Content0=<span style="display:none">{{</span>
#Section模板最多可以有16列，从左到右编号从0到15。
#'''整体参数：'''对整个区域进行的设置。
#'''全局参数：'''对整个区域内每个元素进行的设置，会覆盖相同的整体参数设置。
#'''局部参数：'''对单个元素进行的设置，会覆盖相同的整体参数和局部参数设置。
{| width="100%" border="1px" style="border-collapse: collapse;"
| width="25%" | '''名称'''
|'''描述'''
|-
|'''整体参数：<br>''<code>SectionSty</code>'''''
|Section模板整体样式（兼容CSS语法）。
|-
|'''整体参数：<br>''<code>TitleStys</code>'''''
|标题栏整体样式（兼容CSS语法），会覆盖相同的'''''<code>SectionSty</code>'''''设置。
|-
|'''整体参数：<br>''<code>Styles</code>'''''
|内容区整体样式（兼容CSS语法），会覆盖相同的'''''<code>SectionSty</code>'''''设置。
|-
|'''整体参数：<br>''<code>Widths</code>'''''
|整个Section模板额宽度（兼容CSS语法），可以使用em，pt，百分比等，此后不需要分号，如果不指定即为100%。
|-
|'''整体参数：<br>''<code>Attr</code>'''''
|整个Section模板的属性附加（兼容HTML语法），如class等属性。
|-
|'''全局参数：<br>''<code>TitleSty</code>'''''
|标题栏样式，类似'''''<code>TitleStys</code>'''''，但是此样式设置是针对标题栏中的每个标题进行的设置，而非整个标题栏。此样式设置会覆盖'''''<code>SectionSty</code>'''''和'''''<code>TitleStys</code>'''''的相同设置。
|-
|'''全局参数：<br>''<code>Style</code>'''''
|内容区样式，类似'''''<code>Styles</code>'''''，但是此样式设置是针对内容区中的每个元素进行设置，而非整个内容区。此样式设置会覆盖'''''<code>SectionStys</code>'''''和'''''<code>TitleStys</code>'''''的相同设置。
|-
|'''全局参数：<br>''<code>Color</code>'''''
|标题栏颜色（兼容CSS语法），可以使用rgba，#XXXXXX和颜色名称，此后不需要分号。此样式设置会覆盖'''''<code>SectionSty</code>'''''的颜色设置，但是会被'''''<code>TitleStys</code>'''''和'''''<code>TitleSty</code>'''''中的颜色设置覆盖。
|-
|'''全局参数：<br>''<code>Width</code>'''''
|列宽度（兼容CSS语法），可以使用em，pt，百分比等，此后不需要分号。此样式设置会覆盖'''''<code>SectionSty</code>'''''的颜色设置，但是会被'''''<code>TitleStys</code>'''''和'''''<code>TitleSty</code>'''''中的宽度设置覆盖。
*'''注：'''每一列的宽度是由标题栏宽度决定的，所以如果隐藏了标题栏，请设置内容区宽度。
|-
|'''局部参数：<br>''<code>TitleSty0</code>'' ... ''<code>TitleSty15</code>'''''
|0-15列标题栏样式（兼容CSS语法），会覆盖'''''<code>SectionSty</code>'''''，'''''<code>TitleStys</code>'''''和'''''<code>TitleSty</code>'''''的对应设置，同时会覆盖'''''<code>Color</code>'''''，'''''<code>Color0</code>'' ... ''<code>Color15</code>'''''，'''''<code>Width</code>'''''和'''''<code>Width0</code>'' ... ''<code>Width15</code>'''''的颜色和宽度设置。
|-
|'''局部参数：<br>''<code>Style0</code>'' ... ''<code>Style15</code>'''''
|0-15列内容区样式（兼容CSS语法），会覆盖'''''<code>SectionSty</code>'''''，'''''<code>Styles</code>'''''和'''''<code>Style</code>'''''的对应设置。
|-
|'''局部参数：<br>''<code>Attr0</code>'' ... ''<code>Attr15</code>'''''
|0-15列标题栏附加属性（兼容HTML语法），可以设置如colspan、rowspan之类的附加属性。
|-
|'''局部参数：<br>''<code>Title0</code>'' ... ''<code>Title15</code>'''''
|0-15列标题栏内容。
|-
|'''局部参数：<br>''<code>Content0</code>'' ... ''<code>Content15</code>'''''
|0-15列内容区内容。
*'''注：'''如果要在内容区添加表格或其他区域内容，请使用'''''<code><nowiki><span> ... </span></nowiki></code>'''''或'''''<code><nowiki><span style="display:none">{{</span> ... <span style="display:none">}}</span></nowiki></code>'''''（后者可约束MediaWiki语法表格）。
|}
<span style="display:none">}}</span>
}}
{{Section
| Color=orange
| Title0=其他注意事项和提示
| Content0=<span>
| Content0=<span>
#为了和上下的Section模板结合，Section模板默认是没有底部边框的，因此在需要的时候用'''''<code>SectionSty</code>'''设置。
# ''Section'' only have one row, but can have as many columns as you want. More columns takes more time.
#为了和左边的Section列结合，从第一列开始的列标题均有左边框，如果需要将非0列作为最左侧列，请用'''''<code>TitleStyN</code>'''''将对应列表标题的左边框去除。
#* If you want more than one rows, more than one ''Section'' will help.
#标题栏下的横线为标题栏元素属性，而非标题栏整体属性。
# If parameter(s) starting with '''Title''' and following by numbers (e.g. '''Title0''') is/are specified, the corresponding column(s) will be added.
#* Note every column except '''Title0''' has left border, in order to be extended from the left column.
# Parameters for '''<u>Table</u>''' (Whole ''Section''):
## '''SectionSty''' - CSS syntax style for ''Section''.
## '''Attr''' - HTML syntax for ''Section''.
## '''Widths''' - CSS syntax width for ''Section''. Default: '''100%'''.
# Parameters for '''<u>Headlines</u>''' (where '''Title''' goes):
## '''TitleStys''' - CSS syntax style for whole headline.
## '''TitleSty''' - CSS syntax style for every header cell.
## '''TitleSty###''' - CSS syntax style for header of '''Title###'''.
## '''Color''' - CSS syntax color for all headers.
## '''Color###''' - CSS syntax color for header of '''Title###'''.
## '''Attr###''' - HTML syntax for header of '''Title###'''.
## '''Title###''' - Content in header of '''Title###'''.
# Parameters for '''<u>Contents</u>''':
## '''Styles''' - CSS syntax style for whole content.
## '''Style''' - CSS syntax style for every cell of content.
## '''Style###''' - CSS syntax style for content corresponding to '''Title###'''.
## '''Content###''' - Content in cell of '''Title###'''.
# Parameters for '''<u>Columns</u>''':
## '''Width''' - CSS syntax width of every column.
## '''Width###''' - CSS syntax width of column of '''Title###'''.
# Generally, styles will override ancestor styles. For example, '''''TitleStys''''' overrides '''''SectionSty''''', and '''''TitleSty''''' overrides both '''''TitleStys''''' and '''''SectionSty''''', and '''''TitleSty###''''' overrides all the three.
# If you want table and (un)ordered lists in contents, use '''<span<nowiki/>>''' tag or '''<nowiki><span style="display:none">{{</span>...<span style="display:none">}}</span></nowiki>''' to escape (wrap) the code.
# To be extended from other ''Section'' templates upwards, this template has no bottom border originally, use ''SectionSty'' to specify it if needed.
# The lines under each header are stated in '''''TitleSty''''' or '''''TitleSty###''''' rather than '''''TitleStys'''''.
# Default padding in headlines and contents is 0.5em.
</span>
</span>
}}
}}
Line 92: Line 52:
| SectionSty=border-bottom: 1px #000 solid;
| SectionSty=border-bottom: 1px #000 solid;
| Color0=green
| Color0=green
| Title0=其他示例
| Title0=Other Samples
| Content0=
| Content0=
   {{Section
   {{Section
   | SectionSty=border: 2px #ccc solid; border-radius: 5px;
   | SectionSty=border: 2px #ccc solid; border-radius: 5px;
   | Color0=lightblue
   | Color0=lightblue
   | Title0=示例1
   | Title0=Sample 1
   | Content0=示例1
   | Content0=Sample 1
   }}<pre>
   }}<pre>
{{Section
{{Section
| SectionSty=border: 2px #ccc solid; border-radius: 5px;
| SectionSty=border: 2px #ccc solid; border-radius: 5px;
| Color0=lightblue
| Color0=lightblue
| Title0=示例1
| Title0=Sample 1
| Content0=示例1
| Content0=Sample 1
}}</pre>
}}</pre>
}}</noinclude>
}}</noinclude>

Revision as of 04:09, 24 September 2014

Section Template
Section is an UI template developed by boxsnake, in order to enhance the UI design. Also, this is an example of Section
Parameters
  1. Section only have one row, but can have as many columns as you want. More columns takes more time.
    • If you want more than one rows, more than one Section will help.
  2. If parameter(s) starting with Title and following by numbers (e.g. Title0) is/are specified, the corresponding column(s) will be added.
    • Note every column except Title0 has left border, in order to be extended from the left column.
  3. Parameters for Table (Whole Section):
    1. SectionSty - CSS syntax style for Section.
    2. Attr - HTML syntax for Section.
    3. Widths - CSS syntax width for Section. Default: 100%.
  4. Parameters for Headlines (where Title goes):
    1. TitleStys - CSS syntax style for whole headline.
    2. TitleSty - CSS syntax style for every header cell.
    3. TitleSty### - CSS syntax style for header of Title###.
    4. Color - CSS syntax color for all headers.
    5. Color### - CSS syntax color for header of Title###.
    6. Attr### - HTML syntax for header of Title###.
    7. Title### - Content in header of Title###.
  5. Parameters for Contents:
    1. Styles - CSS syntax style for whole content.
    2. Style - CSS syntax style for every cell of content.
    3. Style### - CSS syntax style for content corresponding to Title###.
    4. Content### - Content in cell of Title###.
  6. Parameters for Columns:
    1. Width - CSS syntax width of every column.
    2. Width### - CSS syntax width of column of Title###.
  7. Generally, styles will override ancestor styles. For example, TitleStys overrides SectionSty, and TitleSty overrides both TitleStys and SectionSty, and TitleSty### overrides all the three.
  8. If you want table and (un)ordered lists in contents, use <span> tag or <span style="display:none">{{</span>...<span style="display:none">}}</span> to escape (wrap) the code.
  9. To be extended from other Section templates upwards, this template has no bottom border originally, use SectionSty to specify it if needed.
  10. The lines under each header are stated in TitleSty or TitleSty### rather than TitleStys.
  11. Default padding in headlines and contents is 0.5em.
Other Samples
Sample 1
Sample 1
{{Section
| SectionSty=border: 2px #ccc solid; border-radius: 5px;
| Color0=lightblue
| Title0=Sample 1
| Content0=Sample 1
}}
Retrieved from "https://elwiki.net:443/wiki/index.php?title=Template:Section&oldid=185292"