You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ Thanks to Hotwire, it's now possible to build sophisticated server-rendered user
13
13
14
14
With Theo, you can render a partial using HTML-like syntax:
15
15
```html
16
-
<button-partialsize="large"label%="label" />
16
+
<_button size="large" label%="label" />
17
17
```
18
18
19
19
@@ -51,9 +51,9 @@ is equivalent to:
51
51
52
52
Rendering a partial in ERB requires switching between HTML markup and Ruby code, and the `render` verb makes it difficult to imagine a page as a component structure.
53
53
54
-
In Theo, you render a partial by writing a tag with `-partial` suffix, for example:
54
+
In Theo, you render a partial by writing a tag with `_` prefix, for example:
55
55
```html
56
-
<button-partialsize="large" />`
56
+
<_button size="large" />`
57
57
```
58
58
is equivalent to:
59
59
```erb
@@ -62,9 +62,9 @@ is equivalent to:
62
62
63
63
Naturally, partials can also include content, e.g.:
64
64
```html
65
-
<button-partialsize="large">
65
+
<_button size="large">
66
66
Create
67
-
</button-partial>
67
+
</_button>
68
68
```
69
69
70
70
> [!TIP]
@@ -75,7 +75,7 @@ Naturally, partials can also include content, e.g.:
75
75
76
76
You can render a collection of partials as follows:
77
77
```html
78
-
<widget-partialcollection%="widgets" />
78
+
<_widget collection%="widgets" />
79
79
```
80
80
which is equivalent to:
81
81
```erb
@@ -84,26 +84,26 @@ which is equivalent to:
84
84
85
85
You can also customize the local variable name via the `as` attribute, e.g.:
86
86
```html
87
-
<widget-partialcollection%="widgets"as="item" />
87
+
<_widget collection%="widgets" as="item" />
88
88
```
89
89
90
90
#### Boolean attributes
91
91
92
92
If an attribute has no value, you can omit it, for example:
93
93
```html
94
-
<button-partialdisabled />
94
+
<_button disabled />
95
95
```
96
96
is equivalent to:
97
97
```html
98
-
<button-partialdisabled="" />
98
+
<_button disabled="" />
99
99
```
100
100
101
101
102
102
#### Path
103
103
104
104
To render a partial from another folder, use the 'path' attribute, e.g.:
105
105
```html
106
-
<widget-partialpath="widgets" />
106
+
<_widget path="widgets" />
107
107
```
108
108
is equivalent to:
109
109
```erb
@@ -115,9 +115,9 @@ is equivalent to:
115
115
116
116
Partials can yield a value, such as a builder object that can be used by child partials. For example:
117
117
```html
118
-
<widget-builder-partialyields="widget">
119
-
<widget-element-partialwidget%="widget" />
120
-
</widget-builder-partial>
118
+
<_widget_builder yields="widget">
119
+
<_widget_element widget%="widget" />
120
+
</_widget_builder>
121
121
```
122
122
is equivalent to:
123
123
```erb
@@ -130,9 +130,9 @@ is equivalent to:
130
130
131
131
Instead of using `yields` attribute, a parent partial can indirectly pass a variable to its children using the `provide` and `inject` helpers. The example above can be modified as follows:
132
132
```html
133
-
<widget-builder-partial>
134
-
<widget-element-partial />
135
-
</widget-builder-partial>
133
+
<_widget_builder>
134
+
<_widget_element />
135
+
</_widget_builder>
136
136
```
137
137
138
138
`_widget_builder.html.theo`:
@@ -156,7 +156,7 @@ Instead of using `yields` attribute, a parent partial can indirectly pass a vari
156
156
You can freely mix ERB and Theo syntax, e.g.:
157
157
```erb
158
158
<% if total_amount > 100 %>
159
-
<free-shipping-partial amount%="total_amount" />
159
+
<_free_shipping amount%="total_amount" />
160
160
<% end %>
161
161
```
162
162
@@ -165,19 +165,19 @@ You can freely mix ERB and Theo syntax, e.g.:
165
165
166
166
You can build a `<form>` element in ERB using [ActionView form helpers](https://guides.rubyonrails.org/form_helpers.html). Theo provides corresponding partials. For example:
167
167
```html
168
-
<form-with-partialmodel%="widget"data-turbo-confirm="Are you sure?">
168
+
<_form_with model%="widget" data-turbo-confirm="Are you sure?">
0 commit comments