@illa-design/trigger v1.3.0

Trigger

The basic component of all popup component. it used to show more information by hovering, focusing, or clicking on a element.

Installation

yarn add @illa-design/trigger

Import

import { Trigger } from "@illa-design/trigger"

API

Trigger Basic Properties

Trigger Events

Example

Basic usage

<Trigger content="Trigger">
  <Button>Trigger</Button>
</Trigger>

Set popup position

<Trigger content="Trigger" position="top">
  <Button>Trigger</Button>
</Trigger>

Set popup's background color

<Trigger content="Trigger" position="top" colorScheme="cyan">
  <Button>Trigger</Button>
</Trigger>

Set arrow

<Trigger content="Trigger" position="top" colorScheme="cyan" showArrow={false}>
  <Button>Trigger</Button>
</Trigger>

Set popup's default visibility status

<Trigger content="Trigger" position="top" colorScheme="cyan" defaultPopupVisible>
  <Button>Trigger</Button>
</Trigger>

Set popup's delay time to open

<Trigger content="Trigger" position="top" colorScheme="cyan" openDelay={1000} closeDelay={1000}>
  <Button>Trigger</Button>
</Trigger>