告别JSON编辑烦恼！使用filament-json-column提升Filament开发效率

filament-json-column 是一个 Filament 的插件，它允许你在 Filament 的表单中以更友好的方式查看和编辑 JSON 格式的字段。它提供了两个选项卡：

• Viewer: 以美观的格式展示 JSON 数据，方便阅读。
• Editor: 提供一个 JSON 编辑器，方便修改 JSON 数据。

安装

使用 Composer 安装非常简单：

<code>composer require valentin-morice/filament-json-column</code>

使用

确保你的 Eloquent 模型中，对应的字段被 cast 为 json 或 array。

<pre class="brush:php;toolbar:false;">protected $casts = [
    'example' => 'array', // 或者 'json'
];

然后在 Filament 的表单中使用 FilamentJsonColumn：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

<pre class="brush:php;toolbar:false;">use Filament\Forms\Form;
use ValentinMorice\FilamentJsonColumn\FilamentJsonColumn;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            FilamentJsonColumn::make('example'),
        ]);
}

自定义

• Accent Color: 可以自定义选项卡选择器的颜色。

  <code class="php">FilamentJsonColumn::make('example')->accent('#007bff');</code>

  登录后复制

• Single Tab: 可以只显示 Viewer 或 Editor。

  <pre class="brush:php;toolbar:false;">FilamentJsonColumn::make('example')->editorOnly(); // 只显示 Editor
  FilamentJsonColumn::make('example')->viewerOnly(); // 只显示 Viewer

  登录后复制

• Height: 可以自定义 Viewer 和 Editor 的高度。

  <pre class="brush:php;toolbar:false;">FilamentJsonColumn::make('example')->editorHeight(500);
  FilamentJsonColumn::make('example')->viewerHeight(500);

  登录后复制

filament-json-column 极大地简化了 Filament 中 JSON 数据的处理，提高了开发效率。如果你在使用 Filament，强烈推荐尝试这个插件。它让 JSON 数据的查看和编辑变得更加轻松愉快！

以上就是告别JSON编辑烦恼！使用filament-json-column提升Filament开发效率的详细内容，更多请关注php中文网其它相关文章！