文档链接 : https://www.yuque.com/hyperf-plus/ui/hplus-ui
今天接触了下hyperf_admin框架,他的前端页面是用hplus-ui包做的,感觉很神奇,所以试着用了一下,总结一些东西,免得以后忘了怎么用。
安装就略过了,按文档走就行了
首先是怎么用,用法的话先new content。然后使用各种组件建构页面,再把构建好的组件放到$content->body里面去。最后return $content就行了~,很简单是不是,接下来上一些实验代码。
$content = new Content();
$steps = Steps::make()
->simple(false)
->active(1)
->processStatus("process")
->alignCenter(true)
->stepList(function (Collection $list) {
//下单
$xd = Step::make()->title("下单");
$xd->description("下单");
$list->push($xd);
//付款
$fk = Step::make()->title("付款");
$fk->description("付款");
$list->push($fk);
//发货
$fh = Step::make()->title("发货");
$fh->description("发货");
$list->push($fh);
//收货
$sh = Step::make()->title("收货");
$sh->description("收货");
$list->push($sh);
//完成
$wc = Step::make()->title("完成");
$wc->description("完成");
$list->push($wc);
});
$content->body($steps);
return $content;
比如说一个流程卡
然后是加属性,使用style方法,以数组形式将数据传入
$content = new Content();
$steps = Steps::make()
->style(['margin-top' => '50px'])
这样css就可以生效了,其中还有各种组件,比如表单,表格等。上一份表格的代码
public function tryui(){
$grid = new Grid(new AdminTest());
//设置字段
$grid->column('order', '排序')->width(80);
$grid->column('id', 'id')->width(80);
$grid->column('test', 'test')->width(80);
$grid->column('test1', 'test1')->width(80);
$grid->column('test2', 'test2')->width(80);
$grid->dataUrl("/index/tryui");
//toolbar设置
$grid->toolbars(function (Grid\Toolbars $toolbars) {
$toolbars->createButton()->content("添加商品");
});
//action设置
$grid->actions(function (Grid\Actions $actions) {
$actions->hideEditAction();
});
return $grid;
}
效果是这样的
感觉还不错,不过删除和添加商品功能还需要自己实现。我还得继续研究。