silk-widgets/com.varabyte.kobweb.silk.components.overlay

Package-level declarations

Types

Link copied to clipboard
abstract class KeepPopupOpenStrategy(defaultValue: Boolean = false)

A contract for a strategy that determines whether a popup should stay open or not.

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
abstract class OpenClosePopupStrategy

A contract for a strategy that determines when a popup should open or close.

Link copied to clipboard
sealed interface OverlayKind : ComponentKind
Link copied to clipboard
object OverlayVars
Link copied to clipboard
sealed interface PopupKind : ComponentKind
Link copied to clipboard
enum PopupPlacement : Enum<PopupPlacement>

An enumeration for placing a popup outside of while still being aligned to another.

Link copied to clipboard
abstract class PopupPlacementStrategy

A contract to control how a popup should be placed relative to some placement element.

Link copied to clipboard
@Immutable
class PopupScope(val placement: PopupPlacement?) : BoxScope

The scope for the content of a popup.

Link copied to clipboard
object PopupVars
Link copied to clipboard
Link copied to clipboard
sealed interface TooltipKind : ComponentKind
Link copied to clipboard
object TooltipVars

Properties

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
const val DEFAULT_POPUP_OFFSET_PX: Int = 15

A small but comfortable amount of space between a popup and its target.

Link copied to clipboard
val OpenClosePopupStrategy.isOpen: Boolean

A readable convenience property that queries the underlying state flow.

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
val KeepPopupOpenStrategy.shouldKeepOpen: Boolean

A readable convenience property that queries the underlying state flow.

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard

Functions

Link copied to clipboard
@Composable
fun AdvancedPopover(target: ElementTarget, modifier: Modifier = Modifier, hiddenModifier: Modifier = Modifier, variant: CssStyleVariant<PopupKind>? = null, showDelayMs: Int = 0, hideDelayMs: Int = 0, openCloseStrategy: OpenClosePopupStrategy? = null, placementTarget: ElementTarget? = null, placementStrategy: PopupPlacementStrategy? = null, keepOpenStrategy: KeepPopupOpenStrategy? = null, ref: ElementRefScope<HTMLElement>? = null, content: @Composable PopupScope.() -> Unit)

A more generally configurable version of Popover, with more control at the cost of more verbosity.

Link copied to clipboard
@Composable
fun AdvancedTooltip(target: ElementTarget, modifier: Modifier = Modifier, hiddenModifier: Modifier = Modifier, variant: CssStyleVariant<TooltipKind>? = null, hasArrow: Boolean = true, showDelayMs: Int = 0, hideDelayMs: Int = 0, openCloseStrategy: OpenClosePopupStrategy? = null, placementTarget: ElementTarget? = null, placementStrategy: PopupPlacementStrategy? = null, keepOpenStrategy: KeepPopupOpenStrategy? = null, ref: ElementRefScope<HTMLElement>? = null, content: @Composable PopupScope.() -> Unit)
@Composable
fun AdvancedTooltip(target: ElementTarget, text: String, modifier: Modifier = Modifier, hiddenModifier: Modifier = Modifier, variant: CssStyleVariant<TooltipKind>? = null, hasArrow: Boolean = true, showDelayMs: Int = 0, hideDelayMs: Int = 0, openCloseStrategy: OpenClosePopupStrategy? = null, placementTarget: ElementTarget? = null, placementStrategy: PopupPlacementStrategy? = null, keepOpenStrategy: KeepPopupOpenStrategy? = null, ref: ElementRefScope<HTMLElement>? = null)

A version of Tooltip that allows for more control over the tooltip's behavior.

Link copied to clipboard
Link copied to clipboard
fun OpenClosePopupStrategy.Companion.manual(): ManualOpenClosePopupStrategy

A strategy that allows the user to manually control when a popup should open or close.

fun KeepPopupOpenStrategy.Companion.manual(defaultValue: Boolean = true): ManualKeepPopupOpenStrategy

A KeepPopupOpenStrategy that allows the user to manually control whether the popup should stay open or not.

Link copied to clipboard
fun KeepPopupOpenStrategy.Companion.never(): KeepPopupOpenStrategy

A KeepPopupOpenStrategy which asks to never keep the popup open.

Link copied to clipboard
fun KeepPopupOpenStrategy.observed(): KeepPopupOpenStrategy

A strategy that observes another strategy and reflects its state.

Link copied to clipboard
fun KeepPopupOpenStrategy.Companion.onFocus(): KeepPopupOpenStrategy

A KeepPopupOpenStrategy that keeps the popup open as long as any elements within the popup have focus.

fun OpenClosePopupStrategy.Companion.onFocus(): OpenClosePopupStrategy

A strategy that opens the popup when an element gains focus and closes it when it loses focus.

Link copied to clipboard
fun KeepPopupOpenStrategy.Companion.onHover(): KeepPopupOpenStrategy

A KeepPopupOpenStrategy that keeps the popup open as long as the mouse cursor is inside the popup somewhere.

fun OpenClosePopupStrategy.Companion.onHover(): OpenClosePopupStrategy

A strategy that opens the popup when the cursor enters some target element and closes it when the cursor leaves.

Link copied to clipboard
@Composable
fun Overlay(modifier: Modifier = Modifier, variant: CssStyleVariant<OverlayKind>? = null, contentAlignment: Alignment = Alignment.TopCenter, ref: ElementRefScope<HTMLElement>? = null, content: @Composable BoxScope.() -> Unit = {})

Renders a fullscreen overlay that is removed from the normal compose flow.

Link copied to clipboard
Link copied to clipboard
@Composable
fun Popover(target: ElementTarget, modifier: Modifier = Modifier, variant: CssStyleVariant<PopupKind>? = null, placement: PopupPlacement = PopupPlacement.Bottom, offsetPixels: Number = DEFAULT_POPUP_OFFSET_PX, placementTarget: ElementTarget? = null, showDelayMs: Int = 0, hideDelayMs: Int = 0, keepOpenStrategy: KeepPopupOpenStrategy? = null, ref: ElementRefScope<HTMLElement>? = null, content: @Composable PopupScope.() -> Unit)

Render a general, undecorated composable in a location above and outside some target element.

Link copied to clipboard
fun OpenClosePopupStrategy.Companion.timed(timeoutMs: Int): TimedOpenClosePopupStrategy

A strategy that opens when the user starts a timer and then closes when the timer expires.

Link copied to clipboard
@Composable
fun Tooltip(target: ElementTarget, modifier: Modifier = Modifier, variant: CssStyleVariant<TooltipKind>? = null, placement: PopupPlacement = PopupPlacement.Bottom, hasArrow: Boolean = true, offsetPixels: Number = DEFAULT_POPUP_OFFSET_PX, placementTarget: ElementTarget? = null, showDelayMs: Int = 0, hideDelayMs: Int = 0, keepOpenStrategy: KeepPopupOpenStrategy? = null, ref: ElementRefScope<HTMLElement>? = null, content: @Composable PopupScope.() -> Unit)

A widget for displaying information inside a sort of chat bubble with an (optional) arrow on it.

@Composable
fun Tooltip(target: ElementTarget, text: String, modifier: Modifier = Modifier, variant: CssStyleVariant<TooltipKind>? = null, placement: PopupPlacement = PopupPlacement.Bottom, hasArrow: Boolean = true, offsetPixels: Number = DEFAULT_POPUP_OFFSET_PX, placementTarget: ElementTarget? = null, showDelayMs: Int = 0, hideDelayMs: Int = 0, keepOpenStrategy: KeepPopupOpenStrategy? = null, ref: ElementRefScope<HTMLElement>? = null)

A convenience Tooltip making it trivial to display some text message.