This is key-value style.
86 |
87 | div(id='my-id', class_='my-class your-class')['This is key-value style.']
88 | ```
89 |
90 | Notice the `_` suffix in the `class_` attribute. This suffix is necessary for any attribute names that clashes with any Python keyword.
91 |
92 | You can also define `id` and `class` using CSS selector syntax:
93 |
94 | ```python
95 | # This is selector style.
96 |
97 | div('#my-id.my-class.your-class', title='Title')['This is selector style.']
98 | ```
99 |
100 | For attributes with names that cannot be declared using the *key-value* style, you can use the *tuple* style.
101 |
102 | ```python
103 | # This is tuple style.
104 |
105 | div('my:attr', 'x',
106 | 'ur-attr', 'y',
107 | 'their[attr]', 'z')[
108 | 'This is tuple style.'
109 | ]
110 | ```
111 |
112 | The different styles can be mixed as long as there is no duplicate attribute definition.
113 |
114 | ```python
115 | # acceptable mixed style
116 |
117 | div('#my-id.class1.class2',
118 | 'my:attr', 'x',
119 | 'ur-attr', 'y',
120 | 'their[attr]', 'z',
121 | title="Mix 'em up",
122 | subtitle="But don't get mixed up"
123 | )[
124 | 'This mixed style is OK.'
125 | ]
126 |
127 | # NOT acceptable mixed style
128 |
129 | div('#my-id.class1.class2',
130 | 'id', 'x', # conflicts with 'id' defined in selector style
131 | 'title', 'y',
132 | 'their[attr]', 'z',
133 | title="Mix 'em up", # conflicts with 'title' defined in tuple style
134 | subtitle="But don't get mixed up"
135 | )[
136 | 'This mixed style is NOT OK.'
137 | ]
138 | ```
139 |
140 | Iterables can be used to generate a sequence of elements in the body of an element.
141 |
142 | ```python
143 | # My content.
'
320 | ```
321 |
322 | CSS objects can also be rendered the same way.
323 |
324 | ```python
325 | >>> css = Css[
326 | 'h1': dict(font_size=px/14),
327 | '.my-class': dict(
328 | color='blue',
329 | padding=(0,0,px/20)
330 | )
331 | ]
332 | >>> print(css.render())
333 | 'h1 {
334 | font-size: 14px;
335 | }
336 |
337 | .my-class {
338 | color: blue;
339 | padding: 0 0 20px;
340 | }'
341 | ```
342 |
343 | This is my content.
413 | ```
414 |
415 | You can combine both _dict_ and _key-value_ style when setting variable values, but note that **values defined using _kwargs_ take priority over those defined using _dict_**.
416 |
417 | A variable object can have a default value.
418 |
419 | ```python
420 | >>> print(div[Var('content', 'This is default content.')].render(indent=0))
421 | 'This is default content.
'
422 | ```
423 |
424 | A variable object's value can be set to an element.
425 |
426 | ```python
427 | >>> content = div[Var('inner')]
428 | >>> new_content = content.set_vars(inner=div['This is inner content.'])
429 | >>> print(new_content.render())
430 | '
431 |
432 | This is inner content.
433 |
434 |