-
Notifications
You must be signed in to change notification settings - Fork 4
/
page.haml
70 lines (55 loc) · 1.55 KB
/
page.haml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
:ruby
Markdown = import("../Markdown")
%article
%Markdown
:plain
# Reusing components
Mayu has a resource system which builds a dependency graph
of everything that the application consists of.
You can use `import()` in the first `:ruby`-filter to import
other components.
To render child elements passed to a component, use `%slot`.
Example:
**`app/components/Button.haml`**
```haml
%button{**props}
%slot
:css
button {
border: none;
background: var(--blue);
color: var(--white);
}
```
**`app/pages/my-page/page.haml`**
```haml
:ruby
Button = import("/app/components/Button")
%Button Click here!
```
This would replace `%slot` with the string `Click here!`.
## Named slots
Slots can also be named, here's an example:
**`app/components/Wrapper.haml`**
```haml
:ruby
Header = import("./Header")
Footer = import("./Footer")
%div
%Header
%slot(name="after-header")
%h1= $title
%slot
%p Optional fallback content, if no children are passed in.
%Footer
%slot(name="after-footer")
```
**`src/pages/hello/page.haml`**
```haml
:ruby
Wrapper = import("/app/components/Wrapper")
%Wrapper(title="Hello world")
%h2 Hello world
%p Hello to the world and welcome to my webpage.
%p(slot="after-footer") Copyright #{Time.now.year}
```