Attributes在Templates中的应用

1. 有哪些attributes?

  • attributes
  • title-attributes
  • content_attributes

2. 它看起来像这样:

<div {{ attributes }}></div>

3. debug 调式

  • kint()
  • dump()
  • dpm()
{{ kint(attributes) }}

4. attributes 方法

attributes.addClass()

添加单个class

<div {{ attributes.addClass('my-class') }}

添加多个class

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div {{ attributes.addClass(classes) }}></div>

删除class

attributes.removeClass()

{%
  set classes = ['red', 'green','blue']
%}
<div {{ attributes.addClass(classes).removeClass('green')> }}></div>

5. 给元素添加/设置属性

attributes.setAttributes($attribute,$value)

// 给div添加id,id的值为myID
<div {{ attributes.setAttribute('id','myID') }}></div>

输入:

<div id="myID"></div>

6. 给元素删除属性

attributes.removeAttribute($attribute)

// 删除id属性
<div {{ attributes.removeAttribute('id') }}></div>

7. 判断是否存在class

attributes.hasClass($class)

{% if attributes.hasClass('myClass') %}
  {# do some thing #}
{% endif %}

8. 8.3.x 新增创建attribute对象

create_attribute()

以前,只能使用Twig模板中的现有Attribute对象。现在,可以使用Twig模板内的函数创建新的Attribute对象。这些对象可以像进入Twig模板的其他Attribute对象一样被操纵。

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).addAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>
<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

 

链接 USING ATTRIBUTES IN TEMPLATES