Flag
<gstock-flag>
|
GstockFlag
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
closable
|
Enables a close button that allows the user to dismiss the flag. |
|
boolean
|
false
|
color
|
The color of the flag. |
'success' | 'information' | 'warning' | 'danger'
|
-
|
|
countdown
|
Enables a countdown that indicates the remaining time the flag will be displayed. Typically used to indicate the remaining time before a whole app refresh. |
|
'rtl' | 'ltr' | undefined
|
-
|
duration
|
The length of time, in milliseconds, the flag will show before closing
itself. If the user interacts with the flag before it closes (e.g. moves
the mouse over it), the timer will restart. Defaults to
Infinity, meaning the flag will not close on its own.
|
-
|
Infinity
|
|
icon
|
The icon name of a registered custom icon library. |
string | undefined
|
-
|
|
open
|
Indicates whether or not the flag is open. You can toggle this attribute
to show and hide the flag, or you can use the show() and
hide() methods and this attribute will reflect the flag’s
open state.
|
|
boolean
|
false
|
pauseable
|
Enables a pause button that allows the user to pause the countdown timer. |
|
boolean
|
false
|
title
|
The title of the flag. |
string
|
''
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-show-event
|
onGstockShowEvent
|
Emitted when the flag opens. | - |
gstock-after-show-event
|
onGstockAfterShowEvent
|
Emitted after the flag opens and all animations are complete. | - |
gstock-hide-event
|
onGstockHideEvent
|
Emitted when the flag closes. | - |
gstock-after-hide-event
|
onGstockAfterHideEvent
|
Emitted after the flag closes and all animations are complete. | - |
Learn more about events .
Slots
| Name | Description |
|---|---|
default
|
The flag’s main content. |
icon
|
An icon to show in the flag. Works best with
<gstock-icon>.
|
Learn more about slots .
Methods
| Name | Description |
|---|---|
isPaused( )
|
Indicates whether the countdown timer is paused. |
show( )
|
Shows the flag. |
hide( )
|
Hides the flag |
pause( )
|
Pauses the countdown timer. |
resume( )
|
Resumes the countdown timer. |
toast( )
|
Displays the flag as a toast notification. This will move the flag out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the flag, you can reuse it by calling this method again. The returned promise will resolve after the flag is hidden. |
Learn more about methods .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper. |
icon
|
The container that wraps the optional icon. |
title
|
The container that wraps the flag’s title content. |
message
|
The container that wraps the flag’s message content. |
toolbar
|
The container that wraps the flag’s toolbar content. |
play-button
|
The play button, an <gstock-icon> component. |
play-button__base
|
The play button’s exported base part. |
pause-button
|
The pause button, an <gstock-icon> component. |
pause-button__base
|
The pause button’s exported base part. |
close-button
|
The close button, an <gstock-icon> component. |
close-button__base
|
The close button’s exported base part. |
Learn more about CSS parts .
Animations
| Name | Description |
|---|---|
flag.show
|
The animation to use when showing the flag. |
flag.hide
|
The animation to use when hiding the flag. |
flag.show-right
|
The animation to use when showing the flag from right side. |
flag.hide-right
|
The animation to use when hiding the flag from right side. |
Learn more about animations .
Dependencies
This component automatically imports the following dependencies.