README About Versions Source Modules

PF6.InlineEdit

PF6 InlineEdit component

Displays text that can be toggled into an editable input. The consumer controls the editing state, current value, and all transition messages.

-- Model
type alias Model =
    { name : String, editingName : Bool }


-- Msg
type Msg = EditName | NameChanged String | SaveName | CancelName


-- View
InlineEdit.inlineEdit model.name
    |> InlineEdit.withEditing model.editingName
    |> InlineEdit.withOnEdit EditName
    |> InlineEdit.withOnChange NameChanged
    |> InlineEdit.withOnSave SaveName
    |> InlineEdit.withOnCancel CancelName
    |> InlineEdit.toMarkup theme

See: https://www.patternfly.org/components/inline-edit

Definition

type InlineEdit msg

Opaque InlineEdit type

Constructor

inlineEdit : String -> InlineEdit msg

Construct an InlineEdit with the given display value

Value modifiers

withValue : String -> InlineEdit msg -> InlineEdit msg

Set the current text value

withPlaceholder : String -> InlineEdit msg -> InlineEdit msg

Set the placeholder text shown when value is empty

State modifiers

withEditing : Bool -> InlineEdit msg -> InlineEdit msg

Put the component into editing mode (shows input + save/cancel)

withIsDisabled : InlineEdit msg -> InlineEdit msg

Disable editing (hides the edit button)

Event modifiers

withOnEdit : msg -> InlineEdit msg -> InlineEdit msg

Message sent when the edit (pencil) button is clicked

withOnChange : (String -> msg) -> InlineEdit msg -> InlineEdit msg

Message sent as the user types (provides new string value). Required for the text input to function in editing mode.

withOnSave : msg -> InlineEdit msg -> InlineEdit msg

Message sent when the save (✓) button is clicked

withOnCancel : msg -> InlineEdit msg -> InlineEdit msg

Message sent when the cancel (×) button is clicked

Rendering

toMarkup : Theme -> InlineEdit msg -> Element msg

Render the InlineEdit as an Element msg

Modules