Blueprint---Dialog用法

Dialog

Dialogs以覆盖其他部分的形式将界面内容呈现在屏幕上。

第一步：安装blueprint环境

yarn add @blueprintjs/core react react-dom

第二步：import相关控件

                        (PS:因为刚开始尝试所以先import最基本的两个)

其中Classes是在Dialog里面嵌套使用的（具体用法见下一步案例）

import * as React from "react";
import {Classes,Dialog } from "@blueprintjs/core";

第三步：搭建整体框架结构

下面的code在执行后会默认初始化就弹出并不能进行关闭操作，因为isOpen属性一直为true。

type Props = { };

export default class XXX extends React.Component<Props>{
    constructor(props: Props) {
        super(props); 
    }

    render(){
        return(
            <div>
            <Dialog title="Palantir Foundry" isOpen={true}>
                <div className={Classes.DIALOG_BODY}>
                        <p>
                            <strong>
                                Data integration is the seminal problem of the digital age. For over ten years, we’ve
                                helped the world’s premier organizations rise to the challenge.
                            </strong>
                        </p>
                        <p>
                            Palantir Foundry radically reimagines the way enterprises interact with data by amplifying
                            and extending the power of data integration. With Foundry, anyone can source, fuse, and
                            transform data into any shape they desire. Business analysts become data engineers — and
                            leaders in their organization’s data revolution.
                        </p>
                        <p>
                            Foundry’s back end includes a suite of best-in-class data integration capabilities: data
                            provenance, git-style versioning semantics, granular access controls, branching,
                            transformation authoring, and more. But these powers are not limited to the back-end IT
                            shop.
                        </p>
                        <p>
                            In Foundry, tables, applications, reports, presentations, and spreadsheets operate as data
                            integrations in their own right. Access controls, transformation logic, and data quality
                            flow from original data source to intermediate analysis to presentation in real time. Every
                            end product created in Foundry becomes a new data source that other users can build upon.
                            And the enterprise data foundation goes where the business drives it.
                        </p>
                        <p>Start the revolution. Unleash the power of data integration with Palantir Foundry.</p>
                    </div>
            </Dialog>
            </div>
        );
    }
}

第四步：建立动作链接

重点主要集中在isOpen和onClose两个props上面（属性内容参见下表）：

    private handleOpen = () => this.setState({ isOpen: true });
    private handleClose = () => this.setState({ isOpen: false });

上面这两个函数是针对isOpen属性进行修改的。
在需要链接的目标位置进行属性设置，比如在<button>的属性中设置onClick属性：

<Button onClick={this.handleOpen}>Show Dialog</Button>

在Dialog中的属性进行设置：

onClose={this.handleClose}

Props	数据格式	描述
isOpen	Required boolean	切换覆盖层及其子层的可见性。这个道具是必需的，因为组件是受控的。
onClose	(event?: SyntheticEvent<HTMLElement>) => void	当用户交互导致覆盖关闭时调用的回调，例如单击覆盖或按下esc键(如果启用)如果存在事件(通常是鼠标或键事件)，则从用户交互接收事件。注意，由于这个组件是由isOpen prop控制的，所以在这个prop变为false之前它不会真正的关闭。
autoFocus	boolean=true	第一次打开时是否应该获得应用程序焦点。继承自IOverlayableProps.autoFocus
backdropClassName	string	应用于背景元素的CSS类名。继承自IBackdropProps.backdropClassName
backdropProps	HTMLProps<HTMLDivElement>	HTML props for背景元。继承自IBackdropProps.backdropProps
canEscapeKeyClose	boolean=true	是否按下esc键应调用onClose。继承自IOverlayableProps.canEscapeKeyClose
canOutsideClickClose	boolean=true	在覆盖元素之外单击(无论是在背景上还是在文档上)是否应该调用onClose。继承自IBackdropProps.canOutsideClickClose
className	string	A space-delimited list of class names to pass along to a child element.。继承自IProps.className
enforceFocus	boolean=true	覆盖是否应该阻止焦点离开自己。也就是说，如果用户试图在覆盖层之外聚焦一个元素，并且启用了这个道具，那么覆盖层将立即将焦点带回自身。如果正在嵌套覆盖组件，要么在“最外层”覆盖上禁用这个道具，要么标记嵌套的usePortal={false}。继承自IOverlayableProps.enforceFocus
icon	IconName/Element	Blueprint UI图标(或图标元素)的名称，用于在对话框的标题中呈现。注意，只有在提供标题时才会呈现标题}。继承自IOverlayableProps.enforceFocus
isCloseButtonShown	boolean=true	是否在dialog的头部显示关闭按钮，注意需要有title时才可以。