zoralabSPLIT_SKEW科技规范 - ZORALab赫斯提亚

主要目的

这个软件包的出生主要是支持渲染创造性的内容分开界面元件。在网络界面世界里， 这元件的成果如下：

历史遗录

这个软件包首次在ZORALab赫斯提亚v1.2.0版本出产。

设计师

这个元件的设计是由以下的创造者所建设的：

依赖其他元件

这个元件是需要以下的其他元件才能好好的运行 (排序从‘左上到右下’）：

HTML

至于HTML，为了简单化和最大的兼容性整个用法，ZORALab赫斯提亚运用W3C的语法。我们 推荐您用以下的HTML代码来运用这个界面元件。

HTML

在最小的HTML代码运用方法如下：

<div style='background: [背景设置];'>
	<div class='split skew' style='
		--split-skew-angle: [角度选择: to left bottom | to right bottom];
		--split-skew-upper-background: [上任背景颜色设置];
		--split-skew-lower-background: transparent;
		margin-bottom: [调整显示合适的空间];
	'></div>


	... CONTENT OF THE SECTION/CONTAINER ...


	<div class='split skew' style='
		--split-skew-angle: [ANGLE_OF_CHOICE: to left bottom | to right bottom];
		--split-skew-upper-background: transparent;
		--split-skew-lower-background: [下任背景颜色设置];
	'></div>
</div>

<!-- 切记：内容外向的背景一定要是个颜色。 -->

<div style='background: [背景设置];'>
	<div class='split skew' style='
		--split-skew-angle: [角度选择: to left bottom | to right bottom];
		--split-skew-upper-background: [上任背景颜色设置];
		--split-skew-lower-background: transparent;
		margin-bottom: [调整显示合适的空间];
	'></div>

	...
</div>

...

CSS界面自选性

ZORALab赫斯提亚非常重用CSS变化值来装置这个界面元件并且还推出界面自选性功能。 以下是所有界面自选性CSS变化值任您发挥。

Margin

影响元件的高度。

变化值     : --split-skew-height
CSS属性    : margin
默认数码   : 150px (>= v1.2.0)

Skew Angle

影响元件的倾斜角度。

变化值     : --split-skew-angle
CSS属性    : background (linear-gradient)
默认数码   : to left bottom (>= v1.2.0)

Background（上任）

影响元件上任内容的背景。

变化值     : --split-skew-upper-background
CSS属性    : background (linear-gradient)
默认数码   : var(--body-background) (>= v1.2.0)

Background（下任）

影响元件下任内容的背景。

变化值     : --split-skew-lower-background
CSS属性    : background (linear-gradient)
默认数码   : transparent (>= v1.2.0)

JavaScript

庆幸的是这个元件没有运用到任何JavaScript。放心吧！

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

{{- $ret := partial "hestiaGUI/zoralabSPLIT_SKEW/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>