公告: Filament 4.x 已正式发布。中文文档翻译正在进行中...
DOCS
DOCS

Languages

Version

Theme

表单构造器

安装

表单构造器已经在面板构造器中预装了。 本教程适合于在自定义 TALL 栈(Tailwind, Alpine, Livewire, Laravel)应用中使用表单构造器。

要求

运行 Filament 有一些基础要求：

安装

使用 Composer 引入安装此包：

composer require filament/forms:"^3.3" -W

全新 Laravel 项目

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

由于这些命令会粗暴地覆盖你应用中现有的文件，因此只推荐在新 Laravel 项目中使用该方法!

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

已有的 Laravel 项目

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

php artisan filament:install --forms

安装 Tailwind CSS

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

运行如下命令安装 Tailwind CSS 及 Tailwind Forms 和 Typography 插件：

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

新建一个 tailwind.config.js 文件，并添加 Filament 的 preset (引入 Filament color scheme 及必要的 Tailwind 插件)：

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

升级

从 Filament v2 升级？请查阅升级向导。

当运行 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

下一页
开始