README

Leapt SlugType bundle 允许表单字段根据另一个文本字段的内容动态生成基于内容的缩略名。

需求

• PHP ^8.2
• Symfony ^6.4 或 ^7.0
• Webpack Encore & Stimulus bridge 已在项目中存在

安装

composer require leapt/slug-type-bundle

# Don't forget to install the JavaScript dependencies as well and compile
npm install --force
npm run watch

# or use yarn
yarn install --force
yarn watch

然后，在你的 Twig 配置中，添加你想要应用的表单主题

# config/packages/twig.yaml
twig:
    form_themes:
        - '@LeaptSlugType/bootstrap5_layout.html.twig'

目前有 3 种表单主题可用

• @LeaptSlugType/basic_layout.html.twig
• @LeaptSlugType/bootstrap4_layout.html.twig
• @LeaptSlugType/bootstrap5_layout.html.twig

使用方法

在你的表单类型中，对将处理缩略名的字段使用 SlugType，并给它一个 target 选项，该选项将用于生成缩略名

<?php

namespace App\Form\Type;

use Leapt\SlugTypeBundle\Form\SlugType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

final class CenterType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('name', TextType::class)
            ->add('slug', SlugType::class, [
                'target' => 'name',
            ])
        ;
    }
}

默认情况下，对于 Bootstrap 4 & 5 主题，应用了一个 btn-secondary 类到锁定按钮上。你可以通过使用任何表单主题的 button_class 选项来更改它

$builder->add('slug', SlugType::class, [
    'target' => 'name',
    'button_class' => 'btn-warning',
]);

你还可以自定义锁定和解锁图标。默认情况下，它使用表情符号，但如果你使用例如 FontAwesome，你可以覆盖它

$builder->add('slug', SlugType::class, [
    'target' => 'name',
    'locked_icon' => '<i class="fas fa-fw fa-lock"></i>',
    'unlocked_icon' => '<i class="fas fa-fw fa-lock-open"></i>',
]);

自定义设计

该扩展包提供了一个默认样式表，以便为只读输入添加灰色背景。如果你希望添加自己的设计，可以禁用它。

在 assets/controllers.json 中，通过将 @leapt/slug-type-bundle/dist/style.css 的自动导入切换到 false 来禁用默认样式表

{
    "controllers": {
        "@leapt/slug-type-bundle": {
            "slug": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "@leapt/slug-type-bundle/dist/style.css": false
                }
            }
        }
    },
    "entrypoints": []
}

注意：你应该将值设置为 false 而不是删除该行，这样 Symfony Flex 不会在未来再次尝试添加该行。

完成后，默认样式表将不再使用，你可以在输入之上实现自己的 CSS。

贡献

请随意贡献，比如通过发送 pull requests 来添加功能/测试，或者 创建问题 :)

注意，有一些辅助工具可以维护代码质量，你可以使用以下命令运行它们

composer cs:dry # Code style check
composer cs:fix # Fix code style
composer phpstan # Static analysis
composer phpunit # Run tests

# Or run all cs:dry, phpstan & phpunit scripts using the following:
composer ci