QuikieApps

反应模态:简介,示例概述

关于React 模态s的简介:

反应模态帮助您将对话框添加到您的站点,以获取灯箱,用户通知或完全自定义的内容。 

 

反应模态概述: 

 

      模型位于文档的所有其他位置,并从<body>因此模式内容会滚动。

      关闭时将它们卸下。 

      Bootstrap一次仅支持一个模式窗口。不支持嵌套模态,但是如果您确实需要它们,则底层的响应叠加层可以根据需要支持它们。 

      模态的陷阱重点在于它们,以确保键盘导航在整个模式中而不是在页面的其余部分中循环。 

      与香草Bootstrap不同,自动对焦可在Modals中使用,因为react可处理实现。 

 例子

 静态标记

下面给出的是一个静态模态对话框(无定位),以演示模态的外观。 

 

<Modal.Dialog>

  <Modal.Header closeButton>

    <Modal.Title>Modal title</Modal.Title>

  </Modal.Header>

 

  <Modal.Body>

    <p>Modal 身体 text goes here.</p>

  </Modal.Body>

 

  <Modal.Footer>

    <按钮变体=“次要”>Close</Button>

    <按钮变体=“主要”>Save changes</Button>

  </Modal.Footer>

</Modal.Dialog>

 

现场演示: 

A modal with header, 身体, and set of actions in the footer. 

采用<Modal/>结合其他组件来显示或隐藏您的模态。 

的<Modal/>组件带有一些方便的“子组件”: 

<Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>,您可以用来构建Modal。 

 

函数Example(){

  const [show,setShow] = useState(false);

 

  const handleClose =()=> setShow(false);

  const handleShow =()=> setShow(true);

 

  return (

    <>

      <按钮变体=“主要” onClick={handleShow}>

        Launch demo modal

      </Button>

 

      <模式显示= {show} 隐藏 = {handleClose}>

        <Modal.Header closeButton>

          <Modal.Title>Modal heading</Modal.Title>

        </Modal.Header>

        <Modal.Body>oo,您正在以模态阅读此文本!</Modal.Body>

        <Modal.Footer>

          <按钮变体=“次要” onClick = {handleClose}>

            Close

          </Button>

          <按钮变体=“主要” onClick = {handleClose}>

            Save Changes

          </Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

 

静态背景

当背景设置为静态时,在外部单击该模式不会关闭。单击下面的按钮进行尝试。 

 

函数Example(){

  const [show,setShow] = useState(false);

 

  const handleClose =()=> setShow(false);

  const handleShow =()=> setShow(true);

 

  return (

    <>

      <按钮变体=“主要” onClick={handleShow}>

        启动静态背景模态

      </Button>

 

      <Modal

        show={show}

        onHide={handleClose}

        backdrop=”static”

        keyboard={false}

      >

        <Modal.Header closeButton>

          <Modal.Title>Modal title</Modal.Title>

        </Modal.Header>

        <Modal.Body>

          如果您在我外面单击,我不会关闭。甚至不要试图按

          escape key.

        </Modal.Body>

        <Modal.Footer>

          <按钮变体=“次要” onClick = {handleClose}>

            Close

          </Button>

          <按钮变体=“主要”>Understood</Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

没有动画: 

模态也可以没有动画。为此,将“动画”道具设置为false。 

 

函数Example(){

  const [show,setShow] = useState(false);

 

  const handleClose =()=> setShow(false);

  const handleShow =()=> setShow(true);

 

  return (

    <>

      <按钮变体=“主要” onClick={handleShow}>

        Launch demo modal

      </Button>

 

      <模态show = {show} 隐藏 = {handleClose}动画= {false}>

        <Modal.Header closeButton>

          <Modal.Title>Modal heading</Modal.Title>

        </Modal.Header>

        <Modal.Body>oo,您正在以模态阅读此文本!</Modal.Body>

        <Modal.Footer>

          <按钮变体=“次要” onClick = {handleClose}>

            Close

          </Button>

          <按钮变体=“主要” onClick = {handleClose}>

            Save Changes

          </Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

其他导入选项- 

模态标题。标题,正文和页脚组件可作为静态属性使用<Modal/>组件,但您也可以直接将其导入,例如:require(“ react-bootstrap / 模态Header”)。

 

垂直居中-

您可以绕过“居中”道具垂直放置模态居中。

 

函数MyVerticallyCenteredModal(props){

  return (

    <Modal

      {…props}

      size=”lg”

      aria-labelledby =“ contained-modal-title-vcenter”

      centered

    >

      <Modal.Header closeButton>

        <Modal.Title id =“ contained-modal-title-vcenter”>

          Modal heading

        </Modal.Title>

      </Modal.Header>

      <Modal.Body>

        <h4>Centered 模态</h4>

        <p>

          Cras mattis consectetur purus坐在发酵罐中。 Cras justo odio,

          dapibus ac facilisis in,egestas eget quam。莫比(Morbi Leo Risus)

          consectetur ac,前庭在性爱。

        </p>

      </Modal.Body>

      <Modal.Footer>

        <按钮onClick = {props.onHide}>Close</Button>

      </Modal.Footer>

    </Modal>

  );

}

 

函数App(){

  const [modalShow,setModalShow] = 反应.useState(false);

 

  return (

    <>

      <按钮变体=“主要” onClick = {()=> setModalShow(true)}>

        发射垂直居中的模式

      </Button>

 

      <MyVerticallyCenteredModal

        show={modalShow}

        onHide={() =>setModalShow(false)}

      />

    </>

  );

}

 

渲染(<App />);

 

使用网格 

您可以使用模态内容内的常规网格组件在模型内使用网格布局。 

 

函数MydModalWithGrid(props){

  return (

    <模态{…props} 咏叹调标记 =“ contained-modal-title-vcenter”>

      <Modal.Header closeButton>

        <Modal.Title id =“ contained-modal-title-vcenter”>

          Using Grid in 模态

        </Modal.Title>

      </Modal.Header>

      <Modal.Body className =” 节目-grid”>

        <Container>

          <Row>

            <Col xs={12} md={8}>

              .col-xs-12 .col-md-8

            </Col>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

          </Row>

 

          <Row>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

          </Row>

        </Container>

      </Modal.Body>

      <Modal.Footer>

        <按钮onClick = {props.onHide}>Close</Button>

      </Modal.Footer>

    </Modal>

  );

}

 

函数App(){

  const [modalShow,setModalShow] = useState(false);

 

  return (

    <>

      <按钮变体=“主要” onClick = {()=> setModalShow(true)}>

        使用网格启动模式

      </Button>

 

      <MydModalWithGrid 节目 = {modalShow} 隐藏 = {()=>setModalShow(false)} />

    </>

  );

}

 

渲染(<App />);

 

可选尺寸 

您可以使用“ 尺寸”属性指定引导程序的大模式或小模式。 

 

函数Example(){

  const [smShow,setSmShow] = useState(false);

  const [lgShow,setLgShow] = useState(false);

 

  return (

    <>

      <Button onClick={() => setSmShow(true)}>Small modal</Button>{‘ ‘}

      <Button onClick={() => setLgShow(true)}>Large modal</Button>

      <Modal

        size=”sm”

        show={smShow}

        onHide={() => setSmShow(false)}

        aria-labelledby =” example-modal-sizes-title-sm”

      >

        <Modal.Header closeButton>

          <Modal.Title id =” example-modal-sizes-title-sm”>

            Small 模态

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>…</Modal.Body>

      </Modal>

      <Modal

        size=”lg”

        show={lgShow}

        onHide={() => setLgShow(false)}

        aria-labelledby =” example-modal-sizes-title-lg”

      >

        <Modal.Header closeButton>

          <Modal.Title id =” example-modal-sizes-title-lg”>

            Large 模态

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>…</Modal.Body>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

 

使用自定义CSS- 

您可以使用“ dialogClassName”道具将自定义css应用于模式对话框div。示例是使用宽度设置为90%的自定义css类。 

 

函数Example(){

  const [show,setShow] = useState(false);

 

  return (

    <>

      <按钮变体=“主要” onClick = {()=> setShow(true)}>

        Custom Width 模态

      </Button>

 

      <Modal

        show={show}

        onHide={() => setShow(false)}

        dialogClassName =“ modal-90w”

        aria-labelledby =“示例自定义模式样式标题”

      >

        <Modal.Header closeButton>

          <Modal.Title id =” example-custom-modal-style-title”>

            Custom 模态 Styling

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>

          <p>

            鼻息肉natis adipisci modi eligendi?地方性抗炎

            commodi 如 pernatur enim,安全。 Cumque deleniti temporibus

            ipsam atque a dolores quisquam quisquam adipisci possimus

            实验室。 Quibusdam facilis doloribus皮炎!准准坐

            Accusamus Eos Qud。结果必不可少!莫洛蒂亚

            Reiciendis porro quoni maginc incidunt dolore amet atque facilis ipsum

            deleniti rem!

          </p>

        </Modal.Body>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

API模式 

 

从“ react-bootstrap / 模态”导入模态 

 

名称 类型 默认 描述
动画 布尔值 真正 使用幻灯片和淡入淡出动画来打开和关闭模态。
咏叹调标记 任何
自动对焦 布尔值 真正 什么时候 真正 模态在打开时会自动将焦点移到其自身,并在关闭时将其替换为最后一个聚焦的元素。通常,永远不要将其设置为false,因为它会使Modal不太容易被辅助技术(如屏幕阅读器)访问。
背景 '静态的' | 真正 | 真正 包括背景组件。为点击后不会触发“ 隐藏”的背景幕指定“静态”。
BackgroundClassName 在.modal-backdrop中添加一个可选的额外的类名,最终可能看起来像class =” modal-backdrop foo-modal-backdrop in”。
居中 布尔值 将对话框在窗口中垂直居中
容器 任何
dialogAs elementType <ModalDialog> 提供模态内容标记的Component类型。当您要使用自己的样式和标记来创建自定义模态组件时,这是一个有用的道具。
dialogClassName 适用于“模态”对话框DOM节点的css类。
执行重点 布尔值 真正 什么时候 真正 模态将阻止焦点在打开时离开模态。考虑在此处保留默认值,因为有必要使Modal与辅助技术(例如屏幕阅读器)一起正常工作。
键盘 布尔值 真正 关 the modal when escape key is pressed
经理 目的 一个ModalManager实例,用于跟踪和管理打开的Modals的状态。自定义模态如何在容器内交互时很有用
onEnter 功能 在模式转换之前触发了回调
onEntered 功能 模态转换完成后触发回调
进入 功能 在模式开始转换时触发了回调
onEscapeKeyDown 功能 当转义键(如果在中指定)时触发的回调 键盘,按。
退出 功能 在模式过渡之前立即触发回调
退出ed 功能 模态转换完成后触发回调
退出中 功能 模态开始过渡时触发了回调
隐藏 功能 单击标题closeButton或非静态背景时触发的回调。如果指定两者之一,则为必需。
展出 功能 模态打开时触发的回调。
restoreFocus 布尔值 真正 什么时候 真正 一旦模态被隐藏,模态将把焦点恢复到先前聚焦的元素
restoreFocusOptions 形状 选项传递给焦点功能时 restoreFocus 被设置为 真正
可滚动 布尔值 允许滚动 <Modal.Body> 而不是整个模态溢出。
节目 布尔值 什么时候 真正 的modal will 节目 itself.
尺寸 ‘sm’ | ‘lg’,‘xl’ 渲染大型,超大型或小型模态。
bsPrefix “模态” 更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 用于高度定制的引导CSS。

 

 

模态对话框 

从“ react-bootstrap / 模态对话框”导入ModalDialog

 

名称 类型 默认 描述
居中 布尔值 指定组件是否应垂直居中
可滚动 布尔值 允许滚动 <Modal.Body> 而不是整个模态溢出。
尺寸 ‘sm’ | ‘lg’,‘xl’ 渲染大型,超大型或小型模态。
bsPrefix “模态” 更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 用于高度定制的引导CSS。

  

模态头

从“ react-bootstrap / 模态Header”导入ModalHeader

 

名称 类型 默认 描述
closeButton 布尔值 指定组件是否应包含关闭按钮
closeLabel '关' 为关闭按钮提供可访问的标签。标签文本不可读时,用于辅助技术。
隐藏 功能 单击关闭按钮时会触发回调。如果直接在Modal组件内部使用,则onHide将自动传播到父Modal 隐藏.
bsPrefix 更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 用于高度定制的引导CSS。

 

 

模态标题 

从“ react-bootstrap / 模态Title”导入ModalTitle

 

名称 类型 默认 描述
elementType <DivStyledAsH4> 您可以为此组件使用自定义元素类型。
bsPrefix需要 “模态标题” 更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 用于高度定制的引导CSS。

 

 

模态身体 

从“ react-bootstrap / 模态Body”导入ModalBody。 

 

名称 类型 默认 描述
elementType <div> 您可以为此组件使用自定义元素类型。
bsPrefix需要 “模态车身” 更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 使用高度自定义的引导CSS。

 

 

模态页脚 

从“ react-bootstrap / 模态Footer”导入ModalFooter

 

名称 类型 默认 描述
elementType <div> 您可以为此组件使用自定义元素类型。
bsPrefix需要 “模态页脚” 更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 用于高度定制的引导CSS。

 

 

Exit mobile version