zoralabPICTURE科技规范 - ZORALab赫斯提亚
当用着这份代码包时所需的科技规范。 随和、支持离线(通过PWA安装)和非常注重细节的。
创史来历
主要目的
这个软件包的出生主要是支持渲染画像的界面元件。在网络界面世界里, 这元件的成果如下:
![渲染出的图像](https://hestia.zoralab.com/favicon-384x384.png)
完全配合hestiaMEDIA数据构架
虽然这个软件包提供画像的渲染功能,它所需要的数据构架是完全配合
hestiaMEDIA
软件包的3合1数据构架。这个数码构架是W3C所欲望可以被渲染
成画像、影像和声像的界面元件。当需要渲染网页元件时,您最好还是运用
hestiaMEDIA
功能。
历史遗录
这个软件包在ZORALab赫斯提亚v1.2.0
版本之前曾经被名为
picture_hestiaUI
。改名的目的是有人要横行强盗设计的版权和为了编程
文件编写能力而整理过。
软件包的设计
设计师
这个元件的设计是由以下的创造者所建设的:
(Holloway) 周健豪依赖其他元件
这个元件是需要以下的其他元件才能好好的运行 (排序从‘左上到右下’):
zoralabCOREHTML
至于HTML,为了简单化和最大的兼容性整个用法,ZORALab赫斯提亚运用W3C的语法。我们 推荐您用以下的HTML代码来运用这个界面元件。
最小的HTML
在最小的HTML代码(请通过max-height
来控制布局响应性自动调整的最大元素)运用方法如下:
<picture style='max-height: 630px;'> <!-- 最先进模式 --> <source srcset="/URL/to/image-1200x630.avif 1x, /URL/to/image-2400x1260.avif 2x, /URL/to/image-3600x1890.avif 3x" type="image/avif" width="1200" height="630" loading="lazy" media"(max-width: ...)"> <!-- 后备模式 --> <source srcset="/URL/to/image-1200x630.webp 1x, /URL/to/image-2400x1260.webp 2x, /URL/to/image-3600x1890.webp 3x" type="image/webp" width="1200" height="630" loading="lazy" media"(max-width: ...)"> ... <!-- 最后关头方案 --> <source srcset="/URL/to/image-1200x630.jpg 1x, /URL/to/image-2400x1260.jpg 2x, /URL/to/image-3600x1890.jpg 3x" type="image/jpeg" width="1200" height="630" loading="lazy" media"all"> <img alt="..." src="/URL/to/image-1200x630.jpg" width="1200" height="630" loading="lazy"/> </picture>
CSS界面自选性
ZORALab赫斯提亚非常重用CSS变化值来装置这个界面元件并且还推出界面自选性功能。 以下是所有界面自选性CSS变化值任您发挥。
Display
影响元件的显示模式。
变化值 : --picture-display CSS属性 : display 默认数码 : block (>= v1.2.0)
Margin
影响元件的外向边距空间。
变化值 : --picture-margin CSS属性 : margin 默认数码 : 2rem auto (>= v1.2.0)
Padding
影响元件的内向边距空间。
变化值 : --picture-padding CSS属性 : padding 默认数码 : 0 (>= v1.2.0)
Min-Width
影响元件的最少宽度。
变化值 : --picture-min-width CSS属性 : min-width 默认数码 : initial (>= v1.2.0)
Width
影响元件的宽度。
变化值 : --picture-width CSS属性 : width 默认数码 : auto (>= v1.2.0)
Max-Width
影响元件的宽度。
变化值 : --picture-max-width CSS属性 : max-width 默认数码 : 100% (>= v1.2.0)
Min-Height
影响元件的最少高度。
变化值 : --picture-min-height CSS属性 : min-hieght 默认数码 : initial (>= v1.2.0)
Height
影响元件的高度。
变化值 : --picture-height CSS属性 : height 默认数码 : auto (>= v1.2.0)
Max-Height
影响元件的最大高度。
变化值 : --picture-max-height CSS属性 : max-height 默认数码 : initial (>= v1.2.0)
User Select能力
影响元件选择能力的控制条件。
变化值 : --picture-user-select CSS属性 : user-select 默认数码 : none (>= v1.2.0)
User Drag能力
影响元件拖动能力的控制条件。
变化值 : --picture-user-drag CSS属性 : user-drag 默认数码 : none (>= v1.2.0)
JavaScript
庆幸的是这个元件没有运用到任何JavaScript。放心吧!
固定值
这个代码包没有提供任何固定值。
变化值
这个代码包没有提供任何变化值。
提供的功能
ToCSS
渲染呈现CSS的输出数据。
Hugo
用法:
{{- $ret := partial "hestiaGUI/zoralabPICTURE/ToCSS" . -}} <pre>{{- printf "%#v\n" $ret -}}</pre>
数码构架
这个代码包没有提供任何数码构架。
终结
我们已经抵达终结段落了。如有询问,您是可以通过以下管道来联系我们吧:
GitHub论坛