zin

Appearance

类与样式 ​

为元素设置 class（类）和 style（样式）属性是非常常见的需求，而且很多时候需要根据条件来按需设置属性的值，在 zin 中专门提供了类和样式计算支持。下面分别进行说明。

设置类 ​

指令定义 ​

设置类属性可以使用指令方法 set() 和 setClass，他们的定义如下：

php
/* 使用 set() 指令 */
set('class', mixed ...$args): object

/* 使用 setClass() 指令 */
setClass(mixed ...$args): object

其中参数 $args 为可变参数，可以为如下类型：

类型说明
string使用字符串来设置类名，多个类名可以空格拼接，空字符串将不会生成类名，例如：btn、primary rounded
null boolnull 和布尔值会被忽略，不会生成任何类名
array数组中可以包含所有支持的类型，甚至包括数组自身，通常用于批量按需设置类名
object对象会被转化为数组进行处理，不推荐

每个参数都会依次进行处理，如果参数是数组则会依次处理数组内部的每个参数，下面分别介绍典型用法。

添加类 ​

php
ul
(
    li(setClass('item primary rounded')),
    li(setClass('item', 'primary rounded', '', null)),
    li(setClass(array('item ', 'primary rounded'))),
    li(setClass('item', array('primary rounded', null)))
);
html
<ul>
  <li class="rounded item primary"></li>
  <li class="rounded item primary"></li>
  <li class="rounded item primary"></li>
  <li class="rounded item primary"></li>
</ul>

在上面的例子中，虽然使用不同的参数形式，但他们最终生成的三个 <li> 元素上拥有相同的类名。

动态设置类 ​

通常需要根据需要按需动态设置某个类，虽然可以通过 PHP 拼接字符串实现，但不够直观，三元表达式和数组是更好的选择，下面举例说明。

php
$disabled = true;

ul
(
    li(setClass('item', $disabled ? 'disabled' : '')),
    li(setClass(array('item ', 'disabled' => $disabled))),
    li(setClass('item', array('disabled' => $disabled)))
);
html
<ul>
  <li class="item disabled"></li>
  <li class="item disabled"></li>
  <li class="item disabled"></li>
</ul>

在上面的例子中使用不同的参数形式，最终生成的三个 <li> 元素上仍然拥有相同的类名。

类名处理规则 ​

在 PHP 中数组包含数值数组和关联数组，在 zin 中会分别进行处理，规则如下：

  • 对包含字符串键名的项，如果值通过 boolval() 转换后为 true，则将键名添加为类，如果为 false 则检查当前类中是否包含该键名的类，如果有则移除，如果没有则不做任何操作；
  • 如果键名为索引数值，则将值作为类名添加。

下面举例说明：

php
a
(
    setClass('btn', array('primary disabled', 'disabled' => false, 'rounded' => true))
);
html
<a class="rounded btn primary"></a>

在 zin 中会确保最终生成的类名时简洁有效的，在依次处理每个类名参数时使用如下规则：

  • 多次添加的重复类名只保留一个；
  • 严格按照顺序添加和设置类名，后面的类名设置会覆盖之前的类名设置，例如使用 array('disabled', disabled' => false) 取消对 disabled 类的添加；
  • 所有类名间只会使用一个空格进行拼接，即便设置时添加了多余的空格；
  • 类名中的特殊字符串会被自动处理。

设置样式 ​

基本用法 ​

设置类属性可以使用指令方法 set() 和 setStyle，他们的定义如下：

php
/* 使用 set() 指令 */
set('style', array $style): object

/* 使用 setStyle() 指令设置单个样式属性 */
setStyle(string $name, string $value): object

/* 使用 setStyle() 指令设置多个样式属性 */
setStyle(array $style): object

其中参数 $style 为样式数组，也可以通过 setStyle() 方法指定样式属性名称和值来进行单项设置。下面举例说明用法：

php
a
(
    set('style', array('height', '100px')),
    setStyle('color', 'red'),
    setStyle(array('background' => 'yellow'))
);
html
<a style="height: 200px; color: red; background: yellow"></a>

样式覆盖 ​

zin 会依次处理每一次样式设置，后面设置的同名样式会覆盖之前的设置，例如：

php
a
(
    setStyle('color', 'red'),
    setStyle('color', 'green')
);
html
<a style="color:green"></a>

移除样式 ​

根据样式覆盖规则，如果要移除样式，只需要将样式的值设置为 null，例如：

php
a
(
    setStyle('color', 'red'),
    setStyle('color', null)
);
html
<a></a>

设置 CSS 变量 ​

设置 CSS 变量可以非常方便的来为部件设置个性化外观，在 zin 中可以通过设置样式的方式来设置 CSS 变量，需要注意的时 CSS 变量名称需要前缀 --，例如：

php
a
(
    setStyle('--btn-color', 'red'),
    setStyle(array('--btn-color' => 'green', '--btn-background' => 'yellow'))
);
html
<a style="--btn-color: green; --btn-background: yellow"></a>

在 zin 中还提供了专门的指令方法 setCssVar() 来更方便的设置 CSS 变量。该方法定义如下：

php
/* 设置一个 CSS 变量 */
setCssVar(string $name, mixed $value): object

/* 通过数组设置多个 CSS 变量 */
setCssVar(array $vars): object

该方法支持两种调用方式，其中一种为一次设置一个 CSS 变量，参数 $name 即为要设置的 CSS 变量名称（可以省略 -- 前缀），$value 为 CSS 变量的值；另一种方式支持传入一个数组来一次性设置多个 CSS 变量。下面举例说明：

php
button
(
    setCssVar('btn-color', 'red'),
    setCssVar(array('btn-color' => 'green', '--btn-background' => 'yellow'))
);
html
<button type="submit" style="--btn-color: green; --btn-background: yellow"></button>

https://zentao.net

Copyright (C) 2023 cnezsoft.com