DOCS
DOCS

Languages

Version

Theme

Widgets

安装

在面板中使用 Widget？那你可以跳过此安装。本教程适合于在自定义 TALL 栈应用中使用该包的开发者。

要求

运行 Filament 有一些基础要求：

安装

首先，使用 Composer 导入此包：

composer require filament/widgets:"^3.2" -W

全新 Laravel 项目

要在新 Laravel 项目中快速开始使用 Filament，运行如下命令安装 Livewire、Alpine.js 和 Tailwind CSS：

php artisan filament:install --scaffold --widgets
 
npm install
 
npm run dev

由于这些命令会覆盖你应用中现有的文件，因此我们只推荐在新的 Laravel 项目中运行这些命令！

已有的 Laravel 项目

首先，运行以下命令安装该包的资源：

php artisan filament:install --widgets

安装 Tailwind CSS

Filament 使用 Tailwind CSS v3 作为样式。如果你的项目使用的是 Tailwind CSS v4，很不幸你需要将其降级到 v3 才能使用 Filament。Filament v3 无法使用 Tailwind CSS v4，因其引入了破坏性变更。Filament v4 将会支持 Tailwind CSS v4。

首先，使用 npm 安装 Tailwind CSS 及它的 forms 和 typography 插件：

npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev

新建一个 tailwind.config.js 文件。确保添加了 Filament 的 preset，它配置了颜色和安装的插件：

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

配置样式

在 resources/css/app.css 中，引入 Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

在应用根目录中创建一个 postcss.config.js 文件，并将 Tailwind CSS、 PostCSS Nesting 和 Autoprefixer 注册成插件：

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

自动刷新浏览器

你可能也想更新 vite.config.js 文件，以在 Livewire 组件更新后自动刷新页面:

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

编译资源

使用 npm run dev 编译新的 CSS 和 JS 资源。

配置布局

最后，为 Livewire 组件创建一个新的 resources/views/components/layouts/app.blade.php 布局文件：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
 
        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>{{ config('app.name') }}</title>
 
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
 
        @filamentStyles
        @vite('resources/css/app.css')
    </head>
 
    <body class="antialiased">
        {{ $slot }}
 
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

发布配置

你可以发布此包的配置，使用如下命令：

php artisan vendor:publish --tag=filament-config

升级

当运行 composer update 命令时，Filament 会自动升级到最新的非破坏性版本。升级完成后，应该清除所有 Laravel 缓存，并且重新发布前端资源。你可以使用 filament:upgrade 命令一次性完成这些动作，该命令会第一次运行 filament:install 添加到 composer.json 文件中：

"post-autoload-dump": [
    // ...
    "@php artisan filament:upgrade"
],

请注意 filament:upgrade 不会真正处理升级过程，因为 Composer 已经做了升级，如果你不使用 post-autoload-dump 钩子手动升级，你可以自己运行该命令：

composer update
 
php artisan filament:upgrade
Edit on GitHub

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

下一页
统计概览 Widget