以上的图像是AI所创。
zoralabCARD科技规范 - ZORALab赫斯提亚
当用着这份代码包时所需的科技规范。 随和、支持离线(通过PWA安装)和非常注重细节的。
创史来历
主要目的
这个软件包的出生主要是支持渲染卡片类型界面元件。在网络界面世界里,这元件的成果如
下:
历史遗录
这个软件包在ZORALab赫斯提亚v1.2.0
版本之前曾经被名为
card_hestiaUI
。改名的目的是有人要横行强盗设计的版权和为了编程文件
编写能力而整理过。
软件包的设计
设计师
这个元件的设计是由以下的创造者所建设的:
(Holloway) 周健豪依赖其他元件
这个元件是需要以下的其他元件才能好好的运行 (排序从‘左上到右下’):
zoralabCOREHTML
至于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论坛