edit
, save
, cancel
eventsnpm i svelte-inline-edit --save-dev
yarn add svelte-inline-edit
CDN: UNPKG | jsDelivr (available as window.InlineEdit
)
<InlineEdit bind:value />
<script>
import InlineEdit from './InlineEdit.svelte';
let value;
</script>
<InlineEdit type="email" {value} on:save={save} on:cancel={cancel} on:edit={edit} />
<script>
import InlineEdit from './InlineEdit.svelte';
let value;
function save({ detail: input }) {
if (input.checkValidity()) {
value = input.value;
}
}
function edit() {
console.log('Start editing');
}
function cancel() {
console.log('Cancel editing');
}
</script>
If you are not using using es6, instead of importing add
<script src="/path/to/svelte-inline-edit/index.js"></script>
just before closing body tag.
Name | Type | Description | Required | Default |
---|---|---|---|---|
value |
String or Number |
Editable value | No | empty string |
options |
Array |
A list of permissible or recommended options of value | No | empty array |
rows |
Number |
Define number of rows for editable. | No | 1 |
position |
String |
Position of controls: left, right, top-left, top-right, bottom-left, bottom-right | No | right |
save
- element to be placed as save controlcancel
- element to be placed as cancel controledit
- on start editingsave
- on savecancel
- on cancel editingYou can use direct access to input element via event.detail
.
MIT © PaulMaly