# Component
## Attributes
Available to all components regardless its theme selection
### Smart icon: ```... icon="leftIcon" icon-end="rightIcon" ...```
- Any components having either ```icon``` or ```icon-end``` or both attribute(s) will get its inner html with icon tag prepended/appended
- Attribute value is the name of icon and will be rendered to the current iconset's key mapping accordingly
- Unknown name silently yields an empty string
- Example:
```html
Go back home
```
Result (with theme: 'pure', iconset: 'phosphor'):
```html
```
## Common Components
Available to all components regardless its theme selection
### ``````
- This will generate tag for displaying icon. The name of the icon will be rendered to the current iconset's key mapping accordingly
- Unknown name silently yields an empty string
- If ```oname``` is given (stand for 'original-name'), you could put the exact icon class name without going through iconset's key mapping. This is sometime necessary, e.g. if you want to display an icon with name not in key mapping. **Warning** You will get unexpected result if you decide to change current iconset though!
- ```oname``` has precedence over ```name```, meaning ```name``` will be ignored if you provide both attributes
- Example:
```html
```
Result (with iconset: 'phosphor'):
```html
```
### ``````
- Tag will be substituted with rendered content from ```tplName```
- Any other attributes provided BUT ```template``` serve as locals to the ```tplName```
- Template will be rendered just like a normal page template
- If ```prepend``` and/or ```append``` attribute are provided, its value will be prepended/appended after rendering. Value will be inserted as-is
- Template can also have any number of components, including ```c:include```
- But it is advisable to NOT have nested ```c:include``` for performance reason and danger of infinite loop
- Example:
```html
```
### ``````
- Url starts with ```/``` or ```http```: passed through
- Url with format ```ns:path``` or ```ns.{static,virtual}:path``` will go to static or virtual asset of its namespace respectively
- Example:
```html
```
Result:
```html
```
### ```...```
- Use this component to conveniently wrap page with HTML header tags (``````, ``````, ``````, down to opening body ``````)
- Keep in mind that you should also close page with `````` component
- Page title can be provided as attribute ```title```
- Example:
```html
```
Result (with lang: 'id'):
```html
Halamanku
```
### ```...```
- Should only be used when you use `````` as above
- It provides you page's closing tags (``````, ``````)
- Example:
```html
```
### ``````
- Url starts with ```/``` or ```http```: passed through
- Url with format ```ns:path``` or ```ns.{static,virtual}:path``` will go to static or virtual asset of its namespace respectively
- Example:
```html
```
Result:
```html
```
### ```urls```
- Url format: ```url[;attr:value[;attr:value[...]]]```
- Multiple urls: provide as many url as you want, line-by-line
- Each url will be parsed according to rules on previous section
- By default, each url will generate one ```
```
### ```...```
- Any component tag found inside will be substituted with its correct selector
- Example:
```html
formCheckbox { background-color: #EEE };
btn { border-color: #000 };
...
```
Result (with theme: 'pure'):
```html
```
### ```string```
- Translate ```string``` interpolated with ```value``` attribute
- ```value``` attribute is an array delimited by ```|``` (pipe) character
- Return a clean, interpolated string without surrounding tag
- Example:
```html
Departure: %s, Arrival: %s
```
Result (with lang: 'id'):
```html
Keberangkatan: Jakarta, Kedatangan: Amsterdam
```
## Theme Specific Components
Listed below are components available in 'pure' (builtin theme). Click here for [Bootstrap](https://github.com/ardhi/waibu-bootstrap/blob/main/docs/component.md)'s one.
### ```content```
- Available variants: ```primary```, ```secondary```, ```success```, ```warning``` and ```danger```
- Available sizes: ```sm```, ```md```, ```lg```
- By default, it uses ```