php vue plugin hplus-ui beginner

Document link: https://www.yuque.com/hyperf-plus/ui/hplus-ui
contacted the hyperf_admin framework today, his front-end page is made with hplus-ui package, it feels amazing, so I tried to use it Let’s summarize some things so that you don’t forget how to use them later.
The installation is skipped, just follow the documentation.
First of all, how to use it, and use new content first. Then use various components to construct the page, and then put the built components into $content->body. Finally, just return $content~, it’s very simple, right? Now let’s add some experimental code.

$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;

For example, a process card,

and then add attributes, use the style method to pass the data in the form of an array

  $content = new Content();
        $steps = Steps::make()
            ->style(['margin-top' => '50px'])

In this way, css can take effect, and there are various components, such as forms, tables, etc. The code of the previous form

    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;
    }

The effect is like this. It

feels pretty good, but deleting and adding product functions still need to be implemented by yourself. I have to continue research.