@responsive-ui/bottom-sheet

@responsive-ui/bottom-sheet

A bottom action sheet component of responsive-ui.

Install

npm install @responsive-ui/bottom-sheet

or

yarn add @responsive-ui/bottom-sheet

Look and Feel

Properties, Events & Slots

type BottomSheetOption = {
  title: string;
  value: string;
  icon?: string | SvelteComponentDev;
  disabled?: boolean;
  selected?: boolean;
};

interface BottomSheetItem {
  title: string;
  options: BottomSheetOption[];
  selected?: Map<string, boolean>;
  style?: string;
}

interface BottomSheetProps {
  items: BottomSheetItem[];
  open?: boolean;
  selected?: number;
  disabled?: boolean;
  closable?: boolean;
}

interface BottomSheetEvents {
  change?: void;
  reset?: void;
  filter?: void;
}

declare class BottomSheet extends SvelteComponentTyped<
  BottomSheetProps,
  BottomSheetEvents
> {}

Example

<script>
  import BottomSheet from '@responsive-ui/bottom-sheet';

  const tabItems = [
    {
      title: "Item A",
      options: [
        {
          title: "Item A - First Option",
          value: "a1",
        },
        {
          title: "Item A - Second Option",
          value: "a2",
        },
        {
          title: "Item A - Third Option",
          value: "a3",
        },
        {
          title: "Item A - Fourth Option",
          value: "a4",
        },
        {
          title: "Item A - Fifth Option",
          value: "a5",
        },
      ],
    },
    {
      title: "Item B",
      options: [
        {
          title: "Item B - First Option",
          value: "b1",
        },
        {
          title: "Item B - Second Option",
          value: "b2",
        },
        {
          title: "Item B - Third Option",
          value: "b3",
        },
      ],
    },
    {
      title: "Item C",
      options: [
        {
          title: "Item C - First Option",
          value: "c1",
        },
        {
          title: "Item C - Ten Option",
          value: "c10",
        },
      ],
    },
  ];

  const onConfirm = ({ detail }) => {
    console.log(detail);
  };
</script>

<BottomSheet
  items={tabItems}
  open={true}
  on:filter={onConfirm} />

Try it yourself in Svelte Repl

Sponsors

License

@responsive-ui/bottom-sheet is 100% free and open-source, under the MIT license.

Big Thanks To

Thanks to these awesome companies for their support of Open Source developers ❤