公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs

Languages

Version

Theme

信息列表 - 布局

Grid

概述

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

响应式设置网格 Columns 的数量

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

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

临界点(smmdlgxl2xl)由 Tailwind 定义,可以在 Tailwind 文档中查看。

控制组件应该占用的列宽

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

  • columnSpan(2) 将会使组件在所有临界点中占用 2 个 columns。
  • 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 Entry。TextEntry 是消息列表组件且所有表单组件都有一个 columnSpan() 方法,因此我们可以用它来指定该 TextEntry 应该占用多少 column。对小于 sm 临界点的设备,我们希望 TextEntry 占用 1 column,此为默认值。对于大于 sm 临界点的设备,我们希望其占用 2 columns。对于大于 xl 临界点的设备,我们希望它占用 3 个列。对于大于 2xl 临界点的设备,我们希望它占用 4 个列。

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

Grid 组件

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

use Filament\Infolists\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\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;
 
Section::make()
->columns([
'sm' => 3,
'xl' => 6,
'2xl' => 8,
])
->schema([
TextEntry::make('name')
->columnStart([
'sm' => 2,
'xl' => 3,
'2xl' => 4,
]),
// ...
])

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

Edit on GitHub

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

上一页
开始
下一页
Fieldset