CSS 钩子

#简介

Filament 使用 CSS “钩子”类来允许使用 CSS 自定义各种 HTML 元素。

#发现钩子类

我们可以记录整个 Filament UI 中所有的钩子类，但这将是一项艰巨的工作，很可能对你没有多大用处。因此，我们建议使用浏览器的开发者工具来检查要自定义的元素，然后使用钩子类来定位这些元素。

所有钩子类都使用 fi- 前缀，这是识别钩子类的好方法。它们通常位于类列表的开头，因此很容易找到，但有时如果我们必须用 JavaScript 或 Blade 条件性地应用它们，它们可能会在列表靠后的位置中。

如果你找不到你要找的钩子类，尽量不要绕过它，因为它可能会使你的样式自定义在未来的版本中引入破坏性变更。相反，请打开一个 pull 请求来添加你需要的 hook 类。我们可以帮助你保持命名的一致性。对于这些拉取请求，你可能甚至不需要在本地拉取 Filament 存储库，因为你可以直接在 GitHub 上编辑 Blade 文件。

#将样式应用于钩子类

例如，如果你想自定义侧边栏的颜色，你可以在浏览器的开发工具者中检查侧边栏元素，查看它是否使用了 fi-sidebar，然后像这样将 CSS 添加到你的应用中：

.fi-sidebar {
    background-color: #fafafa;
}

此外，由于 Filament 是基于 Tailwind CSS 创建的，你也可以使用 @apply 指令将 Tailwind 类应用到 Filament 元素中：

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950;
}

有时，你可能需要使用 !important 修饰符来重写已有样式，但请谨慎使用，因为这会使你的难以样式维护：

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950 !important;
}

你甚至可以在类名前使用 ! 前缀，只将 !important 应用到特定的 Tailwind 类，这稍微不那么具有侵入性：

.fi-sidebar {
    @apply !bg-gray-50 dark:!bg-gray-950;
}

#常见的钩子类缩写

我们在钩子类中使用了一些常见的缩写，以保持简短易读：

• fi 是 “Filament” 的缩写
• fi-ac 用于表示 Actions 包中使用的类
• fi-fo 用于表示 Forms 包中使用的类
• fi-in 用于表示 Infolists 包中使用的类
• fi-no 用于表示通知包中使用的类
• fi-sc 用于表示 Schema 包中使用的类
• fi-ta 用于表示 Tables 包中使用的类
• fi-wi 用于表示 Widgets 包中使用的类
• btn 是“按钮(button)”的缩写
• col 是”列(column)“的缩写
• ctn 是“容器(container)”的缩写
• wrp 是“包装器(wrapper)”的缩写

#发布Blade视图

你可能会想将内部 Blade 视图发布到你的应用中，以便对其进行自定义。我们不建议这样做，因为它可能会在未来的更新中引入破坏性变更。请尽可能使用 CSS 钩子类。

如果你确实要发布 Blade 视图，请在 composer.json 文件中将所有 Filament 包锁定到特定版本，然后通过碰撞此版本好手动更新 Filament，并在每次更新后测试整个应用。这将有助于你安全地识别破坏性变更。

Edit on GitHub

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