deep-ui-kit v2.4.7

Install

npm install deep-ui-kit
# or
yarn add deep-ui-kit

Modal : BottomSheet Usage

IOS model type sheet type bottom-chet, and then touch the outside click external click

Example

function App() {
  const [isSheet, setIsSheet] = useState < boolean > false;

  return (
    <Section>
      <button type="button" onClick={() => setIsSheet(!isOpen)}>
        Open Sheet
      </button>

      <BottomSheet
        view={isSheet}
        onCancel={() => setIsSheet(false)}
        theme="light"
      >
        ..
      </BottomSheet>
    </Section>
  );
}

Params

Modal : Dialog Usage

Example

function App() {
  const [isSheet, setIsSheet] = useState < boolean > false;

  return (
    <Section>
      <button type="button" onClick={() => setIsDialog(!isDialog)}>
        Open Dialog
      </button>

      <Dialog
        view={isDialog}
        onCancel={() => setIsDialog(false)}
        theme="dark"
        cancelTab={true}
      >
        ..
      </Dialog>
    </Section>
  );
}

Params

Modal : Drawer Usage

Drawer menu function that is exposed when you click toggle on the menu

Example

function App() {
  const [isDrawer, setIsDrawer] = useState < boolean > false;

  return (
    <Section>
      <button type="button" onClick={() => setIsDrawer(!isOpen)}>
        Open Drawer
      </button>

      <Drawer view={isDrawer} onCancel={() => setIsDrawer(false)} theme="light">
    </Section>
  );
}

Params

Modal : Snackbar Usage

Widgets used for alert types

Example

function App() {
  const [isDrawer, setIsDrawer] = useState < boolean > false;

  return (
    <Section>
      <button type="button" onClick={() => setIsOpen(!isOpen)}>
        Open Snackbar
      </button>

      <Snackbar
        view={isOpen}
        onCancel={() => setIsOpen(false)}
        theme="light"
        cancelTab={true}
      >
        ...
      </Snackbar>
    </Section>
  );
}

Params

Layout Usage

A widget layout is available for each layout type.

• Section : section Teg in html
• Row : Horizontal alignment layout
• Column : Vertical alignment layout
• Box : It's a flexible box
• SizedBox : Allows you to adjust the layout space

Example

function App() {
  return (
    <Section>
      <Row start gap="20px" padding="30px" margin="50px">
        <Box>box</Box>
        <Box maxWidth="200px">box</Box>
        <Box>box</Box>
      </Row>

      <SizedBox width="200px" height="200px" />

      <Column center gap="10px" padding="30px" margin="50px">
        <Box>box</Box>
        <Box>box</Box>
        <Box>box</Box>
      </Column>
    </Section>
  );
}

Params

Basic Value width : 100% / height : 100%

Typography Usage

Example

function App() {
  return (
    <Section>
      <Title as='h1' fontSize='60px' color='#111' w='500'>Title</Title>
      <Text fontSize='16px' color='#797979' w='500'>text</Text>
      <TextSpan fontSize='13px' color='#999' w='400'>
    </Section>
  );
}

Params

LoadingSpinner Usage

Used when loading when calling API or adding data You can adjust the size through size.

Example

function App() {
  return (
    <>
      <LoadingSpinner size="40px" /> // default : 30px
    </>
  );
}

ScrollToTab

The 'ScrollToTab' button is activated when scrolling down more than 60. When clicked, the DOM moves to the top

Example

function App() {
  return (
    <>
      <ScrollTopTab />
    </>
  );
}