zoralabBLOCKQUOTE科技规范 - ZORALab赫斯提亚

主要目的

这个软件包的出生主要是支持渲染引用方块的界面元件。在网络界面世界里， 这元件的成果如下：

The scientists of today think deeply instead of clearly. One must be sane to think clearly, but one can think deeply and be quite insane. Nikolai Tesla

历史遗录

这个软件包在ZORALab赫斯提亚v1.2.0版本之前曾经被名为 blockquote_hestiaUI。改名的目的是有人要横行强盗设计的版权和为了编程 文件编写能力而整理过。

设计师

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

依赖其他元件

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

HTML

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

最小的HTML

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

<blockquote>
	...
	<cite>...</cite>
</blockquote>

CSS界面自选性

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

Display

影响元件的显示模式。

变化值     : --blockquote-display
CSS属性    : display
默认数码   : block (>= v1.2.0)

Before Content

影响元件的Before伪元素的内容。

变化值     : --blockquote-before-content
CSS属性    : content
默认数码   : "❝" (>= v1.2.0)

Margin

影响元件的外向边距空间。

变化值     : --blockquote-margin
CSS属性    : margin
默认数码   : 0 0 3rem (>= v1.2.0)

Padding

影响元件的内向边距空间。

变化值     : --blockquote-padding
CSS属性    : padding
默认数码   : 4rem 3rem 3rem 10rem (>= v1.2.0)

Border

影响元件的边界线。

变化值     : --blockquote-border
CSS属性    : border
默认数码   : none (>= v1.2.0)

Border Radius

影响元件边界线的角落圆形度。

变化值     : --blockquote-border-radius
CSS属性    : border-radius
默认数码   : 1rem (>= v1.2.0)

Min-Width

影响元件的最少宽度。

变化值     : --blockquote-min-width
CSS属性    : min-width
默认数码   : initial (>= v1.2.0)

Width

影响元件的宽度。

变化值     : --blockquote-width
CSS属性    : width
默认数码   : initial (<= v1.2.0)

Max-Width

影响元件的宽度。

变化值     : --blockquote-max-width
CSS属性    : max-width
默认数码   : initial (<= v1.2.0)

Min-Height

影响元件的最少高度。

变化值     : --blockquote-min-height
CSS属性    : min-hieght
默认数码   : initial (>= v1.2.0)

Height

影响元件的高度。

变化值     : --blockquote-height
CSS属性    : height
默认数码   : initial (>= v1.2.0)

Max-Height

影响元件的最大高度。

变化值     : --blockquote-max-height
CSS属性    : max-height
默认数码   : initial (>= v1.2.0)

Text Align

影响元件的文字对齐方式。

变化值     : --blockquote-text-align
CSS属性    : text-align
默认数码   : justify (>= v1.2.0)

Color

影响元件的颜色。

变化值     : --blockquote-color
CSS属性    : color
默认数码   : var(--color-typography-900) (>= v1.2.0)

Color （印刷）

影响元件在印刷环境里的颜色。

变化值     : --blockquote-color-print
CSS属性    : color
默认数码   : var(--body-color-print) (>= v1.2.0)

Background

影响元件的背景。

变化值     : --blockquote-background
CSS属性    : background
默认数码   : var(--color-primary-100) (>= v1.2.0)

Background （印刷）

影响元件在印刷环境里的背景。

变化值     : --blockquote-background-print
CSS属性    : background
默认数码   : var(--body-background-print) (>= v1.2.0)

Transition

影响元件在印刷环境里的动画定时。

变化值     : --blockquote-timing
CSS属性    : transition
默认数码   : var(--timing-rapid) (>= v1.2.0)

Margin (Cite)

影响元件引用语法的外向边距空间。

变化值     : --blockquote-cite-margin
CSS属性    : margin
默认数码   : 2rem 0 0 (>= v1.2.0)

Margin (Cite)

影响元件引用语法的的顶端边界线。

变化值     : --blockquote-cite-border-top
CSS属性    : border-top
默认数码   : 2px solid var(--blockquote-color) (>= v1.2.0)

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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