README

安装

composer require linksderisar/clay

基本用法

\Linksderisar\Clay\Components\Base\Component::make('div')->toJson();

// Or return it directly from the Controller

Route::get('/', function () {
    return \Linksderisar\Clay\Components\Base\Component::make('div');
});

添加属性

您可以使用来自 Base/Component 的 attribute() 或 attributes() 函数添加所有 HTML 属性，如 id、class、placeholder 等。

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->attribute('id', 'identifier');

// Or add multiple Attributes at once with attributes(array)     

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->attributes(['id' => 'identifier']);

添加类

您可以使用 attribute('class','my-css-class') 或使用 classes() 函数向您的标签添加类。classes() 函数接受字符串和数组。

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->classes('my-css-class my-other-css-class');

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->classes(['my-css-class', 'my-other-css-class']);

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->classes([
        'my-css-class' => true,
        'css-class-who-wont-be-added-in-the-dom' => false
    ]);

添加属性

您可以使用 prop('class','my-css-class') 函数添加 vue 属性。

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->prop('my-Prop', 'prop-value');
        
\Linksderisar\Clay\Components\Base\Component::make('div')
    ->props(['my-Prop'=> 'prop-value']);

示例

一个令人印象深刻的示例

PHP 代码

 return Page::create(
        Component::make('div')
            ->key('someKey')
            ->ref('ref')
            ->refInFor()
            ->classes('some-class')
            ->prop('staticProp', 'value')
            ->if('a === b')
            ->show('c === b')
            ->loop('array/object')
            ->style('background-color', 'black')
            ->children(
                Component::make('span')->text('Some Text between the Tags'),
                Component::make('some-component')
                    ->scopedSlots(function ($scope) {
                        return [Component::make('div')
                            ->on('someEvent', $scope('scoped.method()'))
                            ->bind(function ($component) use ($scope) {
                                return $component->prop('boundProp', $scope('scoped.value'));
                            })];
                    })
            )
    )
        ->store(['variable' => 'value'])
        ->header([
            'title' => 'Titel der seite',
            'link' => ['rel' => 'stylesheet', 'href' => '/some/css.css']
        ]);

生成的 Json 蓝图

    {
        "store": {
            "variable": "value"
        },
        "meta": {
            "version": "1.0.0"
        },
        "head": {
            "title": "Titel der seite",
            "link": {
                "rel": "stylesheet",
                "href": "/some/css.css"
            }
        },
        "componentTree": {
            "id": "ERX1cc5HWzDuKUMF",
            "type": "div",
            "attributes": {
                "key": "someKey",
                "ref": "ref",
                "refInFor": true,
                "style": {
                    "background-color": "black"
                },
                "props": {
                    "staticProp": "value"
                },
                "class": [
                    "some-class"
                ]
            },
            "loop": "array/object",
            "if": "a === b",
            "show": "c === b",
            "children": [
                {
                    "id": "nMkHWwpuogLFqZwE",
                    "type": "span",
                    "children": {
                        "id": "Sr6cm4i2ojUH48KW",
                        "type": "$text",
                        "value": "Some Text between the Tags"
                    }
                },
                {
                    "id": "X4XzTHudtT6kxxzi",
                    "type": "some-component",
                    "scopedSlots": [
                        {
                            "id": "lPusFpNEW0LxSsGr",
                            "type": "div",
                            "attributes": {
                                "props": {
                                    ":boundProp": "$_slot_props.X4XzTHudtT6kxxzi.scoped.value"
                                },
                                "on": {
                                    "someEvent": "$_slot_props.X4XzTHudtT6kxxzi.scoped.method()"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    }

蓝图

• protected generateId()
• public clone()
• public static create(...$attributes)
• public toArray()
• public toJson()
• public __toString()

ComponentBlueprint

ConditionBlueprint

IfConditionBlueprint

ShowConditionBlueprint

TextBlueprint

LoopBlueprint