addButton('name值', '按钮属性' [, '按钮类型'])

标识符:button

参数 含义 类型
name name值 string
attr 按钮属性 array
ele_type 按钮类型 string

1.0.2版本开始支持

// 定义按钮属性
$btn = [
	'title' => '自定义按钮',
];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

![](https://box.kancloud.cn/49fe7fbf990145c130af8c2333f8923a_165x68.png)

默认情况下,按钮为`button`类型,也就是一个普通的按钮,不带任何事件,本身会有一个id,也就是上面的`name`参数。

比如上面的按钮,id默认为`test`,我们可以通过js来给它加事件,做我们想做的事情。

$('#test').click(function(){

alert('按钮被点击了');

});


### a标签按钮

如果有需要,我们可以把按钮改为a标签按钮,并添加按钮连接。

// 定义按钮属性
$btn = [

'title' => '自定义按钮',
'target' => '_blank',
'href' => url('add') // 此属性仅用于a标签按钮,button按钮不产生作用

];

return ZBuilder::make('form')

->addButton('test', $btn, 'a')
->fetch();

>[info] 需要注意的是,`target`和`href`属性仅适用于a标签按钮。

### 添加图标

// 定义按钮属性
$btn = [

'title' => '自定义按钮',
'icon' => 'fa fa-plus-circle',

];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

![](https://box.kancloud.cn/b408cf875a88aee4b5fbcda6627739f9_144x58.png)

也可以只用图标,不显示按钮标题。

// 定义按钮属性
$btn = [

'icon' => 'fa fa-plus-circle',

];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

![](https://box.kancloud.cn/888c5b7846307a940f7b3a9c38024588_64x56.png)

### 更改按钮颜色

可以通过添加class属性,来改变按钮颜色。

// 定义按钮属性
$btn = [

'title' => '自定义按钮',
'icon' => 'fa fa-plus-circle',
'class' => 'btn-success',

];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

![](https://box.kancloud.cn/b74dbc12d5e72c970000da473c36fcdc_135x62.png)

### 禁用按钮

如果想默认禁用按钮,可以添加`disabled`。

// 定义按钮属性
$btn = [

'title' => '自定义按钮',
'icon' => 'fa fa-plus-circle',
'class' => 'btn-success',
'disabled' => '',

];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

![](https://box.kancloud.cn/ca4236a67deedc487276abae0f1e041b_135x61.png)

### 修改按钮id
默认情况下,按钮的id值是name参数的值,如果需要修改按钮的id,可以直接给id另外赋值。

// 定义按钮属性
$btn = [

'title' => '自定义按钮',
'id' => 'newid',

];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

### 添加自定义属性

除了一些常规的参数,还可以给按钮添加一些自定义属性,但仅限于“data-”开头。

// 定义按钮属性
$btn = [

'title' => '自定义按钮',
'id' => 'newid',
'data-url' => url('add')

];

return ZBuilder::make('form')

->addButton('test', $btn)
->fetch();

### 添加布局宽度

按钮也支持设定布局,但只能用`addFormItem`或`addFormItems`方法。

// 定义按钮属性
$btn = [

'title' => '自定义按钮',

];

return ZBuilder::make('form')

->addFormItem('button:4', 'test', $btn)
->fetch();
![](https://box.kancloud.cn/888c5b7846307a940f7b3a9c38024588_64x56.png)