1.3.0 • Published 5 months ago

@illa-design/popconfirm v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
5 months ago

Popconfirm

The Popconfirm component is used to display popup confirm box.

Installation

yarn add @illa-design/popconfirm

Import

import { Popconfirm } from "@illa-design/popconfirm"

API

Popconfirm Basic Properties

PropsDescTypeDefault
positionThe position of the popconfirm"top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt"| "rb""top"
titleTitleReactNode-
cancelTextText on cancel buttonstring-
okTextText on confirm buttonstring-
okButtonPropsProps of confirm buttonButtonProps-
cancelButtonPropsProps of cancel buttonButtonProps-
defaultPopupVisibleIf true, the popup is visibleboolean-
popupVisibleIf true, the popup is visible(controlled)boolean-
iconCustom iconboolean-
triggerTrigger PropsTriggerProps-
okColorSchemeColor of the confirm button"white" | "blackAlpha" | "gray" | "grayBlue" | "red" | "orange" | "yellow" | "green" | "blue" | "cyan" | "purple""blue"
cancelColorSchemeColor of the cancel button"white" | "blackAlpha" | "gray" | "grayBlue" | "red" | "orange" | "yellow" | "green" | "blue" | "cyan" | "purple""gray"
clickOutsideToCloseIf true, close when click outside the popupboolean-
showArrowIf true, show the arrow of the popupboolean-
closeDelayDelay time when closenumber-
openDelayDelay time when opennumber-
autoFitPositionIf true, auto fit position when there is no roomboolean-
closeOnClickIf true, click to close the popupboolean-
autoAlignPopupWidthIf true, auto align the width of the popupboolean-

Popconfirm Events

PropsDescTypeDefault
onOKCallback when click confirm button() => void-
onCancelCallback when click cancel button() => void-
onVisibleChangeCallback when popup open and close(visible: boolean) => void-

Examples

Basic usage

<Popconfirm title="Visible" closeDelay={0} openDelay={0} position={"bl"}>
  <Button>Click</Button>
</Popconfirm>

Set the text on buttons and the popup position

<Popconfirm
  title="Visible"
  position={"bl"}
  okText={"ok-test"}
  cancelText={"cancel-text"}
>
  <Button>Click</Button>
</Popconfirm>

Set icon

<Popconfirm title="Visible" position={"bl"} icon={<SearchIcon />}>
  <Button>Click</Button>
</Popconfirm>
1.2.0

5 months ago

1.3.0

5 months ago

1.0.29

10 months ago

1.0.28

10 months ago

1.0.27

11 months ago

1.0.31

9 months ago

1.0.30

10 months ago

1.1.0

8 months ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.26

12 months ago

1.0.25

12 months ago

1.0.24

12 months ago

1.0.23

12 months ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.20

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

2 years ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.0.10

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.9

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.8

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago