File tree Expand file tree Collapse file tree 5 files changed +22
-3
lines changed Expand file tree Collapse file tree 5 files changed +22
-3
lines changed Original file line number Diff line number Diff line change @@ -748,12 +748,15 @@ declare module "solid-js" {
748
748
count: number ;
749
749
name: string ;
750
750
}
751
+ interface ExplicitBoolAttributes {
752
+ disabled: boolean ;
753
+ }
751
754
}
752
755
}
753
756
754
757
// Usage
755
758
< Input prop :name = {name()} prop :count = {count()}/ >
756
- < my - web - component attr :name = {name()} attr :count = {count()}/ >
759
+ < my - web - component attr :name = {name()} attr :count = {count()} bool : disabled = { true } / >
757
760
```
758
761
759
762
#### Custom directives
Original file line number Diff line number Diff line change 2
2
title : attr:*
3
3
---
4
4
5
- Forces the prop to be treated as an attribute instead of a property. Useful for Web Components where you want to set attributes.
5
+ Forces the prop to be treated as an attribute instead of a property.
6
+ Useful for Web Components where you want to set attributes.
6
7
7
8
``` tsx
8
9
<my-element attr :status = { props .status } />
9
10
```
11
+
12
+ <Callout type = " info" title = " Strong-Typing Custom Attributes" >
13
+ Type definitions are required when using TypeScript.
14
+ See the[ TypeScript] ( /configuration/typescript#forcing-properties-and-custom-attributes ) page for examples.
15
+ </Callout >
Original file line number Diff line number Diff line change @@ -19,3 +19,8 @@ This attribute is most useful for Web Components.
19
19
<my-element />
20
20
21
21
```
22
+
23
+ <Callout type = " info" title = " Strong-Typing Custom Bollean Attributes" >
24
+ Type definitions are required when using TypeScript.
25
+ See the [ TypeScript] ( /configuration/typescript#forcing-properties-and-custom-attributes ) page for examples.
26
+ </Callout >
Original file line number Diff line number Diff line change @@ -29,7 +29,7 @@ const handler = {
29
29
30
30
// or inline
31
31
32
- <div on :click = { {passive:true , handleEvent(e ) => console .log (" Weeeee!" )}} />
32
+ <div on :click = { {passive:true , handleEvent(e ) { console .log (" Weeeee!" )} }} />
33
33
```
34
34
35
35
This new syntax replaces the now deprecated ` oncapture: ` and it's future proof for any posible new event listener options.
Original file line number Diff line number Diff line change @@ -8,3 +8,8 @@ Forces the prop to be treated as a property instead of an attribute.
8
8
``` tsx
9
9
<div prop :scrollTop = { props .scrollPos + " px" } />
10
10
```
11
+
12
+ <Callout type = " info" title = " Strong-Typing Custom Properties" >
13
+ Type definitions are required when using TypeScript.
14
+ See the [ TypeScript] ( /configuration/typescript#forcing-properties-and-custom-attributes ) page for examples.
15
+ </Callout >
You can’t perform that action at this time.
0 commit comments