Grid

#概述

Filament 的网格(Grid)系统，允许你使用任何布局组件创建响应式、多列宽的布局。

#响应式设置网格 Columns 的数量

所有布局组件都有一个 columns() 方法，你可以通过多个不同方式使用它：

• 你可以传入整型速记，像这样：columns(2)。该整型数据表示 lg 及以上临界点中 columns 的数量。所有小型设备都只有 1 个 column。
• 你也可以传递一个数组，数据键为临界点且数组值是 column 的值。比如，columns(['md' => 2, 'xl' => 4]) 会在中等设备中创建 2 列布局，在超大设备中创建 4 列布局。小型设备的默认临界点使用 1 列布局，除非你使用了 default 数组键。

临界点(sm、md、lg、xl、2xl)由 Tailwind 定义，可以在 Tailwind 文档中查看。

#控制组件应该占用的列宽

除了指定布局组件应该占有多少 columns 外，使用 columnSpan()方法，你也可以指定一个子组件在父网格中应该占有多少 columns。该方法接收一个整型数字或者一个临界点和占用列宽组成的数组：

• columnSpan(2) 将会使组件在所有临界点中占用 2 个 column。
• columnSpan(['md' => 2, 'xl' => 4]) 将会使组件在中等设备中填满 2 个 column，并在超大设备中占用 4 个 column，小设备的默认临界点将占用 1 个 column，除非使用了 default 数组键。
• columnSpan('full') 或 columnSpanFull() 或 columnSpan(['default' => 'full']) 会使组件占满父级网格的全部宽度，无论其占有多少 columns。

#响应式网格布局示例

本例中，我们在表单中使用了 Section 布局组件。由于所有布局组件都支持 columns() 方法，我们可以用它在 Section 本身中创建响应式网格布局。

我们希望为不同的临界点指定不同的数字，因此我们将一个数组传递给 columns()。在比 sm Tailwind 临界点更小的设备中，我们只想拥有 1 个 column，按默认即可。大于 sm 临界点的设备，我们希望拥有 3 columns。对于大于 xl 临界点的设备，我们希望它拥有 6 个列。对于大于 2xl 临界点的设备，我们希望它拥有 8 个列。

在 Section 内，我们有一个 Text input。TextInput 是表单组件且所有表单组件都有一个 columnSpan() 方法，因此我们可以用它来指定该 TextInput 应该占用多少 column。对小于 sm 临界点的设备，我们希望 TextInput 占用 1 column，此为默认值。对于大于 sm 临界点的设备，我们希望其占用 2 columns。对于大于 xl 临界点的设备，我们希望它占用 3 个列。对于大于 2xl 临界点的设备，我们希望它占用 4 个列。

use Filament\Forms\Components\Section;
use Filament\Forms\Components\TextInput;
 
Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])
    ->schema([
        TextInput::make('name')
            ->columnSpan([
                'sm' => 2,
                'xl' => 3,
                '2xl' => 4,
            ]),
        // ...
    ])
use Filament\Forms\Components\Section;
use Filament\Forms\Components\TextInput;

Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])
    ->schema([
        TextInput::make('name')
            ->columnSpan([
                'sm' => 2,
                'xl' => 3,
                '2xl' => 4,
            ]),
        // ...
    ])

#Grid 组件

所有布局组件都支持 columns() 方法，不过你还是可以使用另外的 Grid 组件。如果你觉得表单 Schema 能从显式的 Grid 语法中获益，而无需额外的样式，此方式可能对你有用。你可以将 column 配置直接传入到 Grid::make() 方法，而无需使用 columns() 方法：

use Filament\Forms\Components\Grid;
 
Grid::make([
    'default' => 1,
    'sm' => 2,
    'md' => 3,
    'lg' => 4,
    'xl' => 6,
    '2xl' => 8,
])
    ->schema([
        // ...
    ])
use Filament\Forms\Components\Grid;

Grid::make([
    'default' => 1,
    'sm' => 2,
    'md' => 3,
    'lg' => 4,
    'xl' => 6,
    '2xl' => 8,
])
    ->schema([
        // ...
    ])

#在 Grid 中设置组件的起始列

如果你想在 Grid 的指定列中开始渲染一个组件，你可以使用 columnStart() 方法。该方法接收一个整型、或者一个临界点和起始列数字组成的数组：

• columnStart(2) 会让组件在所有临界点中都起始于第 2 列。
• columnStart(['md' => 2, 'xl' => 4]) 使得组件在中等设备中起始于第 2 列，并在超大设备中起始于第 4 列。小型设备默认临界点使用 1 列，除非你使用了 default 数组键。

use Filament\Forms\Components\Section;
 
Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])
    ->schema([
        TextInput::make('name')
            ->columnStart([
                'sm' => 2,
                'xl' => 3,
                '2xl' => 4,
            ]),
        // ...
    ])
use Filament\Forms\Components\Section;

Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])
    ->schema([
        TextInput::make('name')
            ->columnStart([
                'sm' => 2,
                'xl' => 3,
                '2xl' => 4,
            ]),
        // ...
    ])

本例中，Grid 在小型设备中拥有 3 列，在超大设备中拥有 6 列，在超超大设备中拥有 8 列。在小型设备中，文本输入框的起始点在第 2 列，在超大设备中起始点在第 2 列，在超超大设备中起始于第 3 列。该代码本质上生成了一个布局，使得无论 Grid 拥有多少列，文本输入框总是在网格的中间开始渲染。

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion