Merge pull request #276 from DissNik/2.0-components

2.0 components

config/menu.php

@@ -27,6 +27,7 @@
         ['slug' => 'components-decoration_block', 'label' => 'Block', 'title' => 'Decoration Block'],
         ['slug' => 'components-decoration_collapse', 'label' => 'Collapse', 'title' => 'Decoration Collapse'],
         ['slug' => 'components-decoration_divider', 'label' => 'Divider', 'title' => 'Decoration Divider'],
+        ['slug' => 'components-decoration_fragment', 'label' => 'Fragment', 'title' => 'Decoration Fragment'],
         ['slug' => 'components-decoration_heading', 'label' => 'Heading', 'title' => 'Decoration Heading'],
         ['slug' => 'components-decoration_layout', 'label' => 'Layout', 'title' => 'Decoration Layout'],
         ['slug' => 'components-decoration_tabs', 'label' => 'Tabs', 'title' => 'Decoration Tabs'],

resources/views/pages/ru/components/decoration_fragment.blade.php

@@ -0,0 +1,49 @@
+<x-page
+    title="Декоратор Fragment"
+    :sectionMenu="[
+        'Разделы' => [
+            ['url' => '#make', 'label' => 'Make'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    Иногда может потребоваться вернуть только часть шаблона в вашем HTTP ответе. Для это можно воспользоваться
+    <x-link link="https://laravel.com/docs/blade#rendering-blade-fragments" target="_blank">Blade Fragments</x-link>.<br />
+    Декоратор <em>Fragment</em> позволяет создавать соответствующие блоки.
+</x-p>
+
+<x-p>
+    Создать <em>Fragment</em> можно воспользовавшись статическим методом <code>make()</code>.
+</x-p>
+
+<x-code language="php">
+make(array $fields = [])
+</x-code>
+
+<x-p>
+    Метод <code>name()</code> задает название для фрагмента.
+</x-p>
+
+<x-code language="php">
+use MoonShine\Decorations\Fragment; // [tl! focus]
+use MoonShine\Fields\Text;
+
+//...
+
+public function components(): array
+{
+    return [
+        Fragment::make([ // [tl! focus]
+            Text::make('Name', 'first_name')
+        ])
+            ->name('fragment-name') // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+</x-page>

resources/views/pages/ru/components/index.blade.php

@@ -23,7 +23,16 @@
 
 <x-p>
     <em>Decorations</em> - компоненты используются для визуального оформления пользовательского интерфейса:
-    Block, Collapse, Divider, Flex, Fragment, Grid, Heading, LineBreak, Tabs, TextBlock.
+    <x-link link="{{ route('moonshine.page', 'components-decoration_block') }}">Block</x-link>,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_collapse') }}">Collapse</x-link>,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_divider') }}">Divider</x-link>,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_layout') . '#flex' }}">Flex</x-link>,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_fragment') }}">Fragment</x-link>,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_layout') . '#grid-column' }}">Grid</x-link>,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_heading') }}">Heading</x-link>,
+    LineBreak,
+    <x-link link="{{ route('moonshine.page', 'components-decoration_tabs') }}">Tabs</x-link>,
+    TextBlock.
 </x-p>
 
 <x-p>

resources/views/pages/ru/page/class.blade.php

@@ -143,6 +143,11 @@ public function components(): array // [tl! focus:start]
 }
 </x-code>
 
+<x-moonshine::alert type="default" icon="heroicons.book-open">
+    За более подробной информацией обратитесь к разделу
+    <x-link link="{{ route('moonshine.page', 'components-index') }}">Components</x-link>.
+</x-moonshine::alert>
+
 <x-sub-title id="breadcrumbs">Хлебные крошки</x-sub-title>
 
 <x-p>