zin

Appearance

属性 ​

部件属性是用户在部件实例上设置的数据。通常部件上可供设置的属性由部件设计时决定，大部分情况下开发者可以选择性的设置这些属性。部件在渲染时会根据实际的属性数据决定如何渲染从而实现多种个性化功能。

设置属性 ​

要设置属性可以在调用部件方法时通过 set() 指令方法来实现。通过该方法可以设置单个属性，也可以一次性设置多个属性，下面分别进行介绍。

设置单个属性 ​

该方法支持两种形式，第一种方式支持两个参数，分别制定属性名和值：

php
set(string $name, mixed $value): object

例如：

php
button
(
    set('type', 'submit')
);
html
<button type="submit"></button>

在 zin 中还可以通过 set 类上的静态方法来设置属性值，静态方法名即为要设置的属性名称，上面的例子通过静态方法可以改写为：

php
button
(
    set::type('submit')
);

设置多个属性 ​

该方法可以传入一个数组，一次性设置多个属性：

php
set(array $props): object

例如：

php
button
(
    set(array('type' => 'sbumit', 'class' => 'primary'))
);
html
<button type="submit" class="primary"></button>

移除属性 ​

如果需要移除属性，只需要将属性的值设置为 null。

php
button
(
    set('type', null),
    set('title', '点击了解'),
    set(array('title' => null))
);
html
<button></button>

快捷设置 ​

在 zin 中还提供了一些额外的指令方法方便对常见类、样式、ID 等属性进行设置。下面分别进行介绍。

设置类 ​

通过指令方法 setClass() 来设置类。在 zin 中对类进行设置不是简单的替换 class 属性的值，实际上会依据类设置规则进行计算。该方法定义如下：

php
setClass(mixed ...$args): object

该方法可以包含任意个参数，每个参数支持字符串、数组。关于类的设置详细用法参考文档 类与样式，下面为一个综合用法：

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

设置样式 ​

通过指令方法 setStyle() 来设置 CSS 样式。在 zin 中对样式进行设置不是简单的替换 style 属性的值，实际上会将样式属性进行合并处理。该方法定义如下：

php
/* 设置一个样式属性 */
setStyle(string $name, mixed $value): object

/* 通过数组设置多个样式属性 */
setStyle(array $style): object

该方法支持两种用法，一种是指定样式名称和值设置一个样式属性，另一种是指定一个数组一次设置多个样式属性。关于样式的设置详细用法参考文档 类与样式，下面为一个综合用法：

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

设置 data-* 属性 ​

通过指令方法 setData() 来设置 data-* 属性。相比较通过 set，该方式可以避免多次写 'data-'。该方法定义如下：

php
/* 设置一个 data-* 属性 */
setData(string $name, mixed $value): object

/* 通过数组设置多个 data-* 属性 */
setData(array $data): object

该方法支持两种用法，一种是指定属性名称和值设置一个 data-* 属性，另一种是指定一个数组一次设置多个 data-* 属性。下面为一个综合用法：

php
button
(
    setData('id', 123),
    setData(array('url' => 'example.html', 'open-type' => 'add')),
    'Test setData'
);
html
<button type="submit" data-id="123" data-url="example.html" data-open-type="myBtn">Test setData</button>

设置 ID ​

ID 属性通常会作为部件根元素上的 id 属性，在 zin 中可以通过指令方法 setID() 来设置。该方法定义如下：

php
setID(string $id): object

参数 $id 即为要设置的 ID。例如：

php
button
(
    setID('myBtn')
);
html
<button id="myBtn" type="submit"></button>

设置根元素标签名称 ​

在 zin 中可以通过 setTag() 设置根元素标签名称。该方法定义如下：

php
setTag(string $tag): object

参数 $tag 即为要设置的根元素标签名称。例如：

php
button
(
    setTag('a')
);
html
<a type="submit"></a>

设置 CSS 变量 ​

一些部件提供了 CSS 变量来动态设置部件样式，在 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