phoenix_live_view
    Preparing search index...

    Interface HookJSCommands

    JSCommands for use within a Hook. The exec command is tailored for hooks, not requiring an explicit element.

    interface HookJSCommands {
        addClass(
            el: HTMLElement,
            names: string | string[],
            opts?: BaseOpts,
        ): void;
        exec(encodedJS: EncodedJS): void;
        hide(el: HTMLElement, opts?: BaseOpts): void;
        ignoreAttributes(el: HTMLElement, attrs: string | string[]): void;
        navigate(href: string, opts?: NavigationOpts): void;
        patch(href: string, opts?: NavigationOpts): void;
        push(el: HTMLElement, type: string, opts?: PushOpts): void;
        removeAttribute(el: HTMLElement, attr: string): void;
        removeClass(
            el: HTMLElement,
            names: string | string[],
            opts?: BaseOpts,
        ): void;
        setAttribute(el: HTMLElement, attr: string, val: string): void;
        show(el: HTMLElement, opts?: ShowOpts): void;
        toggle(el: HTMLElement, opts?: ToggleOpts): void;
        toggleAttribute(
            el: HTMLElement,
            attr: string,
            val1: string,
            val2: string,
        ): void;
        toggleClass(
            el: HTMLElement,
            names: string | string[],
            opts?: BaseOpts,
        ): void;
        transition(
            el: HTMLElement,
            transition: string | string[],
            opts?: TransitionCommandOpts,
        ): void;
    }

    Hierarchy

    Index

    Methods

    addClass exec hide ignoreAttributes navigate patch push removeAttribute removeClass setAttribute show toggle toggleAttribute toggleClass transition

    Methods

    • Adds CSS classes to an element.

      Parameters

      • el: HTMLElement

        The element to add classes to.

      • names: string | string[]

        The class name(s) to add.

      • Optionalopts: BaseOpts

        Optional settings. Accepts: transition, time, and blocking.

      Returns void

    • Executes a JS command in the context of the hook's element.

      Parameters

      • encodedJS: EncodedJS

        The encoded JS command with operations to execute.

      Returns void

    • Hides an element.

      Parameters

      • el: HTMLElement

        The element to hide.

      • Optionalopts: BaseOpts

        Optional settings. Accepts: transition, time, and blocking.

      Returns void

    • Mark attributes as ignored, skipping them when patching the DOM.

      Parameters

      • el: HTMLElement

        The element to ignore attributes on.

      • attrs: string | string[]

        The attribute name or names to ignore.

      Returns void

    • Pushes an event to the server.

      Parameters

      • el: HTMLElement

        An element that belongs to the target LiveView / LiveComponent or a component ID. To target a LiveComponent by its ID, pass a separate target in the options.

      • type: string

        The event name to push.

      • Optionalopts: PushOpts

        Optional settings. Accepts: value, target, page_loading.

      Returns void

    • Removes an attribute from an element.

      Parameters

      • el: HTMLElement

        The element to remove the attribute from.

      • attr: string

        The attribute name to remove.

      Returns void

    • Removes CSS classes from an element.

      Parameters

      • el: HTMLElement

        The element to remove classes from.

      • names: string | string[]

        The class name(s) to remove.

      • Optionalopts: BaseOpts

        Optional settings. Accepts: transition, time, and blocking.

      Returns void

    • Sets an attribute on an element.

      Parameters

      • el: HTMLElement

        The element to set the attribute on.

      • attr: string

        The attribute name to set.

      • val: string

        The value to set for the attribute.

      Returns void

    • Shows an element.

      Parameters

      • el: HTMLElement

        The element to show.

      • Optionalopts: ShowOpts

        Optional settings. Accepts: display, transition, time, and blocking.

      Returns void

    • Toggles the visibility of an element.

      Parameters

      • el: HTMLElement

        The element to toggle.

      • Optionalopts: ToggleOpts

        Optional settings. Accepts: display, in, out, time, and blocking.

      Returns void

    • Toggles an attribute on an element between two values.

      Parameters

      • el: HTMLElement

        The element to toggle the attribute on.

      • attr: string

        The attribute name to toggle.

      • val1: string

        The first value to toggle between.

      • val2: string

        The second value to toggle between.

      Returns void

    • Toggles CSS classes on an element.

      Parameters

      • el: HTMLElement

        The element to toggle classes on.

      • names: string | string[]

        The class name(s) to toggle.

      • Optionalopts: BaseOpts

        Optional settings. Accepts: transition, time, and blocking.

      Returns void

    • Applies a CSS transition to an element.

      Parameters

      • el: HTMLElement

        The element to apply the transition to.

      • transition: string | string[]

        The transition class(es) to apply. Accepts a string of classes to apply when transitioning or a 3-tuple containing the transition class, the class to apply to start the transition, and the ending transition class, such as:

          ["ease-out duration-300", "opacity-100", "opacity-0"]
      • Optionalopts: TransitionCommandOpts

        Optional settings for timing and blocking behavior. Accepts: time and blocking.

      Returns void

    Settings

    Member Visibility

    On This Page

    Methods