Skip to content

Commit

Permalink
extend custom-element related docs
Browse files Browse the repository at this point in the history
  • Loading branch information
mskocik committed Apr 25, 2024
1 parent dc5c6a9 commit 3322d76
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions src/routes/examples/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -181,10 +181,8 @@ Reorder selection by dragging: {value}

## Custom element

Svelecte can be used outside svelte projects. I have used it successfully in Vue and PHP projects myself.

<select id="original"></select>
<el-svelecte options={options} placeholder="Pick a color" />
Svelecte can be used outside svelte projects. Almost every commonly used property _should_ be available. Also
dependend selects are possible with custom elements. I have used it successfully in Vue and PHP projects myself.

Check the source and look for `<el-svelecte />` element.

Expand All @@ -203,6 +201,16 @@ Most of properties is supported with one change: `parentValue`.
You define `parent` attribute instead. It represents html `id` attribute of parent select.
This attribute should be defined on child svelecte element.

Native `<select>` element can be used as "anchor element", which will serve as underlying element for Svelecte component.
Svelecte component can inherit `required`, `multiple` and `disabled` properties from `<select>` element and in case `options`
property is not set, it can extract option list from `<option>` elements.

```html
<select id="my_select" name="form_select" required>
<option>...</option>
</select>
<el-svelecte placeholder="Pick an item"/>
```
<style>
:global(.inlined) {
display: inline-flex;
Expand Down

0 comments on commit 3322d76

Please sign in to comment.