[ @sdxc/ui/styles ]
hitArea
The hitArea() style-mixin factory.
import { hitArea } from "@sdxc/ui/styles";Usage
Extends the host's pointer target to at least --ui-target-size in both axes, centred
on the host. With the default "inset" anchor each inset is clamped at zero, so a host
larger than the target keeps its own box, and the host must be relative()/absolute().
Signature
hitArea<Node extends Element = Element>(options?: HitAreaOptions): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>Returns a css() mixin ready for a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | HitAreaOptions | How the box anchors to its host. |
Examples
<button mix={[relative(), hitArea()]} aria-label={t("actions.remove")}><XIcon /></button><button mix={[inlineFlex(), items("center"), justify("center"), hitArea({ anchor: "flex-center" })]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.
Interface
HitAreaOptions
Options accepted by hitArea.
| Member | Type | Description |
|---|---|---|
anchor? | "inset" | "flex-center" | How the box finds its host. "inset" stretches it from the host's edges and needs a positioned host; "flex-center" draws a fixed target-size box that a flex host centres on its content, so it works however a consumer positions the host. |