Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte documentation: adding Two-way Binding example in <sl-select> #2327

Merged
merged 6 commits into from
Jan 2, 2025
Merged

Svelte documentation: adding Two-way Binding example in <sl-select> #2327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bf4d6a6
Documentation for Svelte #2261
Nov 7, 2024
b0d60ce
fix bracket
Nov 7, 2024
dd6af3d
Improve documentation for Svelte with clearer examples for two-way bi…
esaramago Dec 24, 2024
3149d53
revert
esaramago Dec 24, 2024
980b29d
Merge pull request #1 from shoelace-style/next
esaramago Dec 24, 2024
9da11d5
Enhance Svelte documentation with clearer examples for two-way binding
esaramago Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions docs/pages/frameworks/svelte.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,19 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
One caveat is there's currently Svelte only supports `bind:value` directive in `<input>`, `<textarea>` and `<select>`, but you can still achieve two-way binding manually.

```jsx
// This doesn't work
// ❌ This doesn't work
<sl-input bind:value="name"></sl-input>
// This works, but it's a bit longer
<sl-input value={name} oninput={event => message = event.target.value}></sl-input>
<sl-select bind:value="job">
esaramago marked this conversation as resolved.
Show resolved Hide resolved
<sl-option value="designer">Designer</sl-option>
<sl-option value="developer">Developer</sl-option>
</sl-select>

// ✅ This is a bit longer, but it works
<sl-input value={name} oninput={event => name = event.target.value}></sl-input>
<sl-select value={job} onsl-change={event => job = event.target.value}>
esaramago marked this conversation as resolved.
Show resolved Hide resolved
<sl-option value="designer">Designer</sl-option>
<sl-option value="developer">Developer</sl-option>
</sl-select>
```

:::tip
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/frameworks/vue-2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.

```html
<!-- This doesn't work -->
<!-- ❌ This doesn't work -->
<sl-input v-model="name"></sl-input>
<!-- This works, but it's a bit longer -->
<!-- ✅ This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```

Expand Down
4 changes: 2 additions & 2 deletions docs/pages/frameworks/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,9 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.

```html
<!-- This doesn't work -->
<!-- ❌ This doesn't work -->
<sl-input v-model="name"></sl-input>
<!-- This works, but it's a bit longer -->
<!-- ✅ This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```

Expand Down
Loading