README

关于

已弃用

此包将响应式框架Foundation（感谢ZURB）的功能集成到Symfony中，提供模板、Twig扩展、服务和命令。您可以为项目快速设置响应式主题。它将具有Foundation的“外观和感觉”、响应性和简单性。

注意：此包不会添加Foundation框架，而是为Symfony提供与之协同工作的功能

演示可在此处获得。

要求

Symfony 2.7+.
jQuery 2+ JavaScript库。
Foundation 5+ 高级响应式框架。
Font Awesome 4+，包含585+个图标。

安装和配置

composer require florianbelhomme/flob-foundation-bundle

然后，编辑您的 app/AppKernel.php 并添加

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            ...
            new Flob\Bundle\FoundationBundle\FlobFoundationBundle(),
            ...
        ];
    }
}

现在您需要将库添加到您的项目中。

最简单的方法（但还有其他方法）

<html>
    <head>
        ...
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" type="text/css" />
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" type="text/css" />
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" />
        <link rel="stylesheet" href="{{ asset('bundles/flobfoundation/css/foundationtosymfony.css') }}" type="text/css" />
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
        ...
    </head>
    <body>
        ...
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
        <script type="text/javascript" src="{{ asset('bundles/flobfoundation/js/foundationtosymfony.js') }}"></script>
    </body>
</html>

您的项目已准备就绪！

配置

此包默认不为主题任何元素，如果您想在特定的表单或包中使用Foundation。

要自动为主题表单或其他元素，请进入 app/config/config.yml 并在末尾添加

flob_foundation:
    theme: { form: true, knp_menu: true, knp_paginator: true, pagerfanta: true }

如果您想执行特定的HTML标记，以扩展此包的模板

在您的包中创建您的模板
在顶部添加 {% extends 'FlobFoundationBundle:Form:foundation_form_div_layout.html.twig' %}（例如，表单模板）
编辑 app/config/config.yml

flob_foundation:
    theme: { form: true, knp_menu: true, knp_paginator: true, pagerfanta: true }
    template:
        form: 'YourBundle:YourFolder:formtemplate.html.twig'
        breadcrumb: 'YourBundle:YourFolder:breadcrumbtemplate.html.twig'
        knp_menu: 'YourBundle:YourFolder:menutemplate.html.twig'
        knp_paginator: 'YourBundle:YourFolder:paginatortemplate.html.twig'
        pagerfanta: 'YourPagerFantaTemplate'

使用

主题

但是，您可以通过以下方法之一使用这些方法来为主题特定元素，而不是在配置中设置它

{# Form #}
{% form_theme yourform 'FlobFoundationBundle:Form:foundation_form_div_layout.html.twig' %}

{# Menu #}
{{ knp_menu_render('yourmenu', {'template' : 'FlobFoundationBundle:Menu:foundation_knp_menu.html.twig'}) }}

{# Pagination with KNP paginator #}
{{ knp_pagination_render(yourpagination, 'FlobFoundationBundle:Pagination:foundation_sliding.html.twig') }}

{# Pagination with PagerFanta (through WhiteOctober bundle) #}
{{ pagerfanta(paginationFanta, 'foundation') }}

顶部栏

要创建一个顶部栏，只需创建您的KNP菜单，将路由添加到根元素，并设置额外选项

$menu = $this->factory->createItem(
    'My website',
    [
        'route' => 'homepage',
        'extras' => ['menu_type' => 'topbar']
    ]
);

带有图标的菜单项

您可以在标签之前、之后或代替标签添加一个图标。默认情况下，图标将被添加到标签之前。图标必须是 Font-Awesome 中的一个名称，例如："fa-bell-o"。

$menu->addChild(
    "Entry",
    [
        'route' => 'route_entry',
        'extras' => [
            'icon' => 'fa-bell-o',
            'icon_position' => 'no-label' # can be 'before', 'after' or 'no-label'
        ]
    ]
);

面包屑

如果您想从 KNP 菜单生成面包屑，请在您的模板中添加此代码

{{ flob_foundation_breadcrumb_render('yourknpmenu') }}

如果您想使用特定的模板

{{ flob_foundation_breadcrumb_render('yourknpmenu', {'template' : 'YourBundle:YourFolder:breadcrumbtemplate.html.twig') }}

滑块（表单字段类型）

现在您可以在表单中使用滑块。

滑块扩展了数字字段类型，因此具有相同的选项。额外的选项包括

start : 类型：整数 / 默认：0 这指定了起始点的数字。
end : 类型：整数 / 默认：100 这指定了范围内的最高数字。
step : 类型：整数 / 默认：1 这指定了光标的增量跳过。
vertical : 类型：布尔值 / 默认：false 如果为真，则垂直显示滑块而不是水平显示。

这是字段的示例

$builder->add('My slider', 'slider', ['label' => 'Slider', 'start' => 10, 'end' => 20, 'step' => 2]);

开关（表单字段类型）

现在您可以在表单中使用开关。

开关扩展了选择字段类型，因此具有相同的选项。但是您不能将选项 "expanded" 设置为 false（不能是选择框）。

这是字段的示例

$builder->add('switch_radio', 'switch', ['label' => 'Switch (as radio)', 'choices' => [1 => 'Choice 1', 2 => 'Choice 2', 3 => 'Obi wan kenobi'], 'multiple' => false]);

按钮组（表单字段类型）

现在您可以在表单中使用按钮组。

按钮组是由 Foundation 组合在一起的按钮，这样它们就会在同一行上渲染，而不是在不同的行上。

这是字段的示例

$builder->add(
    'buttons',
    'button_group',
    [
        'label' => 'Buttons group',
        'buttons' => [
            'back' => [
                'type'    => 'button',
                'options' => [
                    'label' => 'Cancel',
                    'attr' => [
                        'class' => 'secondary',
                    ],
                ],
            ],
            'save' => [
                'type'    => 'submit',
                'options' => [
                    'label' => 'Submit',
                ],
            ],
        ],
        'attr' => [
            'class' => 'right',
        ],
    ]
);

在 buttons 数组中，您定义需要渲染的按钮。所有按钮都应该是 FormType ButtonType。对于 ButtonType，您不能在 Symfony 中指定行为。您可以将类型更改为 reset，以渲染一个带有 type="reset" 的按钮（ResetType），但不能添加链接。

但是，您有多种选项

在 attr 数组中添加一个 onClick 标签
在 attr 数组中添加一个 link 类，一个 data-url 标签，并让 JavaScript 处理它

按钮栏（表单字段类型）

按钮栏是一组按钮组，非常适合您想要与相似元素或页面相关联的一组操作的情况。

这是字段的（长的：D）示例

$builder->add(
    'button_bar',
    'button_bar',
    [
        'button_groups' => [
            'button_group_first' => [
                'label' => 'Buttons group',
                'buttons' => [
                    'one' => [
                        'type'    => 'submit',
                        'options' => [
                            'label' => 'one',
                        ],
                    ],
                    'two' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'two',
                            'attr' => [
                                'class' => 'success',
                            ],
                        ],
                    ],
                    'three' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'three',
                            'attr' => [
                                'class' => 'alert',
                            ],
                        ],
                    ],
                ],
                'attr' => [
                    'class' => 'round',
                ],
            ],
            'button_group_second' => [
                'label' => 'Buttons group',
                'buttons' => [
                    'four' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'four',
                            'attr' => [
                                'class' => 'disabled',
                            ],
                        ],
                    ],
                    'five' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'five',
                            'attr' => [
                                'class' => 'secondary',
                            ],
                        ],
                    ],
                    'six' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'six',
                            'attr' => [
                                'class' => 'secondary',
                            ],
                        ],
                    ],
                ],
                'attr' => [
                    'class' => 'radius',
                ],
            ],
        ],
    );

作者

Florian Belhomme a.k.a Solune
社区贡献者

贡献

对于包的贡献总是受欢迎！反馈很棒。

请随意分叉项目并创建一个 PR。您也可以帮助他人，查看问题。

支持

如果您遇到问题，请填写问题。

许可

此包根据 MIT 许可证许可。

florianbelhomme / flob-foundation-bundle

维护者

详细信息

README

关于

要求

推荐

安装和配置

配置

使用

主题

顶部栏

带有图标的菜单项

面包屑

滑块（表单字段类型）

开关（表单字段类型）

按钮组（表单字段类型）

按钮栏（表单字段类型）

作者

贡献

支持

许可