Dialog

Dialog Props

Name	Type	Default	Description
backdrop	boolean	true	Enables Popup backdrop (dark semi transparent layer behind)
buttons	string		Dialog buttons content
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-white dark:bg-neutral-800'	Dialog bg color in iOS theme
colors.bgMaterial	string	'bg-md-light-surface-3 dark:bg-md-dark-surface-3'	Dialog bg color in iOS theme
colors.contentTextIos	string	''	Content text color in iOS theme
colors.contentTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'	Content text color in Material theme
colors.titleIos	string	''	Title text color in iOS theme
colors.titleMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'	Title text color in Material theme
component	string	'div'	Component's HTML Element
content	string		Dialog main content
opened	boolean	false	Allows to open/close Popup and set its initial state
sizeIos	string	'w-[16.875rem]'	Tailwind CSS size classes for iOS theme
sizeMaterial	string	'w-[19.5rem]'	Tailwind CSS size classes for Material theme
title	string		Dialog title content
titleFontSizeIos	string	'text-[18px]'	Tailwind CSS classes for title font size iOS theme
titleFontSizeMaterial	string	'text-[24px]'	Tailwind CSS classes for title font size Material theme
translucent	boolean	true	Makes Dialog background translucent (with backdrop-filter: blur) in iOS theme

DialogButton Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'	Active/pressed state bg color in iOS theme
colors.disabledTextIos	string	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'	Disabled button text color in iOS theme
colors.textIos	string	''text-primary	Text color in iOS theme
component	string	'button'	Component's HTML Element
disabled	boolean	false	Makes button disabled
strong	boolean	false	Makes button bold in iOS theme and fill in Material theme, overwrites strongIos and strongMaterial
strongIos	boolean	false	Makes button bold in iOS theme
strongMaterial	boolean	false	Makes button fill in Material theme

Dialog Slots

Name	Description
buttons	Dialog buttons content
content	Dialog main content
title	Dialog title content

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Dialog" />

    <i-block strong inset class="space-y-4">
      <p>
        Dialog is a type of modal window that appears in front of app content to
        provide critical information, or prompt for a decision to be made.
      </p>
    </i-block>

    <i-block strong inset>
      <p class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <i-button rounded @click="() => (basicOpened = true)">Basic</i-button>
        <i-button rounded @click="() => (alertOpened = true)">Alert</i-button>
        <i-button rounded @click="() => (confirmOpened = true)"
          >Confirm</i-button
        >
        <i-button rounded @click="() => (listOpened = true)">List</i-button>
      </p>
    </i-block>

    <i-dialog
      :opened="basicOpened"
      @backdropclick="() => (basicOpened = false)"
    >
      <template #title>Dialog Title</template>
      Dialog is a type of modal window that appears in front of app content to
      provide critical information, or prompt for a decision to be made.

      <template #buttons>
        <i-dialog-button @click="() => (basicOpened = false)">
          Action 2
        </i-dialog-button>
        <i-dialog-button @click="() => (basicOpened = false)">
          Action 1
        </i-dialog-button>
      </template>
    </i-dialog>
    <i-dialog
      :opened="alertOpened"
      @backdropclick="() => (alertOpened = false)"
    >
      <template #title>ina-ui UI</template>
      Hello world!
      <template #buttons>
        <i-dialog-button @click="() => (alertOpened = false)"
          >Ok</i-dialog-button
        >
      </template>
    </i-dialog>
    <i-dialog
      :opened="confirmOpened"
      @backdropclick="() => (confirmOpened = false)"
    >
      <template #title>ina-ui UI</template>
      All good today?
      <template #buttons>
        <i-dialog-button @click="() => (confirmOpened = false)"
          >No</i-dialog-button
        >
        <i-dialog-button strong @click="() => (confirmOpened = false)">
          Yes
        </i-dialog-button>
      </template>
    </i-dialog>
    <i-dialog :opened="listOpened" @backdropclick="() => (listOpened = false)">
      <template #title>Your super hero</template>
      <i-list nested class="-mx-4">
        <i-list-item label title="Batman">
          <template #after>
            <i-radio
              component="div"
              value="batman"
              :checked="radioValue === 'batman'"
              @change="() => (radioValue = 'batman')"
            />
          </template>
        </i-list-item>
        <i-list-item label title="Spider-man">
          <template #after>
            <i-radio
              component="div"
              value="spiderman"
              :checked="radioValue === 'spiderman'"
              @change="() => (radioValue = 'spiderman')"
            />
          </template>
        </i-list-item>
        <i-list-item label title="Hulk">
          <template #after>
            <i-radio
              component="div"
              value="hulk"
              :checked="radioValue === 'hulk'"
              @change="() => (radioValue = 'hulk')"
            />
          </template>
        </i-list-item>
      </i-list>
      <template #buttons>
        <i-dialog-button @click="() => (listOpened = false)"
          >Confirm</i-dialog-button
        >
      </template>
    </i-dialog>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlock,
    iButton,
    iDialog,
    iDialogButton,
    iList,
    iListItem,
    iRadio,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlock,
      iButton,
      iDialog,
      iDialogButton,
      iList,
      iListItem,
      iRadio,
    },
    setup() {
      const basicOpened = ref(false);
      const alertOpened = ref(false);
      const confirmOpened = ref(false);
      const listOpened = ref(false);
      const radioValue = ref('batman');
      return {
        basicOpened,
        alertOpened,
        confirmOpened,
        listOpened,
        radioValue,
      };
    },
  };
</script>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Dialog,
  DialogButton,
  Block,
  List,
  ListItem,
  Radio,
  Button,
} from 'ina-ui/react';

export default function DialogPage() {
  const [basicOpened, setBasicOpened] = useState(false);
  const [alertOpened, setAlertOpened] = useState(false);
  const [confirmOpened, setConfirmOpened] = useState(false);
  const [listOpened, setListOpened] = useState(false);
  const [radioValue, setRadioValue] = useState('batman');
  return (
    <Page>
      <Navbar
        title="Dialog"
        />

      <Block strong inset className="space-y-4">
        <p>
          Dialog is a type of modal window that appears in front of app content
          to provide critical information, or prompt for a decision to be made.
        </p>
      </Block>
      <Block strong inset>
        <p className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <Button rounded onClick={() => setBasicOpened(true)}>
            Basic
          </Button>
          <Button rounded onClick={() => setAlertOpened(true)}>
            Alert
          </Button>
          <Button rounded onClick={() => setConfirmOpened(true)}>
            Confirm
          </Button>
          <Button rounded onClick={() => setListOpened(true)}>
            List
          </Button>
        </p>
      </Block>
      <Dialog
        opened={basicOpened}
        onBackdropClick={() => setBasicOpened(false)}
        title="Dialog Title"
        content="Dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made."
        buttons={
          <>
            <DialogButton onClick={() => setBasicOpened(false)}>
              Action 2
            </DialogButton>
            <DialogButton onClick={() => setBasicOpened(false)}>
              Action 1
            </DialogButton>
          </>
        }
      />
      <Dialog
        opened={alertOpened}
        onBackdropClick={() => setAlertOpened(false)}
        title="ina-ui UI"
        content="Hello world!"
        buttons={
          <DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
        }
      />
      <Dialog
        opened={confirmOpened}
        onBackdropClick={() => setConfirmOpened(false)}
        title="ina-ui UI"
        content="All good today?"
        buttons={
          <>
            <DialogButton onClick={() => setConfirmOpened(false)}>
              No
            </DialogButton>
            <DialogButton strong onClick={() => setConfirmOpened(false)}>
              Yes
            </DialogButton>
          </>
        }
      />
      <Dialog
        opened={listOpened}
        onBackdropClick={() => setListOpened(false)}
        title="Your super hero"
        content={
          <List nested className="-mx-4">
            <ListItem
              label
              title="Batman"
              after={
                <Radio
                  component="div"
                  value="batman"
                  checked={radioValue === 'batman'}
                  onChange={() => setRadioValue('batman')}
                />
              }
            />
            <ListItem
              label
              title="Spider-man"
              after={
                <Radio
                  component="div"
                  value="spiderman"
                  checked={radioValue === 'spiderman'}
                  onChange={() => setRadioValue('spiderman')}
                />
              }
            />
            <ListItem
              label
              title="Hulk"
              after={
                <Radio
                  component="div"
                  value="hulk"
                  checked={radioValue === 'hulk'}
                  onChange={() => setRadioValue('hulk')}
                />
              }
            />
          </List>
        }
        buttons={
          <DialogButton onClick={() => setListOpened(false)}>
            Confirm
          </DialogButton>
        }
      />
    </Page>
  );
}