docs(components): Layout

moonshine-software · Oct 31, 2023 · 2eeed2c · 2eeed2c
1 parent 40ce77a
commit 2eeed2c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 31 deletions.
diff --git a/config/menu.php b/config/menu.php
@@ -28,8 +28,8 @@
         ['slug' => 'components-decoration_collapse', 'label' => 'Collapse', 'title' => 'Decoration Collapse'],
         ['slug' => 'components-decoration_divider', 'label' => 'Divider', 'title' => 'Decoration Divider'],
         ['slug' => 'components-decoration_heading', 'label' => 'Heading', 'title' => 'Decoration Heading'],
-        ['slug' => 'components-decoration_tabs', 'label' => 'Tabs', 'title' => 'Decoration Tabs'],
         ['slug' => 'components-decoration_layout', 'label' => 'Layout', 'title' => 'Decoration Layout'],
+        ['slug' => 'components-decoration_tabs', 'label' => 'Tabs', 'title' => 'Decoration Tabs'],
 
         // Metrics
         'Metrics:_divider_',

diff --git a/...iews/pages/ru/components/layout.blade.php → ...ru/components/decoration_layout.blade.php b/...iews/pages/ru/components/layout.blade.php → ...ru/components/decoration_layout.blade.php
@@ -1,14 +1,11 @@
 <x-page
-    title="Layout"
+    title="Декорации Layout"
     :sectionMenu="[
         'Разделы' => [
             ['url' => '#flex', 'label' => 'Flex'],
             ['url' => '#grid-column', 'label' => 'Grid/Column'],
         ]
     ]"
-    :videos="[
-        ['url' => 'https://www.youtube.com/embed/7HGaebxlcFM?start=305&end=359', 'title' => 'Screencasts: Декорация Flex'],
-    ]"
 >
 
 <x-p>
@@ -19,30 +16,55 @@
 <x-sub-title id="flex">Flex</x-sub-title>
 
 <x-p>
-    Изменение позиционирования полей в линию.
+    Декорация <em>Flex</em> задает элементам соответствующее позиционирование.
 </x-p>
 
+<x-code language="php">
+use MoonShine\Decorations\Flex; // [tl! focus]
+
+//...
+
+public function components(): array
+{
+    return [
+        Flex::make([ // [tl! focus]
+            Text::make('Title'),
+            Text::make('Slug'),
+        ]) // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/flex.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/flex_dark.png') }}"></x-image>
+
+<x-moonshine::divider label="Дополнительные опции" />
+
 <x-code language="php">
 use MoonShine\Decorations\Flex;
 
 //...
-public function fields(): array
+
+public function components(): array
 {
     return [
         Flex::make([
             Text::make('Title'),
             Text::make('Slug'),
         ])
-            // Дополнительные опции
-            ->withoutSpace() // Исключить отступы
-            ->justifyAlign('start') // На основе tailwind классов justify-[param]
-            ->itemsAlign('start') // На основе tailwind классов items-[param]
+            ->withoutSpace() // Исключить отступы [tl! focus]
+            ->justifyAlign('start') // На основе tailwind классов justify-[param] [tl! focus]
+            ->itemsAlign('start') // На основе tailwind классов items-[param] [tl! focus]
     ];
 }
+
 //...
 </x-code>
 
 <x-moonshine::table
+    :simple="true"
     :columns="['param', 'justifyAlign()', 'itemsAlign()']"
     :values="[
         ['normal', 'justify-content: normal;', null],
@@ -57,44 +79,56 @@ public function fields(): array
     ]"
 />
 
-<x-image theme="light" src="{{ asset('screenshots/flex.png') }}"></x-image>
-<x-image theme="dark" src="{{ asset('screenshots/flex_dark.png') }}"></x-image>
-
 <x-sub-title id="grid-column">Grid/Column</x-sub-title>
 
 <x-p>
-    Сетка с колонками
+    Организовать сетку с колонками позволяют декораторы <em>Grid</em> и <em>Column</em>.
+</x-p>
+
+<x-p>
+    Метод <code>columnSpan()</code> позволяет задать ширину блока в <em>Grid</em> сетке.
+</x-p>
+
+<x-code language="php">
+columnSpan(
+    int $columnSpan,
+    int $adaptiveColumnSpan = 12
+)
+</x-code>
+
+<x-p>
+    <code>$columnSpan</code> - значение для десктопной версии,<br>
+    <code>$adaptiveColumnSpan</code> - значение для мобильной версии.
 </x-p>
 
 <x-code language="php">
-use MoonShine\Decorations\Grid;
-use MoonShine\Decorations\Column;
+use MoonShine\Decorations\Grid; // [tl! focus]
+use MoonShine\Decorations\Column; // [tl! focus]
 
 //...
-public function fields(): array
+public function components(): array
 {
     return [
-        Grid::make([
+        Grid::make([ // [tl! focus:1]
             Column::make([
-                Block::make('Main information', [
-                    // Fields here
-                ])
-            ])->columnSpan(6), // 6 из 12 - половина экрана
+                // ...
+            ])
+                ->columnSpan(6), // [tl! focus:-1]
 
-            Column::make([
-                Block::make('Contact information', [
-                    // Fields here
-                ])
-            ])->columnSpan(6), // 6 из 12 - половина экрана
+            Column::make([ // [tl! focus]
+                // ...
+            ])
+                ->columnSpan(6) // [tl! focus:-1]
         ])
     ];
 }
+
 //...
 </x-code>
 
-<x-p>
-    Результат: две колонки с блоками.
-</x-p>
+<x-moonshine::alert type="default" icon="heroicons.information-circle">
+    В админ-панели <strong>MoonShine</strong> используется 12 колоночная сетка.
+</x-moonshine::alert>
 
 <x-image theme="light" src="{{ asset('screenshots/grid.png') }}"></x-image>
 <x-image theme="dark" src="{{ asset('screenshots/grid_dark.png') }}"></x-image>