Attributes在Templates中的应用

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>