README

此存储库包含一个用于 FilamentPHP 的自定义尺寸可视化组件。它可以在交互式网格中动态渲染并调整大小，以便将选定的产品尺寸与静态对象（例如硬币）进行可视化比较

安装

您可以通过 composer 安装此包

composer require daikazu/filament-size-visualizer-field

您可以使用以下方式发布视图

php artisan vendor:publish --tag="filament-size-visualizer-field-views"

用法

public function getFormSchema(): array
    {
        return [
            Section::make('Filament Size Visualizer Example')
                ->schema([
                    Fieldset::make('Rounded Size Visualizer')
                        ->columns(1)
                        ->schema([

                            TextInput::make('size')
                                ->debounce(600)
                                ->type('range')
                                ->minValue(1)
                                ->maxValue(15)
                                ->extraInputAttributes(['step' => 0.25])
                                ->live()
                                ->numeric()
                                ->default(2),

                            Toggle::make('show_coin')
                                ->live(),

                            RoundedSizeVisualizer::make('size')
                                ->size(960)
                                ->padding(50)
                                ->sizeText('Inches')
                                ->staticObjectImage(asset('vendor/filament-size-visualizer-field/assets/quarter.png'))
                                ->dynamicObjectImage(asset('vendor/filament-size-visualizer-field/assets/example-1.png'))
                                ->showStaticObject(fn (Get $get) => $get('show_coin')),
                        ]),
                ]),

        ];
    }

可用属性

样式定制

您可以通过针对 .filament-size-visualizer 类来定制画布包装的样式。

示例

.filament-size-visualizer {
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: clip;
}

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请审查 我们的安全策略 了解如何报告安全漏洞。

致谢

• Mike Wall
• 所有贡献者

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件。