zoralabCARD科技规范 - ZORALab赫斯提亚

当用着这份代码包时所需的科技规范。随和、支持离线（通过PWA安装）和非常注重细节的。

创史来历

主要目的

这个软件包的出生主要是支持渲染卡片类型界面元件。在网络界面世界里，这元件的成果如下：

历史遗录

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

软件包的设计

设计师

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

(Holloway) 周健豪

依赖其他元件

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

zoralabCORE

HTML

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

HTML

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

<figure class="card">
	<picture class="thumbnail">
		...
	</picture>
	<div class="content">
		...
	</div>
	<div class="actions">
		...
	</div>
</figure>

CSS界面自选性

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

Layout

影响元件的空间设计。

变化值     : --card-layout
CSS属性    : grid
默认数码   :
(>= v1.2.0)
"thumbnail" minmax(0, var(--card-thumbnail-height))
"content" minmax(0, var(--card-content-height))
"actions" minmax(0, var(--card-actions-height))
/ 100%

Overflow

影响元件的溢出反应。

变化值     : --card-overflow
CSS属性    : overflow
默认数码   : hidden (>= v1.2.0)

Margin

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

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

Padding

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

变化值     : --card-padding
CSS属性    : padding
默认数码   : 0 (>= v1.2.0)

Width

影响元件的宽度。

变化值     : --card-width
CSS属性    : width
默认数码   : clamp(22rem, 28rem, 32rem) (>= v1.2.0)

Border

影响元件的边界线。

变化值     : --card-border
CSS属性    : border
默认数码   : 1px solid var(--color-typography-200) (>= v1.2.0)

Border（被关注）

影响元件在被关注时的边界线。

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

Border（反转环境）

影响元件在反转环境里的边界线。

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

Border（反转环境+被关注）

影响元件在反转环境里被关注时的边界线。

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

Border Radius

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

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

Color

影响元件的颜色。

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

Color（印刷）

影响元件在印刷中的颜色。

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

Background

影响元件的背景。

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

Background（印刷）

影响元件在印刷中的背景。

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

Transition

影响元件的动画定时。

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

Filter（被关注）

影响元件在被关注事的滤波方式。

变化值     : --card-filter-focus
CSS属性    : filter
默认数码   : drop-shadow(0 1rem 2rem var(--color-typography-800)) (>= v1.2.0)

Filter（反转环境+被关注）

影响元件在反转环境被关注时的滤波方式。

变化值     : --card-filter-inverted-focus
CSS属性    : filter
默认数码   : drop-shadow(0 1rem 2rem var(--color-typography-50)) (>= v1.2.0)

缩略像Overflow

影响元件缩略像的溢出反应。

变化值     : --card-thumbnail-overflow
CSS属性    : overflow
默认数码   : hidden (>= v1.2.0)

缩略像Object-Fit

影响元件缩略像的溢出反应。

变化值     : --card-thumbnail-object-fit
CSS属性    : object-fit
默认数码   : contain (>= v1.2.0)

缩略像Height

影响元件缩略像的高度。

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

缩略像Margin

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

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

缩略像Padding

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

变化值     : --card-thumbnail-padding
CSS属性    : padding
默认数码   : 0 (>= v1.2.0)

内容层Overflow

影响元件内容层的溢出反应。

变化值     : --card-content-overflow
CSS属性    : overflow
默认数码   : auto (>= v1.2.0)

内容层Height

影响元件内容层的高度。

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

内容层Margin

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

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

内容层Padding

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

变化值     : --card-content-padding
CSS属性    : padding
默认数码   : 0 1rem (>= v1.2.0)

行动层Overflow

影响元件行动层的溢出反应。

变化值     : --card-actions-overflow
CSS属性    : overflow
默认数码   : hidden (>= v1.2.0)

行动层Height

影响元件行动层的高度。

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

行动层Margin

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

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

行动层Padding

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

变化值     : --card-actions-padding
CSS属性    : padding
默认数码   : 3.5rem 0 (>= v1.2.0)

标题Margin

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

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

JavaScript

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

固定值

这个代码包没有提供任何固定值。

变化值

这个代码包没有提供任何变化值。

提供的功能

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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

数码构架

这个代码包没有提供任何数码构架。

终结

我们已经抵达终结段落了。如有询问，您是可以通过以下管道来联系我们吧：

GitHub论坛