个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在尝试将 Semantic-UI 的固定菜单和侧边栏与 React 框架一起使用。我希望获得与 Semantic-UI 的文档页面(在平板电脑和移动设备显示中)相同的结果，顶部有一个固定菜单，左侧边栏在切换时会覆盖。
我在这里整理了一个例子: https://jsfiddle.net/bullwinkle/m3hr5v36/
它可以工作，但 Semantic-UI 不喜欢这种布局，并在控制台中提供以下错误:
Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class="ui inverted left vertical sidebar menu" data-reactid=".0.0">…</div>
因此，Semantic-UI 会移动布局，以便 .sidebar和.pusher是 <body> 的直系子代。这不完全是 React 的方式。
正如这里所解释的:
Semantic UI sidebar throws console errors with ReactJS when render app to body
您需要为侧边栏定义自定义上下文。好的，我已经在侧边栏初始化中完成了这一点:
componentDidMount() {
$('.ui.sidebar').sidebar({
transition: 'overlay',
context: $('#layout')
});
},
(请参阅 jsfiddle 的第四版，由于低代表，我无法发布更多链接)
这修复了错误消息，但现在顶部菜单不再固定，侧边栏随内容一起滚动。我已经尽了一切努力让 Semantic-UI 和 React 能够很好地配合，但我显然错过了一些东西
最佳答案
我在 Ember 上遇到了同样的问题，它生成了以下 DIVS:
<div data-label="layer-div" style="display: none;"></div>
<div data-label="preview-div" style="pointer-events: none; display: none;"></div>
...在内容之前，这会给侧边栏带来问题，因为内容需要包装在 PUSHER 类中，以便侧边栏在打开时可以将其推送过来。
所以，React 在你的 Pusher 类之外添加了一些额外的内容，这就是它所提示的。
{{!-- Pusher means that the sidebar will push it out of the way --}}
<div class="ui grid pusher">
如果您的 Pusher 类之前有任何内容(侧边栏 div 除外)，您将收到错误消息。看一下你的源代码，你会看到 Semantic-ui 创建了第二个 Pusher 类来包装 React 生成的内容。
关于reactjs - 在 React 中使用 Semantic-UI 固定菜单和侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33071366/
29
4
0
theming上有详细说明在传统的语义 UI 上，但语义 UI React 站点中缺少等效的部分。这是否意味着它不支持主题化，或者您可以使用传统语义 UI 的主题化方法吗？ 我知道 React 世界中
我正在阅读一篇非常愚蠢的论文，它一直在谈论乔托如何定义“形式语义”。 Giotto has a formal semantics that specifies the meaning of mode
我是语义 UI 新手，我喜欢这个框架。他们有大量有用的文档，但更令人困惑的是。 响应式可见性如何工作？ 容器有仅移动平板电脑仅小型显示器仅大型显示器...以及一些代码，我发现有仅计算机，仅设备 ?有什
我正在尝试查询通过模板变量指定的页面列表，但我无法很好地了解 Semantic Mediawiki，甚至无法确定这是否可行，更不用说一个好主意了。 我有一组具有语义属性的页面。然后我有一个模板，它有一
是否可以在 SMW 页面的两个属性(均具有允许值的列表)之间定义一对多关系？ 如果是，怎么办？ 最佳答案 属性包含单个值；这不是限制本身，它是一个 RDF triple essentially wit
我有一个类似于以下的文档类型: abc true abc 以下文档在语义上与前面的文档相同: true abc
是否可以创建类似于 Masonry 的级联网格布局？或 Bootstrap v4 card columns使用语义用户界面？ 最佳答案 根据 this issue ，好像不直接支持，但是可以通过col
如何将 Semantic-UI 添加到 Phoenix？ Semantic-UI 安装在一个文件夹中并使用 NPM 进行更新，实际的 CSS 和 Javascript 文件是使用 GULP 构建的。完
是否可以在没有触发器的情况下使用模态？我将通过状态打开和关闭它。 例如，我想在输入字段(带有文件名)上使用 onClick 以使用文件选择器打开模态，然后在输入字段中编辑所选文件的名称。所有这些都在一
这句话可以在 C11 的最终草案 N1570(5.1.2.3-8) 中找到: More stringent correspondences between abstract and actual se
我正在查看与安全相关的高级 Ruby on Rails 教程，它谈到 422 HTTP 响应是“客户端提交的请求格式正确但语义无效”。我还看到后一部分呈现为“语义错误”或“语义错误”。 在给出的示例中
什么是“值语义”，什么是“隐式指针语义”？ 最佳答案 Java 对对象类型使用隐式指针语义，对基元使用值语义。 值语义意味着您直接处理值并传递拷贝。这里的重点是，当您拥有值(value)时，您可以相信
我正在按照官方文档中的示例创建一个简单的弹出窗口:https://react.semantic-ui.com/modules/popup 所以这是我当前的代码，效果很好: export default
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 4 年前。
我正在尝试使用试剂/重新框架和语义用户界面在 Clojurescript 中实现搜索。 Semantic-ui 使用渲染器来提供建议。此渲染器默认为图像、价格、标题、描述。因为我想对地理编码提出建议，
我正在尝试在使用 Semantic-UI-React 时自定义主题，有关于如何在 Semantic-UI 中自定义主题的详细说明，例如我们可以覆盖变量以更改其样式。 但是我没有找到用Semantic-
语义 UI react Checkbox可以这样使用: import React from 'react' import { Checkbox } from 'semantic-ui-react' c
我想使用语义-ui 创建自定义主题，但他们还没有对 Aurelia 的官方支持，并且在 npm install语义-ui --save 后弹出很多不需要的错误 。我想要一个明确的答案和 aurelia
我正在尝试使用本教程使用 npm 和 gulp 安装 semantic-ui:http://www.semantic-ui.com/introduction/getting-started.html
Go 中的Value semantics 和Pointer semantics 是什么意思？在 this course ，作者在解释数组和 slice 的内部结构时多次提到上述术语，我无法完全理解。
我是一名优秀的程序员,十分优秀！