UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Inplaceeditor

Last update:
()
Message fix(inplaceeditor): disabled style
Committer: Tamás Bíró
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-inplaceeditor 

<e-inplaceeditor>
  Lorem ipsum dolor sit amet.
</e-inplaceeditor>


                                <e-inplaceeditor>Lorem ipsum dolor sit amet.</e-inplaceeditor>
Lorem ipsum dolor sit amet.

Variations

Disabled
Copy Jade
Copy HTML
Show code
Hide code 

<e-inplaceeditor disabled="disabled">
  Lorem ipsum dolor sit amet.
</e-inplaceeditor>


                                  <e-inplaceeditor disabled="disabled">Lorem ipsum dolor sit amet.</e-inplaceeditor>
Lorem ipsum dolor sit amet.

Wrapped
Copy Jade
Copy HTML
Show code
Hide code 

<h1>
  <e-inplaceeditor>
    Lorem ipsum dolor sit amet.
  </e-inplaceeditor>
</h1>


                                  <h1>
                                    <e-inplaceeditor>Lorem ipsum dolor sit amet.</e-inplaceeditor>
                                  </h1>

Lorem ipsum dolor sit amet.

Has buttons
Copy Jade
Copy HTML
Show code
Hide code
has-buttons="true" 

<h1>
  <e-inplaceeditor has-buttons="true">
    Lorem ipsum dolor sit amet.
  </e-inplaceeditor>
</h1>


                                  <h1>
                                    <e-inplaceeditor has-buttons="true">Lorem ipsum dolor sit amet.</e-inplaceeditor>
                                  </h1>

Lorem ipsum dolor sit amet.

API Reference

Properties

Name Description Type Required Default value
has-buttons Add save and cancel buttons boolean false
disabled Prevent editing editable boolean false

Events

Event Description Returns
update Fires on blur { detail: { value: [textContent] } }