Skip to content

Commit

Permalink
Merge pull request #2 from vapor-community/natebird-readme-edits
Browse files Browse the repository at this point in the history
Update README.md
  • Loading branch information
MatsMoll authored Mar 8, 2019
2 parents a4b011c + 7d07ad3 commit 656f37a
Showing 1 changed file with 16 additions and 12 deletions.
28 changes: 16 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,23 +205,27 @@ This would render:
* It is also possible to use `||` and `&&` for more complex statments. `runtimeIf(\.bool || \.otherBool, div.child(...))`
* `elseIf`has the same statments and is a method on the returned if. `runtimeIf(...).elseIf(...)`
* and lastly `else`. `runtimeIf(...).else(div.child(...))`
- Dynamíc Attributes
- Dynamic Attributes
* In order to add attributes based on the `Context` you will need to use `dynamic(div)`. This will create a dynamic node and after this you can use if's. `dynamic(div).if(\.bool, add: .checked)`

If there is missing any nodes or attributes. Just add an extension on `TemplateBuilder` or if there is a attribute not added `AttributableNode` (If there is no need for a dynamicly adding), and `HTML.AttributeNode`if dynamic is needed.

```swift
extension AttributableNode {
func ariaLabelledby(_ values: CompiledTemplate...) -> Self {
return add(.init(attribute: "aria-labelledby", value: values))
}
}
Add custom node types by extending `TemplateBuilder`.

```swift
extension TemplateBuilder {
var div: HTML.ContentNode {
return HTML.ContentNode(name: "div")
}
}
```

Add non-dynamic attributes with an extension on `AttributableNode`. Or extend `HTML.AttributeNode`if a dynamic is needed.

```swift
extension AttributableNode {
func ariaLabelledby(_ values: CompiledTemplate...) -> Self {
return add(.init(attribute: "aria-labelledby", value: values))
}
}

extension HTML.AttributeNode {
static func dataToggle(_ toggle: CompiledTemplate) -> HTML.AttributeNode {
Expand All @@ -231,7 +235,7 @@ extension HTML.AttributeNode {
```


## Usefull Resources to Get Started
## Useful Resources to Get Started

For more examples in a bigger repo, view this [Vapor TIL fork](https://github.com/MatsMoll/vapor-til)
And for converting pure HTML code to the HTMLKit code clone and run [this repo](https://github.com/MatsMoll/HTMLKit-code-converter9)
* [Vapor TIL fork](https://github.com/MatsMoll/vapor-til) - Compare Leaf to HTMLKit in this fork of the TIL app.
* Convert pure HTML code to HTMLKit code using this [HTML-to-HTMLKit converter](https://github.com/MatsMoll/HTMLKit-code-converter).

0 comments on commit 656f37a

Please sign in to comment.