文本字段
文本字段展示对应数据库数据中的简单文本:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
展示描述
描述可被用于在字段内容的上方或者下方渲染额外的文本。
使用 description()
方法会在文本内容的下方显示描述:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->description(fn (Post $record): string => $record->description)
默认情况下,描述显示在主文本下方,不过你也可以传入第二个参数将其移动到文本上方:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->description(fn (Post $record): string => $record->description, position: 'above')
日期格式
你可以使用 date()
和 dateTime()
方法,对使用 PHP 日期格式串的值进行格式化:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('created_at')->dateTime()
你可以使用 since()
方法用 Carbon 的 diffForHumans()
格式化字段状态值:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('created_at')->since()
货币格式
money()
方法让你快速格式化以任何货币格式化金额。此功能内部使用 akaunting/laravel-money
实现:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('price')->money('eur')
限制文本长度
你也可以使用 limit()
限制单元格值的长度:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')->limit(50)
你也可以重新使用传入到 limit()
的值:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')
->limit(50)
->tooltip(function (TextColumn $column): ?string {
$state = $column->getState();
if (strlen($state) <= $column->getLimit()) {
return null;
}
// Only render the tooltip if the column contents exceeds the length limit.
return $state;
})
限制字数
你可以使用 words() 限制单元格字数:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')->words(10)
内容换行
如果你的字段内容太长,你需要让其换行。可以使用 wrap()
方法:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')->wrap()
渲染HTML
如果字段值是 HTML,可以使用 html()
方法渲染:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')->html()
Enum格式
你可以使用 enum()
方法将一套已知的单元格值进行转换:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('status')->enum([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
])
展示行号
你可能需要在表格中展示当前行的行号:
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;
TextColumn::make('index')->getStateUsing(
static function (stdClass $rowLoop, HasTable $livewire): string {
return (string) (
$rowLoop->iteration +
($livewire->tableRecordsPerPage * (
$livewire->page - 1
))
);
}
),
自定义格式
你也可以传入一个自定义格式的回调函数作为参数到 formatStateUsing()
方法中,回调函数可以接收单元格的状态 state
参数,和可选参数 $record
:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('status')
->formatStateUsing(fn (string $state): string => __("statuses.{$state}"))
如果 cell 为空添加占位符
有时,你想在 cell 值为空时展示占位符:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('updated_at')
->placeholder('Never')
自定义颜色
你可以为文本设置颜色,比如 primary
、secondary
、success
、warning
或 danger
:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('status')
->color('primary')
添加图标
文本字段也可以添加图标:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->icon('heroicon-s-mail')
使用 iconPosition()
设置图标位置:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->icon('heroicon-s-mail')
->iconPosition('after') // `before` or `after`
自定义文本字体大小
使用 size('sm')
可以让文本字体变小:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->size('sm')
或者 size('lg')
使其变大:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->size('lg')
自定义字体粗细
文本字段字体粗细默认是常规字体。不过你可以改为如下选项: thin
、extralight
、light
、medium
、semibold
、bold
、extrabold
或 black
。
比如,你可以使用 weight('bold')
改为粗体:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->weight('medium')
自定义字体类型
你可以将字体类型修改为如下选项:sans
、serif
或 mono
。
比如,你可以使用 fontFamily('mono')
将字体设置为 mono:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('text')
->fontFamily('mono')
允许将文本复制到剪切板
你可以将文本设为可复制,这样点击单元格可将文本复制到剪切板,并可以选择指定自定义确认消息和持续时间(以毫秒为单位)。此功能仅在应用程序启用 SSL 时有效。
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->copyable()
->copyMessage('Email address copied')
->copyMessageDuration(1500)
Filament 在后台面板中使用 tooltip 展示复制信息。如果你想要在后台面板之外使用复制特性,请确保你的应用中安装了 @ryangjchandler/alpine-tooltip 。