duck.html.components.extensions.clickable.highlight

Highlight extension for HTML components.

Gives a container component a native-style press highlight: the whole component dims to a flat overlay color while pressed and fades back out on release, with no growth or origin point, unlike RippleExtension.

Usage example:

from duck.html.components.button import Button
from duck.html.components.extensions.clickable import HighlightExtension

class HighlightButton(HighlightExtension, Button):
    pass

btn = HighlightButton(text="Save", highlight_color="rgba(255, 255, 255, 0.4)")

Keyword arguments:

• highlight_color (str): CSS color of the overlay. Defaults to the text color.

• highlight_opacity (float): Overlay opacity while pressed, 0 to 1.

• highlight_duration (int): Fade time in milliseconds, in or out.

Notes:

• The component must be able to contain children, so void elements are rejected.

• The overlay is pure CSS, driven by :active, so it is skipped automatically during a scroll or swipe and never touches the DOM on press, unlike the ripple’s wave. It never interferes with the host’s own click handling.

• The host gets position: relative unless already set. Rounded corners are picked up automatically, since the overlay inherits the host’s border radius.

Module Contents

Classes

HighlightExtension

Extension adding a native-style press highlight to container components.

Data

COLOR_VARIABLE
DEFAULT_DURATION_MS
DEFAULT_OPACITY
DURATION_VARIABLE
HIGHLIGHT_SCRIPT
HIGHLIGHT_STYLE
HOST_CLASS
HOST_STYLE_DEFAULTS
OPACITY_VARIABLE
READY_FLAG
SCRIPT_TEMPLATE
STYLE_ELEMENT_ID
STYLE_TEMPLATE
TEMPLATE_VALUES

API

duck.html.components.extensions.clickable.highlight.COLOR_VARIABLE

‘–duck-highlight-color’

duck.html.components.extensions.clickable.highlight.DEFAULT_DURATION_MS

150

duck.html.components.extensions.clickable.highlight.DEFAULT_OPACITY

0.12

duck.html.components.extensions.clickable.highlight.DURATION_VARIABLE

‘–duck-highlight-duration’

duck.html.components.extensions.clickable.highlight.HIGHLIGHT_SCRIPT

‘substitute(…)’

duck.html.components.extensions.clickable.highlight.HIGHLIGHT_STYLE

‘substitute(…)’

duck.html.components.extensions.clickable.highlight.HOST_CLASS

‘duck-highlight’

duck.html.components.extensions.clickable.highlight.HOST_STYLE_DEFAULTS

None

class duck.html.components.extensions.clickable.highlight.HighlightExtension

Bases: duck.html.components.extensions.Extension

Extension adding a native-style press highlight to container components.

The component only carries a class, a few style variables and one small script. The script installs the overlay styles and the iOS :active fix the first time it runs, so highlights also work on components added later.

add_highlight_extension_script()

Adds highlight extension script to component or component’s parent.

apply_extension() → None

Apply the highlight effect to the component.

Marks the component as a highlight host, applies the highlight options from kwargs and attaches the script that installs the shared styles.

Raises:

ExtensionError – If the component cannot contain children.

apply_highlight_extension_host_style() → None

Mark the component as a highlight host.

The overlay is an absolutely positioned pseudo-element on the host, so the host needs a positioned box. Values the component has already set are kept.

apply_highlight_extension_options() → None

Apply the highlight options from kwargs.

Color, opacity, and duration all go through CSS variables read by the shared stylesheet, so no per-instance stylesheet rules are needed.

load()

Load component, modified by HighlightExtension.

duck.html.components.extensions.clickable.highlight.OPACITY_VARIABLE

‘–duck-highlight-opacity’

duck.html.components.extensions.clickable.highlight.READY_FLAG

‘duckHighlightReady’

duck.html.components.extensions.clickable.highlight.SCRIPT_TEMPLATE = <Multiline-String>

duck.html.components.extensions.clickable.highlight.STYLE_ELEMENT_ID

‘duck-highlight-style’

duck.html.components.extensions.clickable.highlight.STYLE_TEMPLATE = <Multiline-String>

duck.html.components.extensions.clickable.highlight.TEMPLATE_VALUES

None