MMDrawer 抽屉

Props

MMDrawerProps

属性	类型	默认值	必传	说明
title	string		否	标题
width	number | string		否	宽度
footer	boolean	true	否	是否渲染底部
cancelText	string		否	取消文本
okText	string		否	确定文本

代码示例

import { View } from "@tarojs/components";
import { useState } from "react";
import styles from "./index.module.less";
import MMNavigation from "../../components/navigation";
import MMButton from "../../components/button";
import MMDrawer from "../../components/drawer/index";
import { MMDrawerProps } from "../../components/drawer/const";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";
import MMRadio from "../../components/radio";

export default function Index() {
  const [visible, setVisible] = useState(false);

  const [drawerProps, setDrawerProps] = useState<Partial<MMDrawerProps>>({
    title: "抽屉",
    width: "80%",
    footer: true,
  });

  return (
    <View className={styles.page}>
      <MMNavigation title="抽屉 Drawer" />

      <View className="container">
        <MMButton text="打开抽屉" onClick={() => setVisible(true)} />
      </View>

      <PageDemoBlock title="抽屉宽度">
        <MMRadio.Group
          direction="horizontal"
          value={drawerProps.width}
          onChange={(width) => setDrawerProps((pre) => ({ ...pre, width }))}
        >
          <MMRadio value="50%">50%</MMRadio>
          <MMRadio value="80%">80%</MMRadio>
          <MMRadio value="100%">100%</MMRadio>
        </MMRadio.Group>
      </PageDemoBlock>

      <PageDemoBlock title="显示title">
        <MMRadio.Group
          direction="horizontal"
          value={!drawerProps.title ? 0 : 1}
          onChange={(show) =>
            setDrawerProps((pre) => ({
              ...pre,
              title: show ? "抽屉标题" : undefined,
            }))
          }
        >
          <MMRadio value={0}>不显示title</MMRadio>
          <MMRadio value={1}>显示title</MMRadio>
        </MMRadio.Group>
      </PageDemoBlock>

      <PageDemoBlock title="显示底部">
        <MMRadio.Group
          direction="horizontal"
          value={!drawerProps.footer ? 0 : 1}
          onChange={(show) =>
            setDrawerProps((pre) => ({ ...pre, footer: !!show }))
          }
        >
          <MMRadio value={0}>不显示</MMRadio>
          <MMRadio value={1}>显示</MMRadio>
        </MMRadio.Group>
      </PageDemoBlock>

      <MMDrawer
        {...drawerProps}
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        11111
      </MMDrawer>
    </View>
  );
}