Dialog

Basic Usage

Loading...

function Demo() {
  const [show, setShow] = useState(false)

  return (
    <>
      <CDialog value={show} onChange={setShow} title="Hi, there">
        <div>Hello, World</div>
      </CDialog>
      <CButton label="Open dialog" onClick={() => setShow(true)} />
    </>
  )
}

Fold/Expand Code

Height & Width

Loading...

function Demo() {
  const [show, setShow] = useState(false)

  return (
    <>
      <CDialog
        value={show}
        onChange={setShow}
        title="Hi, there"
        width="60vw"
        bodyHeight="60vh"
      >
        <div>Hello, world</div>
      </CDialog>
      <CButton label="Open dialog" onClick={() => setShow(true)} />
    </>
  )
}

Fold/Expand Code

Without Close Icon (Press esc to close)

Loading...

function Demo() {
  const [show, setShow] = useState(false)

  return (
    <>
      <CDialog
        value={show}
        onChange={setShow}
        title="Hi, there"
        width="60vw"
        bodyHeight="60vh"
        closeIcon={false}
      >
        <div>Hello, world</div>
      </CDialog>
      <CButton label="Open dialog" onClick={() => setShow(true)} />
    </>
  )
}

Fold/Expand Code

Positions

Loading...

function Demo() {
  const {
    matArrowBack,
    matArrowUpward,
    matArrowForward,
    matArrowDownward,
    matFullscreenExit,
  } = MdIcons
  const [show, setShow] = useState(false)
  const [horizontalAlign, setHorizontalAlign] = useState('center')
  const [verticalAlign, setVerticalAlign] = useState('center')

  const openWithPosition = (h, v) => {
    setHorizontalAlign(h)
    setVerticalAlign(v)
    setShow(true)
  }

  return (
    <>
      <CDialog
        value={show}
        onChange={setShow}
        title="Hi, there"
        horizontalAlign={horizontalAlign}
        verticalAlign={verticalAlign}
      >
        <div>Hello, world</div>
      </CDialog>
      <div className="c-row c-gutter-sm">
        <div>
          <CButton icon onClick={() => openWithPosition('start', 'start')}>
            <CIcon
              content={matArrowUpward}
              style={{ transform: 'rotate(-45deg)' }}
            />
          </CButton>
        </div>
        <div>
          <CButton icon onClick={() => openWithPosition('center', 'start')}>
            <CIcon content={matArrowUpward} />
          </CButton>
        </div>
        <div>
          <CButton icon onClick={() => openWithPosition('end', 'start')}>
            <CIcon
              content={matArrowUpward}
              style={{ transform: 'rotate(45deg)' }}
            />
          </CButton>
        </div>
      </div>
      <div className="c-row c-gutter-sm">
        <div>
          <CButton icon onClick={() => openWithPosition('start', 'center')}>
            <CIcon content={matArrowBack} />
          </CButton>
        </div>
        <div>
          <CButton icon onClick={() => openWithPosition('center', 'center')}>
            <CIcon content={matFullscreenExit} />
          </CButton>
        </div>
        <div>
          <CButton icon onClick={() => openWithPosition('end', 'center')}>
            <CIcon content={matArrowForward} />
          </CButton>
        </div>
      </div>
      <div className="c-row c-gutter-sm">
        <div>
          <CButton icon onClick={() => openWithPosition('start', 'end')}>
            <CIcon
              content={matArrowBack}
              style={{ transform: 'rotate(-45deg)' }}
            />
          </CButton>
        </div>
        <div>
          <CButton icon onClick={() => openWithPosition('center', 'end')}>
            <CIcon content={matArrowDownward} />
          </CButton>
        </div>
        <div>
          <CButton icon onClick={() => openWithPosition('end', 'end')}>
            <CIcon
              content={matArrowForward}
              style={{ transform: 'rotate(45deg)' }}
            />
          </CButton>
        </div>
      </div>
    </>
  )
}

Fold/Expand Code

Footer Actions

Loading...

function Demo() {
  const [show, setShow] = useState(false)
  return (
    <>
      <CDialog
        value={show}
        onChange={setShow}
        title="Title"
        showConfirmBtn
        showCancelBtn
      >
        content
      </CDialog>
      <CButton label="Open dialog" onClick={() => setShow(true)} />
    </>
  )
}

Fold/Expand Code

Customize Content

Loading...

function Demo() {
  const [show, setShow] = useState(false)

  return (
    <>
      <CDialog
        value={show}
        onChange={setShow}
        title="Hi, there"
        customTitle={<img style={{ width: '80px' }} src="/logo-dark.svg" />}
        customCloseIcon={<CIcon content={MdIcons.matPeople} />}
        customFooterActions={
          <>
            <CButton
              flat
              size="sm"
              label="Custom button 1"
              theme="negative"
              onClick={() => setShow(false)}
            />
            <CButton
              size="sm"
              label="Custom button 2"
              onClick={() => setShow(false)}
            />
          </>
        }
      >
        <div>Hello, world</div>
      </CDialog>
      <CButton label="Open dialog" onClick={() => setShow(true)} />
    </>
  )
}

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data