CodeAPI

QuickActionBar

A quick action bar helps your visitors contact you instantly from their mobile devices. You can choose which actions appear on it and customize the design to match your site.

Table of Contents

PROPERTIES

?
Store values associated with an object.
alignmentSets or gets a quick action bar's alignment.
collapsedIndicates if the element is collapsed or expanded.
colorSchemeSets or gets a quick action bar's color scheme.
hiddenIndicates if the element is visible or hidden.
invertColorSchemeSets or gets whether a quick action bar's color scheme is inverted.
isVisibleIndicates if the element is actually visible.
showLabelsSets or gets whether a quick action bar's labels are shown.
styleGets an object containing information about the element's styles.

FUNCTIONS

?
Perform actions on an object.
collapse( )Collapses the element and sets its collapsed property to true.
expand( )Expands the element and sets its collapsed property to false.
hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

onItemClicked( )

Adds an event handler that runs when an item in a quick action bar is clicked.

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

MIXES IN

?
Where some functionality is inherited from.
$w.HiddenCollapsedMixin, $w.StyleMixin

alignment

Sets or gets a quick action bar's alignment.

Description

Setting the alignment property to "right" shows the quick action bar on the right side of the user's device. Setting it to "left" shows it on the left side.

Getting the alignment property returns whether the quick action bar is shown on the left or right side of the user's device.

Note

Only vertical quick action bar designs support the alignment property.

Syntax

get alignment(): boolean
set alignment(value: boolean): void
TYPE
?
The kind of data the property stores.
boolean

Examples

Set the quick action bar alignment

$w("#myQuickActionBar").alignment = "right";

Get the quick action bar alignment

let alignment = $w("#myQuickActionBar").alignment;  // "right"

collapsed

Indicates if the element is collapsed or expanded.

Description

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

See Also

collapse( ), expand( ), hide( ), show( ), hidden

Syntax

get collapsed(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's collapsed status

let isCollapsed = $w("#myElement").collapsed; // false

Toggle an element's collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

colorScheme

Sets or gets a quick action bar's color scheme.

Description

One of:

  • "grey": Buttons are grey.
  • "black": Buttons are black.
  • "brand": Buttons are various colors.

Syntax

get colorScheme(): string
set colorScheme(value: string): void
TYPE
?
The kind of data the property stores.
string

Examples

Set the color scheme

$w("#myQuickActionBar").colorScheme = "grey";

Get the color scheme

let colorScheme = $w("#myQuickActionBar").colorScheme;  // "grey"

hidden

Indicates if the element is visible or hidden.

Description

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

Note

An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

See Also

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

Syntax

get hidden(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's hidden status

let isHidden = $w("#myElement").hidden;  // false

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

invertColorScheme

Sets or gets whether a quick action bar's color scheme is inverted.

Description

Setting the invertColorScheme property to true applies the quick action bar's colors to the bar's background. Setting it to false applies the colors to the bar's icons.

Getting the invertColorScheme property returns whether the color scheme is inverted or not.

Syntax

get invertColorScheme(): boolean
set invertColorScheme(value: boolean): void
TYPE
?
The kind of data the property stores.
boolean

Examples

Set whether the color scheme is inverted

$w("#myQuickActionBar").invertColorScheme = true;

Get whether the color scheme is inverted

let inverted = $w("#myQuickActionBar").invertColorScheme;  // true

isVisible

Indicates if the element is actually visible.

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It is true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

Note

An element's isVisible property is not the same as its hidden property. The isVisible property indicates whether the element is actually displayed, while hidden indicates if it should be displayed.

The isVisible property of an element remains true even if another element completely covers it so that a user cannot see it.

See Also

hidden, collapsed, rendered

Syntax

get isVisible(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
true

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get whether an element is visible

let isVisible = $w("#myElement").isVisible;  // true

showLabels

Sets or gets whether a quick action bar's labels are shown.

Description

Setting the showLabels property to true shows labels along with the icons in the quick action bar. Setting it to false hides the labels.

Getting the showLabels property returns whether the labels are shown or not.

Syntax

get showLabels(): boolean
set showLabels(value: boolean): void
TYPE
?
The kind of data the property stores.
boolean

Examples

Set whether the labels are shown

$w("#myQuickActionBar").showLabels = false;

Get whether the labels are shown

let showLabels = $w("#myQuickActionBar").showLabels;  // false

style

Gets an object containing information about the element's styles.

Syntax

get style(): Style
TYPE
?
The kind of data the property stores.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.StyleMixin

Examples

Set the background color

$w("#myElement").style.backgroundColor = "rgba(255,0,0,0.5)";

Get the background color

let bgColor = $w("#myElement").style.backgroundColor;

collapse( )

Collapses the element and sets its collapsed property to true.

Description

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

See Also

expand( ), collapsed, hide( )

Syntax

function collapse(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Collapse an element

$w("#myElement").collapse();

Collapse an element and log a message when done

$w("#myElement").collapse()
  .then( () => {
    console.log("Done with collapse");
  } );

Toggle an element's collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

expand( )

Expands the element and sets its collapsed property to false.

Description

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

See Also

expand( ), collapsed, show( )

Syntax

function expand(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Expand an element

$w("#myElement").expand();

Expand an element and log a message when done

$w("#myElement").expand()
  .then( () => {
    console.log("Done with expand");
  } );

Toggle an element's collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

See Also

show( ), hidden, collapse( )

Syntax

function hide([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Hide an element with no effect

$w("#myElement").hide();

Hide an element with the "fade" effect

$w("#myElement").hide("fade");

Hide an element with an effect and log message when the effect is done

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log message when the effect is done

$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

onItemClicked( )

Adds an event handler that runs when an item in a quick action bar is clicked.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onItemClicked(handler: QuickActionBarItemClickedEventHandler): QuickActionBar
callback QuickActionBarItemClickedEventHandler(event: QuickActionBarItemClickedEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: QuickActionBarItemClickedEvent, $w: $w)

The name of the function or the function expression to run when a quick action bar item is clicked.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The quick action bar that triggered the event.

Examples

Get the information of the item that was clicked

$w("#myQuickActionBar").onItemClicked( (event) => {
  let itemType = event.item.itemType; // "search"
  let itemLabel = event.item.label;   // "Search"
  let itemLink = event.item.link;     // "https://www.google.com/search?q=wix"

  let imageSrc = event.itemIndex;     // 3
} );

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

See Also

hide( ), hidden, expand( )

Syntax

function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Show an element with no effect

$w("#myElement").show();

Show an element with the "fade" effect

$w("#myElement").show("fade");

Show an element with the "fade" effect and custom options

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Show an element with an effect and log message when the effect is done

$w("#myElement").show("fade")
  .then( ( ) => {
    console.log("Done with fade");
  } );

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}