如何将动态宽度和高度应用于 react-bootstrap 模态窗口?
我检查了 react-bootstrap 文档 here但无法弄清楚如何做到这一点。
实际上,宽度和高度 Prop 的值将是动态的(可以是任何值),因为这将是我的应用程序中的可重用组件(可在许多页面上使用),因此无法通过某些 CSS 类应用宽度/高度。
文档中提到的“bsSize”属性也不起作用,尽管 xs、md、lg 的预定义大小并不是我真正想要的,而是我需要通过 Prop 在模态上设置宽度和高度。
这是我的示例 JSX 代码:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody>
<ModalFooter>
<Button onClick={this.close}>Cancel</Button>
<Button bsStyle="primary" onClick={this.save}>Save</Button>
</ModalFooter>
</Modal>
);
}
});
React.render(<MyWindow width={700} height={400} />, mountNode);
最佳答案
据其documentation ,你必须自定义你自己的css类才能通过modal的propdialogClassName
实现你想要的样式.
所以我们可能有 my.jsx
代码如下:
<Modal dialogClassName="my-modal">
</Modal>
与
my.css
下面:.my-modal {
width: 90vw /* Occupy the 90% of the screen width */
max-width: 90vw;
}
然后,您将拥有自定义的模态!
关于size - 在 react 引导模式上指定/设置宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32624634/