保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应 情态的:简介概述与示例

关于React引入模式

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

 

反应模态概述: 

 

      模型位于文档的所有其他位置,并从<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>

    <Button variant=”secondary”>Close</Button>

    <Button variant=”primary”>Save changes</Button>

  </Modal.Footer>

</Modal.Dialog>

 

现场演示: 

A 情态的 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);

 

  费用处理结束=()=> setShow(false);

  费用处理显示=()=> setShow(true);

 

  return (

    <>

      <Button variant=”primary”onClick = {} handleShow>

        Launch demo 情态的

      </Button>

 

      <Modal 节目 = {show} 隐藏={handleClose}>

        <Modal.Header closeButton>

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

        </Modal.Header>

        <Modal.Body>Woohoo, you’重新以模态阅读本文!</Modal.Body>

        <Modal.Footer>

          <Button variant=”secondary”onClick = {} handleClose>

            Close

          </Button>

          <Button variant=”primary”onClick = {} handleClose>

            Save Changes

          </Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

 

静态背景

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

 

函数Example(){

  const [show setShow] = useState(false);

 

  费用处理结束=()=> setShow(false);

  费用处理显示=()=> setShow(true);

 

  return (

    <>

      <Button variant=”primary”onClick = {} handleShow>

        Launch 静态的 背景 情态的

      </Button>

 

      <Modal

        show={show}

        onHide={handleClose}

        backdrop=”static”

        keyboard={false}

      >

        <Modal.Header closeButton>

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

        </Modal.Header>

        <Modal.Body>

          如果您自己单击外部,则1不会关闭。唐’t even try to press

          escape key.

        </Modal.Body>

        <Modal.Footer>

          <Button variant=”secondary”onClick = {} handleClose>

            Close

          </Button>

          <Button variant=”primary”>Understood</Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

没有动画: 

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

 

函数Example(){

  const [show setShow] = useState(false);

 

  费用处理结束=()=> setShow(false);

  费用处理显示=()=> setShow(true);

 

  return (

    <>

      <Button variant=”primary”onClick = {} handleShow>

        Launch demo 情态的

      </Button>

 

      <Modal 节目 = {show} 隐藏={handleClose} 动画={false}>

        <Modal.Header closeButton>

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

        </Modal.Header>

        <Modal.Body>Woohoo, you’重新以模态阅读本文!</Modal.Body>

        <Modal.Footer>

          <Button variant=”secondary”onClick = {} handleClose>

            Close

          </Button>

          <Button variant=”primary”onClick = {} handleClose>

            Save Changes

          </Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

其他导入选项- 

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

 

垂直居中-

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

 

MyVerticallyCenteredModal函数(prop){

  return (

    <Modal

      {…props}

      size=”lg”

      aria-labelledby=”标题包含模态vcenter”

      centered

    >

      <Modal.Header closeButton>

        <Modal.Title id=”标题包含模态vcenter”>

          Modal heading

        </Modal.Title>

      </Modal.Header>

      <Modal.Body>

        <h4>Centered 模态</h4>

        <p>

          明天番茄辣椒会大量发酵胡萝卜。明天只是恨;

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

          和明尼阿波利斯,制造vel。

        </p>

      </Modal.Body>

      <Modal.Footer>

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

      </Modal.Footer>

    </Modal>

  );

}

 

函数App(){

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

 

  return (

    <>

      <Button variant=”primary” onClick={() => setModalShow(true)}>

        发射垂直居中的模式

      </Button>

 

      <MyVerticallyCenteredModal

        show={modalShow}

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

      />

    </>

  );

}

 

渲染(<App />);

 

使用网格 

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

 

MydModalWithGrid函数(prop){

  return (

    <Modal {…} =道具空中标签为”标题包含模态vcenter”>

      <Modal.Header closeButton>

        <Modal.Title id=”标题包含模态vcenter”>

          Using Grid in 模态

        </Modal.Title>

      </Modal.Header>

      <Modal.Body className =”show-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 (

    <>

      <Button variant=”primary” 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 情态的</Button>{‘ ‘}

      <Button onClick={() => setLgShow(true)}>Large 情态的</Button>

      <Modal

        size=”sm”

        show={smShow}

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

        aria-labelledby=”example-modal-size-title-am”

      >

        <Modal.Header closeButton>

          <Modal.Title id=”example-modal-size-title-am”>

            Small 模态

          </Modal.Title>

        </Modal.Header>

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

      </Modal>

      <Modal

        size=”lg”

        show={lgShow}

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

        aria-labelledby=”example-modal-size-title-Ig”

      >

        <Modal.Header closeButton>

          <Modal.Title id=”example-modal-size-title-Ig”>

            Large 模态

          </Modal.Title>

        </Modal.Header>

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

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

 

使用自定义CSS- 

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

 

函数Example(){

  const [show setShow] = useState(false);

 

  return (

    <>

      <Button variant=”primary” onClick={() => setShow(true)}>

        Custom Width 模态

      </Button>

 

      <Modal

        show={show}

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

        dialogClassName=”modal-90w”

        aria-labelledby=”example-modal-custom-style标题”

      >

        <Modal.Header closeButton>

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

            Custom 模态 Styling

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>

          <p>

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

            为方便起见,它拒绝使用,不让拥护精英淡出。什么时候

            我们也许可以从一个人的痛苦中获得,并且

            费力的。由于有些容易疼痛!就是那样

            他指责他们。从这些症状的结果来看,就这么积极!弹性

            Reiciendis porro quoni maginc incidunt dolore amet atque facilis ipsum

            deleniti rem!

          </p>

        </Modal.Body>

      </Modal>

    </>

  );

}

 

渲染(<Example />);

 

API模式 

 

从自举反应/模态'的模态导入 

 

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

 

 

模态对话框 

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

 

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

  

模态头

从bootstrap-react / 模态Header'导入ModalHeader

 

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

 

 

模态标题 

从bootstrap-react / 模态Title'导入ModalTitle

 

名称类型默认描述
elementType<DivStyledAsH4>您可以为此组件使用自定义元素类型。
bsPrefix需要‘modal-title’更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 大量针对CSS使用而定制的引导程序。

 

 

模态身体 

从Bootstrap反应/ 模态Body导入ModalBody。 

 

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

 

 

模态页脚 

从bootstrap-react / 模态Footer'导入ModalFooter'

 

名称类型默认描述
elementType<div>您可以为此组件使用自定义元素类型。
bsPrefix需要‘modal-footer’更改基础组件CSS基类名称和修饰符类名称前缀。 这是逃生舱口 大量针对CSS使用而定制的引导程序。

 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。