Dialog

link - developer.microsoft.com/en-us/fluentui#/controls/web/dialog
A Dialog is a small pop-up that takes focus from the page or app and requires the user to interact with it.
It is primarily used for confirming actions, such as deleting files or asking the user to make a choice.
For large/complicated dialog boxes you should use the Modal component

import React, { Component } from 'react'  
import {Fabric} from 'office-ui-fabric-react/lib/Fabric'
import {Button, ButtonType} from 'office-ui-fabric-react/lib/Button'
import {Dialog, DialogType, DialogFooter} from 'office-ui-fabric-react/lib/Dialog'

class App extends Component {
  constructor() {
    super()
    this.state = {
      isOpen: false,
    }
  }

  open = () => this.setState({isOpen: true})

  close = () => this.setState({isOpen: false})

  render() {
    return (
      <Fabric className="App">
        <div style={{margin: '5em'}}>
          <Button onClick={this.open}>I am a button.</Button>
        </div>
        <Dialog
          isOpen={this.state.isOpen}
          type={DialogType.close}
          onDismiss={this.close.bind(this)}
          title='Dialog title'
          subText='Dialog subText'
          isBlocking={false}
          closeButtonAriaLabel='Close'
        >
          <h1>Hello, World!</h1>
          <DialogFooter>
            <Button buttonType={ButtonType.primary} onClick={this.close}>OK</Button>
          </DialogFooter>
        </Dialog>
      </Fabric>
    )
  }
}

export class BETDialogBlocking extends React.Component { 
  constructor(props) {
    super(props);

    this.state = { hideDialog: true };

    this.handleClose = this.handleClose.bind(this);
  }

    handleclose(event) {
       this.setState({hideDialog: true });
    };


    render() {

      return (
        <div>
           <Dialog
              hidden={this.state.hideDialog}
              onDismiss={ () => this.closeDialog() }
          // minWidth={400}
          // maxWidth={400}
              dialogContentProps={{
                showCloseButton: true,
                type: DialogType.normal,
                title: 'Dialog Box Title',
                subText: 'dialog box message description.'
              }}
              modalProps={{
                 isBlocking: true,
                 styles: { main: { maxWidth: 450 } },
                 dragOptions: {
                   moveMenuItemText: 'Move',
                   closeMenuItemText: 'Close',
                   menu: ContextualMenu,
                 },
                 containerClassName: 'ms-dialogMainOverride'
              }}
           >
              <DialogFooter>
                 <PrimaryButton
                    text= { 'Save Button' }
                    onClick={ () => alert('Button clicked') }
                 />
              </DialogFooter>
           </Dialog>
        </div>
      );
 
    }
}


© 2021 Better Solutions Limited. All Rights Reserved. © 2021 Better Solutions Limited TopPrevNext