我有一个应用程序,我需要动态设置元素的高度(让我们说"app-content").它需要应用程序的"chrome"的高度并减去它,然后将"app-content"的高度设置为在这些约束内适合100%.这对于vanilla JS,jQuery或Backbone视图来说非常简单,但是我很难弄清楚在React中执行此操作的正确流程是什么?
下面是一个示例组件.我希望能够设置app-content的高度是窗口减去的尺寸为100%ActionBar和BalanceBar,但我怎么知道当一切都变得和我在哪里会把计算的东西,在这个阵营类?
/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
render: function () {
return (
<div className="wrapper">
<Sidebar />
<div className="inner-wrapper">
<ActionBar title="Title Here" />
<BalanceBar balance={balance} />
<div className="app-content">
<List items={items} />
</div>
</div>
</div>
);
}
});
module.exports = AppBase;
Run Code Online (Sandbox Code Playgroud) 我已经通过jspm install foundation安装了基础,然后导入了基础和jquery.
我遇到的问题是,如果我通过import $ as 'jquery'我导入jquery 得到错误jquery_1.default不是一个函数.如果我通过import * as $ from jquery它导入jquery 按预期工作
我打电话 $(document).foundation();来初始化基础javascript组件.以下是我的主要内容
import 'foundation'
import $ from 'jquery';
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot())
.then(a => {
// Initialize framework
$(document).foundation();
});
}
Run Code Online (Sandbox Code Playgroud)
其余代码只是默认导航到包含带有下拉列表的基础导航栏的简单页面
注意:即使将jquery列为dep,我也必须显式安装jquery.
我做了基础6的原始覆盖,显然做错了但它似乎在当时工作.但是,我已经发现当安装bootstrap时它将jquery放在github:components中,这似乎使得jquery不必显式安装.所以当时一切似乎都很好.
要重现只使用aurelia骨架并添加一个带有基础控件的页面,添加上面的$(document).foundation()
我喜欢让我的弹出框保持打开状态,直到用户明确关闭它们。
新的 Bootstrap Popovers 的一项不错的功能是,当用户更改设备方向、滚动或调整窗口大小时,它们会自动重新定位。它们甚至会随着内容的重新流动而跟随——例如,当你调整窗口大小时,当一个段落被包裹并且元素的长度增长或缩小时——屏幕上的所有弹出窗口将继续重新定位以接近它们的目标。
Popover 插件如何知道页面正在重新流动,从而触发 popover 重新定位?
我的 web 应用程序是动态的,用户操作会导致元素增长/收缩、打开/关闭等。目前,当我通过代码更改页面时,弹出窗口被抛在后面 - 它们不会重新定位在目标附近.
作为用户,解决此问题的一种方法是稍微滚动屏幕,Bootstrap 将重新定位弹出窗口,一切看起来又正确了。
当我通过代码更改页面布局时,我试图找出一种重新定位弹出窗口的方法。
因此,问题是:Popover 重新定位是如何工作的(我可以钩住它以便我可以自动触发它)。
编辑:我刚刚注意到,如果“动态”内容恰好是 Bootstrapnavbar由于点击navbar-toggler.
javascript ×2
bootstrap-4 ×1
css ×1
html ×1
jquery ×1
jspm ×1
reactjs ×1
systemjs ×1
typescript ×1