backdrop

import { Backdrop } from "woly";

Backdrop is a dark layer that covers full screen. It can be used in Modal windows or Aside menu panel.

Example

Modal based on Backdrop.

Change customer
<Playground>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <>
        <Button onClick={change} text="Open modal" priority="primary" />
        <Modal visible={value} title="Change customer" onClose={change} priority="primary">
          <form autoComplete="off">
            <Field label="Customer name">
              <Input
                priority="primary"
                name="name"
                onChange={(event) => console.info('On name change')}
                placeholder="Name"
                type="text"
              />
            </Field>
            <Field label="Customer email">
              <Input
                priority="primary"
                name="email"
                onChange={(event) => console.info('On email change')}
                placeholder="Email"
                type="text"
              />
            </Field>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button onClick={() => alert('Change clicked!')} text="Change" priority="primary" />
              <Button onClick={change} text="Cancel" priority="primary" outlined />
            </div>
          </form>
        </Modal>
      </>
    )}
  </State>
</Playground>

Props

NameTypeDefaultDescription
prioritystring'secondary'Priority prop to style Backdrop component