DOCS
DOCS

Languages

Version

Theme

表格构造器

安装

要求

运行 Filament 有一些特定的要求:

  • PHP 8.0+
  • Laravel v8.0+
  • Livewire v2.0+

表格构造器已经在后台面板 2.x中预装了。不过如果你要在其他应用中使用，你还是需要按照以下安装指示操作。

首先, 使用 Composer 安装表格构造器:

composer require filament/tables:"^2.0"

新的 Laravel 项目

要快速使用表格构造器，你可以使用这些命令安装 Livewire、Alpine.js和TailwindCSS:

php artisan tables:install
npm install
npm run dev

这些命令会粗暴地重写覆盖你现有的文件，因此我们只推荐在新项目中使用这种方法。

现在可以开始构建表格了!

已有的 Laravel 项目

此扩展包使用如下依赖：

你可以通过 NPM 命令安装这些依赖包：

npm install alpinejs @alpinejs/focus postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev

配置 Tailwind CSS

要完成Tailwind安装，你必须在项目的根目录中创建 tailwind.config.js 文件。最简单的做法是运行 npx tailwindcss init 命令。

在 tailwind.config.js 中，注册你安装好的插件，然后添加表格构造器要使用的自定义颜色：

import colors from 'tailwindcss/colors' 
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography' 
 
export default {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php', 
    ],
    theme: {
        extend: {
            colors: { 
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        forms, 
        typography, 
    ],
}

当然，你也可以指定你自己定义的 primary, success, warning 及 danger 颜色，这会替换掉原有的颜色。

打包资源

新的 Laravel 项目默认使用 Vite 打包资源。不过，你仍然可以使用 Laravel Mix。

Vite

如果你使用 Vite，你应该通过 NPM 手动安装 Autoprefixer：

npm install autoprefixer --save-dev

在项目的根目录中新建 postcss.config.js 文件，以插件形式注册 Tailwind CSS 和 Autoprefixer:

export default {
    plugins: {
        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/Http/Livewire/**',
                'app/Tables/Columns/**',
            ], 
        }),
    ],
});

Laravel Mix

在 webpack.mix.js 文件中，以 PostCSS 插件的形式注册 Tailwind CSS:

const mix = require('laravel-mix')
 
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'), 
    ])

配置样式

在 /resources/css/app.css 文件中，引入 filament/forms vendor CSS 和 TailwindCSS:

@import '../../vendor/filament/forms/dist/module.esm.css';
 
@tailwind base;
@tailwind components;
@tailwind utilities;

配置脚本

在/resources/js/app.js 文件中，引入 Alpine.js、@alpinejs/focus、filament/forms 和 filament/notifications 插件，并注册：

import Alpine from 'alpinejs'
import Focus from '@alpinejs/focus'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
 
Alpine.plugin(Focus)
Alpine.plugin(FormsAlpinePlugin)
Alpine.plugin(NotificationsAlpinePlugin)
 
window.Alpine = Alpine
 
Alpine.start()

编译资源

使用 npm run dev 命令编译新的 CSS 和 JS 资源:

配置布局

最后，为 Livewire 组件新建 resources/views/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>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @livewireStyles
        @livewireScripts
        @stack('scripts')
    </head>
 
    <body class="antialiased">
        {{ $slot }}
 
        @livewire('notifications')
    </body>
</html>

现在可以开始构建表格了!

发布配置文件

如有需要时，你可以使用这个命令发布此扩展包的配置文件:

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

发布翻译文件

如果有需要翻译此扩展包，你可以使用此命令发布语言文件：

php artisan vendor:publish --tag=tables-translations

由于此包依赖于其他 Filament 包，你也可以发布这些语言文件：

php artisan vendor:publish --tag=filament-forms-translations
php artisan vendor:publish --tag=filament-support-translations

升级向导

要将该软件包升级到最新版本，你必须运行:

composer update
php artisan filament:upgrade

我们推荐将 filament:upgrade 添加到 composer.json 文件的 post-update-cmd 中，使之自动运行：

"post-update-cmd": [
    // ...
    "@php artisan filament:upgrade"
],
Edit on GitHub

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

下一页
开始