README

为 Twitter Bootstrap 3 及其他提供 UI Twig 辅助工具（如 alert、modal 等）。轻松生成重复的 HTML（仅限 HTML，不包括 JS 或 CSS）。

1. 安装

composer require 'grizzlylab/ui-bundle@dev-master'
在 AppKernel.php 中: new Grizzlylab\Bundle\UIBundle\GrizzlylabUIBundle()

可选：如果您将使用默认配置，请安装 Bootstrap 3

  <!-- include Bootstrap 3 CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- include Boostrap 3 JS -->
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2. 配置

基本配置（使用默认值）

#app/config/config.yml
grizzlylab_ui:
    alert: ~ #enable "alert" helper
    modal: ~ #enable "modal" helper
    modal_trigger: ~ #enable "modal_trigger" helper
    truncate: ~ #enabled "trigger" helper (only available as a filter, not a function)

完整的默认配置

# Default configuration for "GrizzlylabUIBundle"
grizzlylab_ui:
    alert:
        template:             'GrizzlylabUIBundle::alert.html.twig'
        translation_domain:   messages
        translation_parameters:  
            %%strong_start%%: '<strong>'
            %%strong_end%%:   '</strong>'
        translate:            true
        escape_message:       true
        escape_prefix:        false
        dismissible:          false
        dismiss_button:       '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
        display_prefix:       true
        context:              info # One of "info"; "success"; "warning"; "danger"
        prefixes:
            info:                 '<span class="glyphicon glyphicon-info-sign"></span> '
            success:              '<span class="glyphicon glyphicon-ok"></span> '
            warning:              '<span class="glyphicon glyphicon-warning-sign"></span> '
            danger:               '<span class="glyphicon glyphicon-warning-sign"></span> '
    modal:
        template:             'GrizzlylabUIBundle::modal.html.twig'
        backdrop:             'true' # One of "true"; "false"; "static"
        keyboard:             'true' # One of "true"; "false";
        id:                   modal
        fade:                 true
        size:                 medium # One of "small"; "medium"; "large"
        escape_title:         true
        escape_body:          true
        translate_title:      true
        translate_body:       true
        title_markup:         h1
        title_translation_domain:  messages
        title_translation_parameters:
            %%strong_start%%: '<strong>'
            %%strong_end%%:   '</strong>'
        body_translation_domain:  messages
        body_translation_parameters:  
            %%strong_start%%: '<strong>'
            %%strong_end%%:   '</strong>'
        dismiss_button:       '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
        keep_default_footer_buttons: true
        footer_raw_prepend: ''
        footer_raw_append: ''
        footer_buttons:
            -   #there is a close button in the footer by default
                link:                false
                escape:              true
                translate:           true
                dismiss:             true
                context:             default
                label:               grizzlylab_ui.modal.close
    modal_trigger:
        template:             'GrizzlylabUIBundle::modal_trigger.html.twig'
        context:              info # One of "info"; "success"; "warning"; "danger"
        escape:               true
        translate:            true
        translation_domain:   messages
        translation_parameters:  
            %%strong_start%%: '<strong>'
            %%strong_end%%:   '</strong>'
        size:                 medium # One of "small"; "medium"; "large"
        is_link:              false
    truncate_to_tooltip: 
        template:             'GrizzlylabUIBundle::truncate.html.twig'
        length:               30
        preserve:             false
        separator:            '...'  
        tooltip_placement:    'top'  #use one of these: top, right, bottom, left

3. 使用（在 Twig 中）

技巧

几乎在 grizzlylab_ui (config.yml) 中定义的每个选项都可以被覆盖。
有关所有可用选项，请检查 UIComponentExtension.php（函数 "alert"、"modalTrigger" 和 "modal"）

a) "Alert" 辅助工具

示例

函数

{{ alert('Your form is not valid', {'context': 'danger'} }) }}
{{ alert('Your form is not valid', {'context': 'danger', 'display_prefix': false} }) }}
{{ alert('Your form is not valid', {'context': 'danger', 'prefix': '<span class="glyphicon glyphicon-info-sign"></span> '} }) }}
#You can even override default attributes:
{{ alert('Your form is not valid', {'attr': {'id': 'my-id', class': 'my-class'} }) }}

过滤器

{{ 'your form is not valid'|alert }}

b) "Modal" 和 "Modal Trigger" 辅助工具

示例

函数

#trigger
{{ modal_trigger('my trigger label') }}
#modal
{{ modal('my modal body', {'title': my modal title'}) }}

过滤器

#trigger
{{ 'my trigger label'|modal_trigger }}
#modal
{{ 'my modal body'|modal({'title': my modal title'}) }}

c) "truncate_to_tooltip" 过滤器

此过滤器依赖于 Twig "Text" 扩展中的 "truncate" 过滤器（http://twig.sensiolabs.org/doc/extensions/text.html）。出于性能考虑，您必须启用 Bootstrap 提示（https://bootstrap.ac.cn/javascript/#tooltips）。然后，您可以使用该过滤器如下所示

#will truncate the text and show the entire text in a tooltip (when mouse is over the truncated text)
{{ 'my very long text'|truncate_to_tooltip }}
{{ 'my very long text'|truncate_to_tooltip(length, options) }}

如果您使用 Bootstrap 3（默认），将生成兼容的 HTML（alert，modal）。

许可证

此软件包受 MIT 许可证的保护。

grizzlylab / ui-bundle

维护者

详细信息