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

Languages

Version

Theme

信息列表

安装

面板中已经预装了信息列表。本教程适合于在自定义 TALL 栈(Tailwind, Alpine, Livewire, Laravel)应用中使用该包的开发者。

要求

运行 Filament 有一些基础要求:

  • PHP 8.1+
  • Laravel v10.0+
  • Livewire v3.0+

安装

使用 Composer 安装此包:

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

全新 Laravel 项目

要在新 Laravel 项目中快速开始使用 Filament,运行如下命令安装 LivewireAlpine.jsTailwind CSS

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

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

现有的 Laravel 项目

首先,运行以下命令安装包资源:

php artisan filament:install --infolists

安装 Tailwind CSS

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

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

新建一个 tailwind.config.js 文件,并添加 Filament 的 preset (引入 Filament 颜色及必要的 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;

在应用根目录中创建一个 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

下一页
开始