zoralabDRAWER_TOP科技规范 - ZORALab赫斯提亚

主要目的

这个软件包的出生主要是支持渲染顶边导航抽屉的界面元件。这网页已经在运用这个元件 了。

历史遗录

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

设计师

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

依赖其他元件

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

HTML

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

HTML

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

<nav class='top-drawer'>
	<input id='...DRAWER_ID...' type='checkbox' />
	<label class='trigger' for='...DRAWER_ID...'>
		<span class='open'>☰</span>
		<span class='close'>𝖷</span>
	</label>
	<label class='overlay' for='...DRAWER_ID...'></label>


	<div class='content'>
		...
	</div>
</nav>

CSS界面自选性

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

Z-Index

影响元件的z-index设置。

变化值     : --top-drawer-z-index
CSS属性    : z-index
默认数码   : var(--drawer-z-index) (>= v1.2.0)

Z-Index（打开）

影响元件在打开情况里的z-index设置。

变化值     : --top-drawer-z-index-opened
CSS属性    : z-index
默认数码   : var(--drawer-z-index-opened) (>= v1.2.0)

Width

影响元件（在关闭时）的宽度。

变化值     : --top-drawer-width
CSS属性    : width
默认数码   : 100vw (>= v1.2.0)

Width（打开）

影响元件在打开时的宽度。

变化值     : --top-drawer-width-opened
CSS属性    : width
默认数码   : var(--top-drawer-width) (>= v1.2.0)

Height

影响元件（在关闭时）的长度。

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

Height（打开）

影响元件在打开时的长度。

变化值     : --top-drawer-height-opened
CSS属性    : height
默认数码   : 85vh (>= v1.2.0)

Overflow

影响元件的边界线。

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

Border

影响元件的边界线。

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

Border Radius

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

变化值     : --top-drawer-border-radius
CSS属性    : border-radius
默认数码   : 0 0 var(--drawer-border-radius) var(--drawer-border-radius) (>= v1.2.0)

Color

影响元件的颜色。

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

Background

影响元件的背景。

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

Box Shadow

影响元件的影子。

变化值     : --top-drawer-box-shadow
CSS属性    : box-shadow
默认数码   : var(--drawer-box-shadow) (>= v1.2.0)

Transition

影响元件的动画定时。

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

Width（触发器）

影响元件触发器的宽度。

变化值     : --top-drawer-trigger-width
CSS属性    : width
默认数码   : var(--drawer-trigger-width) (>= v1.2.0)

Height（触发器）

影响元件触发器的长度。

变化值     : --top-drawer-trigger-height
CSS属性    : height
默认数码   : var(--drawer-trigger-height) (>= v1.2.0)

Top Position（触发器）

影响元件触发器的顶向位置。

变化值     : --top-drawer-trigger-position-top
CSS属性    : top
默认数码   : 0 (>= v1.2.0)

Left Position（触发器）

影响元件触发器的左向位置。

变化值     : --top-drawer-trigger-position-left
CSS属性    : left
默认数码   : 50% (>= v1.2.0)

Bottom Position（触发器）

影响元件触发器的底向位置。

变化值     : --top-drawer-trigger-position-bottom
CSS属性    : bottom
默认数码   : unset (>= v1.2.0)

Right Position（触发器）

影响元件触发器的右向位置。

变化值     : --top-drawer-trigger-position-right
CSS属性    : right
默认数码   : unset (>= v1.2.0)

Z-Index（触发器）

影响元件触发器的z-index设置。

变化值     : --top-drawer-trigger-z-index
CSS属性    : z-index
默认数码   : var(--drawer-trigger-z-index) (>= v1.2.0)

Border（触发器）

影响元件触发器的边界线。

变化值     : --top-drawer-trigger-border
CSS属性    : border
默认数码   : unset (>= v1.2.0)

Border Radius（触发器）

影响元件触发器的角落圆形度。

变化值     : --top-drawer-trigger-border-radius
CSS属性    : border-radius
默认数码   : 0 0 var(--drawer-trigger-border-radius) var(--drawer-trigger-border-radius)

Font Size（触发器）

影响元件触发器的字体大小。

变化值     : --top-drawer-trigger-font-size
CSS属性    : font-size
默认数码   : var(--drawer-trigger-font-size) (>= v1.2.0)

Font Style（触发器）

影响元件触发器的字体风格。

变化值     : --top-drawer-trigger-font-style
CSS属性    : font-style
默认数码   : var(--drawer-trigger-font-style) (>= v1.2.0)

Color（触发器）

影响元件触发器的颜色。

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

Background（触发器）

影响元件触发器的颜色。

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

Box Shadow（触发器）

影响元件触发器的影子。

变化值     : --top-drawer-trigger-box-shadow
CSS属性    : box-shadow
默认数码   : 0 0 2rem var(--drawer-trigger-color) (>= v1.2.0)

Transform（触发器）

影响元件触发器的变换形态。

变化值     : --top-drawer-trigger-transform
CSS属性    : transform
默认数码   : translateX(-50%) (>= v1.2.0)

Transform（触发器+被关注）

影响元件触发器在被关注时的变换形态。

变化值     : --top-drawer-trigger-transform-focus
CSS属性    : transform
默认数码   : scale(1.3) translateX(-50%) (>= v1.2.0)

Z-Index （叠加层）

影响元件叠加层的z-index设置。

变化值     : --top-drawer-overlay-z-index
CSS属性    : z-index
默认数码   : var(--drawer-overlay-z-index) (>= v1.2.0)

Color （叠加层）

影响元件叠加层的颜色。

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

Background （叠加层）

影响元件叠加层的背景。

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

Transition （叠加层）

影响元件叠加层的动画定时。

变化值     : --top-drawer-overlay-transition
CSS属性    : transition
默认数码   : var(--drawer-overlay-transition) (>= v1.2.0)

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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