$w.QuickActionBar

$w.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.

Mixes In

$w.HiddenCollapsedMixin, $w.StyleMixin

Contents

alignment Sets or gets a quick action bar's alignment.
collapsed Indicates if the element is collapsed or expanded.
colorScheme Sets or gets a quick action bar's color scheme.
hidden Indicates if the element is visible or hidden.
invertColorScheme Sets or gets whether a quick action bar's color scheme is inverted.
isVisible Indicates if the element is actually visible.
showLabels Sets or gets whether a quick action bar's labels are shown.
style Gets an object containing information about the element's styles.
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.
alignment

alignment

Sets or gets a quick action bar's alignment.

Syntax

get alignment(): Alignment
set alignment(alignment: Alignment): void
type Alignment = "right" | "left"

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.

Type

Boolean

Examples

Set the quick action bar alignment

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

Get the quick action bar alignment

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

collapsed

Indicates if the element is collapsed or expanded.

Syntax

get collapsed(): boolean

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.

Type

Boolean

Examples

Get an element's collapsed status

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

Toggle an element's collapsed state

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

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

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

colorScheme

colorScheme

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

Syntax

get colorScheme(): ColorScheme
set colorScheme(colorScheme: ColorScheme): void
type ColorScheme = "grey" | "black" | "brand"

Description

One of:

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

Type

String

Examples

Set the color scheme

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

Get the color scheme

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

hidden

Indicates if the element is visible or hidden.

Syntax

get hidden(): boolean

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.

Type

Boolean

Examples

Get an element's hidden status

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

Toggle an element's hidden state

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

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

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

invertColorScheme

invertColorScheme

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

Syntax

get invertColorScheme(): Boolean
set invertColorScheme(value: Boolean): void

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.

Type

Boolean

Examples

Set whether the color scheme is inverted

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

Get whether the color scheme is inverted

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

isVisible

Indicates if the element is actually visible.

Syntax

get isVisible(): boolean

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.

Type

Boolean

Examples

Get whether an element is visible

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

Default Value

true

Mixed In From

$w.HiddenCollapsedMixin

See Also

hidden, collapsed, rendered

showLabels

showLabels

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

Syntax

get showLabels(): Boolean
set showLabels(value: Boolean): void

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.

Type

Boolean

Examples

Set whether the labels are shown

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

Get whether the labels are shown

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

style

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

Syntax

get style(): Style

Type

Style

Examples

Set the background color

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

Get the background color

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

Mixed In From

$w.StyleMixin

collapse( )

collapse( )

Collapses the element and sets its collapsed property to true.

function collapse(): Promise<void>

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.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to true.

Examples

Collapse an element

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

Collapse an element and log a message when done

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

Toggle an element's collapsed state

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

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, hide( )

expand( )

expand( )

Expands the element and sets its collapsed property to false.

function expand(): Promise<void>

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.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to false.

Examples

Expand an element

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

Expand an element and log a message when done

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

Toggle an element's collapsed state

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

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, show( )

hide( )

hide( )

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

function hide([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

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.

Parameters

effectName (optional) String The name of the effect to play when hiding the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to true.

Examples

Hide an element with no effect

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

Hide an element with the "fade" effect

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

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

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50IikuaGlkZSgiZmFkZSIsIGZhZGVPcHRpb25zKTsK
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

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

Toggle an element's hidden state

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

Mixed In From

$w.HiddenCollapsedMixin

See Also

show( ), hidden, collapse( )

onItemClicked( )

onItemClicked( )

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

function onItemClicked(handler: QuickActionBarItemClickedEventHandler): QuickActionBar
callback QuickActionBarItemClickedEventHandler(event: QuickActionBarItemClickedEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when a quick action bar item is clicked.
event QuickActionBarItemClickedEvent The event that has occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

QuickActionBar The quick action bar that triggered the event.

Examples

Get the information of the item that was clicked

JHcoIiNteVF1aWNrQWN0aW9uQmFyIikub25JdGVtQ2xpY2tlZCggKGV2ZW50KSA9PiB7CiAgbGV0IGl0ZW1UeXBlID0gZXZlbnQuaXRlbS5pdGVtVHlwZTsgLy8gInNlYXJjaCIKICBsZXQgaXRlbUxhYmVsID0gZXZlbnQuaXRlbS5sYWJlbDsgICAvLyAiU2VhcmNoIgogIGxldCBpdGVtTGluayA9IGV2ZW50Lml0ZW0ubGluazsgICAgIC8vICJodHRwczovL3d3dy5nb29nbGUuY29tL3NlYXJjaD9xPXdpeCIKCiAgbGV0IGltYWdlU3JjID0gZXZlbnQuaXRlbUluZGV4OyAgICAgLy8gMwp9ICk7Cg==
$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( )

show( )

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

function show([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

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:

Parameters

effectName (optional) String The name of the effect to play when showing the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to false.

Examples

Show an element with no effect

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

Show an element with the "fade" effect

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

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

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmFkZSIsIGZhZGVPcHRpb25zKTsK
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

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

Toggle an element's hidden state

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

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), hidden, expand( )