zoralabDRAWER科技规范 - ZORALab赫斯提亚

主要目的

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

历史遗录

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

设计师

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

依赖其他元件

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

HTML

这个元件是没有需要任何HTML代码。放心吧！

CSS界面自选性

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

Z-Index（触发器）

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

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

Z-Index

影响元件的z-index设置。

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

Z-Index（打开）

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

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

Z-Index (叠加层)

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

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

Border

影响元件的边界线。

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

Border Radius

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

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

Color

影响元件的颜色。

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

Color （反转环境）

影响元件在反转环境里的颜色。

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

Color （主色）

影响元件主色的颜色。

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

Background

影响元件的背景。

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

Transition

影响元件的动画定时。

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

Width（触发器）

影响元件触发器的宽度。

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

Height（触发器）

影响元件触发器的长度。

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

Border（触发器）

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

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

Border Radius（触发器）

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

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

Box Shadow（触发器）

影响元件触发器的影子。

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

Box Shadow（触发器+被关注）

影响元件触发器在被关注时的影子。

变化值     : --drawer-trigger-box-shadow-focus
CSS属性    : box-shadow
默认数码   : 0 0 4rem var(--drawer-overlay-background) (>= v1.2.0)

Font Size（触发器）

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

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

Font Style（触发器）

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

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

Color（触发器）

影响元件触发器的颜色。

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

Color（叠加层）

影响元件叠加层的颜色。

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

Background（叠加层）

影响元件叠加层的背景。

变化值     : --drawer-overlay-background
CSS属性    : background
默认数码   : rgba(0,0,0,.75) (>= v1.2.0)

Transition（叠加层）

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

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

JavaScript

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