Newton's Preposterous Miscalculation
    Have ideas to improve npm?Join in the discussion! »

    @responsive-ui/bottom-sheet
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4-alpha • Public • Published

    @responsive-ui/bottom-sheet

    A bottom action sheet component of responsive-ui.

    Svelte v3 npm Bundle Size download LICENCE

    Install

    npm install @responsive-ui/bottom-sheet

    or

    yarn add @responsive-ui/bottom-sheet

    Look and Feel

    @responsive-ui/bottom-sheet

    Properties, Events & Slots

    type BottomSheetOption = {
      label: string;
      value: string;
      icon?: string | SvelteComponentDev;
      disabled?: boolean;
      selected?: boolean;
    };
    
    interface BottomSheetItem {
      label: 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 = [
        {
          label: "Item A",
          options: [
            {
              label: "Item A - First Option",
              value: "a1",
            },
            {
              label: "Item A - Second Option",
              value: "a2",
            },
            {
              label: "Item A - Third Option",
              value: "a3",
            },
            {
              label: "Item A - Fourth Option",
              value: "a4",
            },
            {
              label: "Item A - Fifth Option",
              value: "a5",
            },
          ],
        },
        {
          label: "Item B",
          options: [
            {
              label: "Item B - First Option",
              value: "b1",
            },
            {
              label: "Item B - Second Option",
              value: "b2",
            },
            {
              label: "Item B - Third Option",
              value: "b3",
            },
          ],
        },
        {
          label: "Item C",
          options: [
            {
              label: "Item C - First Option",
              value: "c1",
            },
            {
              label: "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

    WeTix

    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

    GitHub NPM

    Install

    npm i @responsive-ui/bottom-sheet

    DownloadsWeekly Downloads

    100

    Version

    1.0.4-alpha

    License

    MIT

    Unpacked Size

    283 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar