0.1.29 • Published 4 years ago

@belong-ui/modal v0.1.29

Weekly downloads
9
License
MIT
Repository
-
Last release
4 years ago

Basic Modal Usage:

initialState = {
  isModalWithCloseButton: false,
  isModalWithoutCloseButton: false,
};

<div className="styleguidist__btns-wrap">
  <p>With Close Button and background dark</p>
  <br /><br />
  <div>
    <Modal
      isOpen={state.isModalWithCloseButton}
      type="dark"
      title="Modal Title"
      position="center"
      onEscape={(event) => {
        setState({ isModalWithCloseButton: false });
      }}
      onClose={() => {
        setState({ isModalWithCloseButton: false });
      }}
    >
      <div>
        <div style={{ marginTop: '20px' }}>Modal Box</div>
      </div>
    </Modal>
    <button
      type="button"
      className="blng-button"
      onClick={() => {
        setState({ isModalWithCloseButton: !state.isModalWithCloseButton });
      }}
    >
      Modal With Close Option
    </button>
  </div>
  <br /><br />
  <p>Without Close Button and background light</p>
  <br /><br />
  <div>
    <Modal
      isOpen={state.isModalWithoutCloseButton}
      hideCloseIcon
      type="light"
      position="center"
      onEscape={(event) => {
        setState({ isModalWithoutCloseButton: false });
      }}
      onClose={() => {
        setState({ isModalWithoutCloseButton: false });
      }}
    >
      <div>
        <div style={{ marginTop: '20px' }}>Modal Box</div>
      </div>
    </Modal>
    <button
      type="button"
      className="blng-button"
      onClick={() => {
        setState({ isModalWithoutCloseButton: !state.isModalWithoutCloseButton });
      }}
    >
      Modal Without Close Option
    </button>
  </div>
</div>
0.1.29

4 years ago

0.1.28

4 years ago

0.1.26

4 years ago

0.1.27

4 years ago

0.1.25

4 years ago

0.1.24

4 years ago

0.1.23

4 years ago

0.1.22

4 years ago

0.1.21

4 years ago

0.1.20

4 years ago

0.1.19

4 years ago

0.1.18

4 years ago

0.1.17

4 years ago