Skip to content

Commit fe77111

Browse files
committed
add missing bindings docs
1 parent 1c2fc21 commit fe77111

File tree

1 file changed

+35
-1
lines changed

1 file changed

+35
-1
lines changed

documentation/docs/03-template-syntax/11-bind.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,31 @@ Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a f
117117
</form>
118118
```
119119

120+
## `<input bind:indeterminate>`
121+
122+
Checkbox can be in [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, though it is still either checked or unchecked:
123+
124+
```svelte
125+
<script>
126+
let checked = $state(false);
127+
let indeterminate = $state(true);
128+
</script>
129+
130+
<form>
131+
<input type="checkbox" bind:checked bind:indeterminate>
132+
<p>
133+
Choice:
134+
{#if indeterminate}
135+
no choice was done yet
136+
{:else if checked}
137+
the option is checked
138+
{:else}
139+
the option is unchecked
140+
{/if}
141+
</p>
142+
</form>
143+
```
144+
120145
## `<input bind:group>`
121146

122147
Inputs that work together can use `bind:group`.
@@ -227,6 +252,7 @@ You can give the `<select>` a default value by adding a `selected` attribute to
227252
- [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
228253
- [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)
229254
- [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)
255+
- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)
230256

231257
```svelte
232258
<audio src={clip} bind:duration bind:currentTime bind:paused></audio>
@@ -254,6 +280,10 @@ You can give the `<select>` a default value by adding a `selected` attribute to
254280
</details>
255281
```
256282

283+
## `window` and `document`
284+
285+
Binding to properties of `window` and `document` is done via the special elements [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document). The available bindings are listed in their documentations.
286+
257287
## Contenteditable bindings
258288

259289
Elements with the `contenteditable` attribute support the following bindings:
@@ -278,14 +308,18 @@ All visible elements have the following readonly bindings, measured with a `Resi
278308
- [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
279309
- [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
280310
- [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
311+
- [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)
312+
- [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize)
313+
- [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize)
314+
- [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)
281315

282316
```svelte
283317
<div bind:offsetWidth={width} bind:offsetHeight={height}>
284318
<Chart {width} {height} />
285319
</div>
286320
```
287321

288-
> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
322+
> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`. Also, CSS transformations do not trigger `ResizeObserver` as well.
289323
290324
## bind:this
291325

0 commit comments

Comments
 (0)