Skip to content

popup 弹出框 ​

弹出层容器,固定从底部弹出。用于展示弹窗、信息提示等内容

Props参数 ​

名称类型是否必传默认值描述
titleReactNode否-标题
subTitlestring否-副标题
footerReactNode否-自定义渲染footer
contentStyleCSSProperties否-样式
footerStyleCSSProperties否-底部样式
titleAlign'left' | 'center'否center标题对齐方式
closeboolean否true是否显示右上角关闭按钮
backgroundColorCSSProperties['backgroundColor']否-设置弹窗背景色
noPlaceboolean否false是否关闭 new iphone 的垫高

示例 ​

tsx
import { View } from '@tarojs/components'
import { useState } from 'react'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
import MMButton from '~/components/button'
import MMPopup from '~/components/popup'

export default () => {
  const [visible, setVisible] = useState(false)

  return (
    <MMPageContainer title="弹出层">
      <PageDemoBlock title="基础">
        <View style={{ position: 'relative' }}>
          <MMButton onClick={() => setVisible((pre) => !pre)}>点击我</MMButton>
          <MMPopup visible={visible} title="弹出层标题" subTitle="副标题内容" onClose={() => setVisible(false)}>
            弹出层容器,用于展示弹窗、信息提示等内容
          </MMPopup>
        </View>
      </PageDemoBlock>
    </MMPageContainer>
  )
}