企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## addButton('name值', '按钮属性' [, '按钮类型']) 标识符:`button` | 参数 | 含义 | 类型 | | --- | --- | --- | | name | name值 | string | | attr | 按钮属性 | array | | ele_type | 按钮类型 | string | >[info] 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)