php vue插件 hplus-ui初学

文档链接 : 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;
    }

效果是这样的

感觉还不错，不过删除和添加商品功能还需要自己实现。我还得继续研究。