Editable Content
<sl-editable-content> | SlEditableContent
A component that allows its content to be edited.
<sl-editable-content label="Enter your content"> </sl-editable-content>
Examples
Editor actions
<sl-editable-content label="editor with actions" show-actions stacked> </sl-editable-content>
Stacked label
<sl-editable-content label="Enter your content" stacked> </sl-editable-content>
Setting initial height
Editable content is 100px high by default. You can use the --editable-content-height variable
to set the initial height.
<sl-editable-content label="Taller content" stacked style="--editable-content-height: 200px"> </sl-editable-content>
Fixed size
Editable content is resizable vertically by default. Use the fixed-size attribute to turn this
off.
<sl-editable-content label="Fixed size" stacked fixed-size style="--editable-content-height: 50px"> </sl-editable-content>
Auto size
Applying the ‘auto-size’ attribute will allow content area to adjust as it is edited.
<sl-editable-content label="Auto size" stacked auto-size> </sl-editable-content>
Auto size with minimum height
Applying the ‘min-size’ attribute will allow content area to adjust as it is edited, but will have a minimum
height that is set to the --editable-content-height variable.
<sl-editable-content label="Auto size with minimum height" stacked min-size> </sl-editable-content>
[component-metadata:sl-editable-content]
Slots
| Name | Description |
|---|---|
| (default) | The default slot. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
The value of the editable content | - | - | |
stacked
|
Show stacked label |
boolean
|
false
|
|
minSize
min-size
|
Minimum size |
boolean
|
false
|
|
fixedSize
fixed-size
|
Fixed size |
boolean
|
false
|
|
autoSize
auto-size
|
Auto size |
boolean
|
false
|
|
label
|
Label |
string
|
''
|
|
showActions
show-actions
|
Show actions |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-change |
|
When the content has been changed | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.