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

Languages

Version

Theme

面板构建器

主题

修改颜色

配置中,你可以轻松地修改使用的颜色。Filament 随带了 6 个预定义颜色,你可以在框架的任意地方使用。他们可以自定义如下:

use Filament\Panel;
use Filament\Support\Colors\Color;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->colors([
'danger' => Color::Rose,
'gray' => Color::Gray,
'info' => Color::Blue,
'primary' => Color::Indigo,
'success' => Color::Emerald,
'warning' => Color::Orange,
]);
}

Filament\Support\Colors\Color 类包含了所有 Tailwind CSS 调色板中的所有颜色选项:

你也可以将一个函数传递给 register(),该函数只会在应用渲染时调用。如果你从服务提供者中调用 register(),并希望当前授权用户访问对象(对象会在稍后的中间件中初始化),这非常有用。

此外,你也可以用一个 RGB 值数组的格式,传入你自己的颜色:

$panel
->colors([
'primary' => [
50 => '238, 242, 255',
100 => '224, 231, 255',
200 => '199, 210, 254',
300 => '165, 180, 252',
400 => '129, 140, 248',
500 => '99, 102, 241',
600 => '79, 70, 229',
700 => '67, 56, 202',
800 => '55, 48, 163',
900 => '49, 46, 129',
950 => '30, 27, 75',
],
])

生成调色板

如果你想基于十六进制值或者 RGB 值生成调色板,你可以传入:

$panel
->colors([
'primary' => '#6366f1',
])
 
$panel
->colors([
'primary' => 'rgb(99, 102, 241)',
])

修改字体

默认情况下,我们使用 Inter 字体。你可以在配置 文件使用 font() 对其进行修改:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->font('Poppins');
}

所有 Google Fonts 都是可用的。

修改字体 Provider

Bunny Fonts CDN 用于提供字体服务。它符合 GDPR。如果你想使用 Google Fonts CDN,可以通过 font 方法的 $provider 参数实现:

use Filament\FontProviders\GoogleFontProvider;
 
$panel->font('Inter', provider: GoogleFontProvider::class)

如果你想在本地样式表中提供字体服务,可以使用 LocalFontProvider

use Filament\FontProviders\LocalFontProvider;
 
$panel->font(
'Inter',
url: asset('css/fonts.css'),
provider: LocalFontProvider::class,
)

创建自定义主题

Filament 允许你通过编译自定义样式表替换默认的样式,修改 CSS 用以渲染 UI。自定义的样式表称为 "主题"。

主题使用了 Tailwind CSS、Tailwind Forms 插件、Tailwind Typography 插件、PostCSS Nesting 插件Autoprefixer

要在面板中创建自定义主题,你可以使用 php artisan make:filament-theme 命令:

php artisan make:filament-theme

如果你有多个面板,你可以指定你要创建主题的面板:

php artisan make:filament-theme admin

默认情况下,该命令将使用 npm 安装依赖。如果你想使用不同的包管理器,你可以使用 --pm 选项:

php artisan make:filament-theme --pm=bun

该命令将在 /resources/css/filament 目录中生成 CSS 文件及 Tailwind 配置文件。你可以编辑这些文件自定义主题。它同时说明了如何在 Filament 中编译主题并注册。请遵照命令中的说明,完成安装过程:

⇂ 首先,添加新项目到 `vite.config.js` 中的 `input` 数组中:`resources/css/filament/admin/theme.css`
⇂ 接下来,在后台面板提供者使用 `->viteTheme('resources/css/filament/admin/theme.css')` 注册主题
⇂ 最后,运行 `npm run build` 编译主题

请参考命令以查看你需要注册的准确的文件名,它们可能不是 admin/theme.css

禁用暗黑模式

要禁用暗黑模式切换,你可以使用配置文件

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->darkMode(false);
}

修改默认的主题模式

默认情况下,Filament 使用用户的系统主题作为默认模式。比如,如果用户电脑在暗黑模式下,Filament 默认会使用暗黑模式。如果用户修改它们的电脑模式,Filament 的系统模式是响应式的。如果你想将默认模式强制修改为光亮模式或暗黑模式,可以使用 defaultThemeMode 方法,并传递 ThemeMode::LightThemeMode::Dark

use Filament\Enums\ThemeMode;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->defaultThemeMode(ThemeMode::Light);
}

默认情况下,Filament 使用你的应用名来渲染基于文本的简单 Logo。不过你可以对此进行自定义。

如果你只想修改用于 Logo 的文本,可以使用 brandName() 方法:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandName('Filament Demo');
}

要使用图片渲染 Logo 的话,你可以传入一个 URL 到 brandLogo() 方法:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(asset('images/logo.svg'));
}

此外,你也可以之间传入 HTML 到 brandLogo() 方法,比如用于渲染行内 SVG 元素:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(fn () => view('filament.admin.logo'));
}
<svg
viewBox="0 0 128 26"
xmlns="http://www.w3.org/2000/svg"
class="h-full fill-gray-500 dark:fill-gray-400"
>
<!-- ... -->
</svg>

如果你想在暗黑模式时使用不同的 Logo,请将其以同样的方式传给 darkModeBrandLogo() 方法:

Logo 高度默认是一个合理值,不过不可能覆盖所有可能的纵横比。因此,你可以使用 brandLogoHeight() 方法自定义 logo 高度:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(fn () => view('filament.admin.logo'))
->brandLogoHeight('2rem');
}

添加 favicon

要添加 favicon,你可以在配置文件中传入 favicon 的公共 URL:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->favicon(asset('images/favicon.png'));
}
Edit on GitHub

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

上一页
多租户