Edit Button

Available as: Web ComponentShortcodeOxygen Element

Let users edit content from the frontend of the site.

<p style="height: 200px;" data-spx-edit="test"> This is test content, press 'Edit Site' and type away! </p> <spx-edit-button test position="absolute"> </spx-edit-button>

This is test content, press 'Edit Site' and type away!

There is a guide available for this component.

Properties

background

Type: stringDefault: var(--spx-color-gray-900)

background-discard

Type: stringDefault: var(--spx-color-gray-600)CSS Variable: --spx-edit-button-background-discard

Discard button background.

border

Type: stringDefault: none

border-discard

Type: stringDefault: none

border-radius

Type: stringDefault: var(--spx-border-radius)

bottom

Type: stringDefault: 1em

class-button

Type: string

class-button-discard

Type: string

class-loader

Type: string

color

Type: stringDefault: #ffffff

color-discard

Type: stringDefault: #ffffffCSS Variable: --spx-edit-button-color-discard

Discard button color.

edit-id

Type: string

Corresponding ID for editable fields. This property is needed when multiple edit-button components are used on the page. Simply apply a "data-spx-edit-id" attribute with the same value to editable elements.

font-size

Type: stringDefault: var(--spx-font-size)

font-size-max

Type: numberDefault: 1.2

font-size-min

Type: numberDefault: 1

gap

Type: stringDefault: 0.4emCSS Variable: --spx-edit-button-gap

Gap between the buttons.

left

Type: string

loader-color

Type: stringDefault: #ffffff

loader-gap

Type: stringDefault: 0.5em

open

Type: booleanDefault: false

padding

Type: stringDefault: 1em 1.2em

padding-x-max

Type: numberDefault: 1.4

padding-x-min

Type: numberDefault: 1

padding-y-max

Type: numberDefault: 1.2

padding-y-min

Type: numberDefault: 0.7

position

Type: "absolute" | "fixed" | "relative" | "static"Default: fixed

Position property of component.

right

Type: stringDefault: 1em

styling

Type: stringDefault: defaultChoices: default, fluid, headless

Styling.

test

Type: booleanDefault: false

text-discard

Type: stringDefault: Discard

Discard button text.

text-edit

Type: stringDefault: Edit site

Edit button text.

text-save

Type: stringDefault: Save

Save button text.

top

Type: string

z-index

Type: numberDefault: 99

Events

spxEditButtonDidLoad

Fires after component has loaded.

spxEditButtonDiscard

Fires after pressing the discard button.

spxEditButtonSave

Fires after pressing the save button.

Methods

discard

Discard changes.

edit

Enable editing.

save

Save changes.