问题标签 [fomantic-ui]

我正在开发一个基于 Fomantic-UI 框架（即 Semantic-UI 的一个分支）的 Angular 项目。

我已经安装了它：

npm install --save fomantic-ui

然后我在angular.json文件中添加了以下几行：

我还为它安装了类型npm install --save @types/semantic-ui，根据这个，它们应该可以在 Fomantic-UI 上正常工作。

无论如何，这似乎不足以使用诸如modal(), dropdown(),之类的函数calendar()，事实上我在我的 IDE (Webstorm) 和编译过程中都遇到了错误：

TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

TS2339: Property 'calendar' does not exist on type 'JQuery<any>'.

TS2339: Property 'dropdown' does not exist on type 'JQuery<HTMLElement>'.

等等...

你知道在我的项目中导入 Fomantic-UI 的正确方法是什么吗？

我设法创建了一个伪 :before 元素以添加到菜单项中，该元素按我的意愿工作，但是当我向父 div（底部导航）添加背景颜色/图像时，伪元素似乎坏了，任何人都可以摆脱一些光？

注意我正在使用 fomantic UI (semantic UI fork)

所以我是网格新手。现在将它用于一些项目，但仍然不能很好地解决问题。我遇到了一个问题，我将网格元素设置为 100%，但它被剪裁为 80%。

这似乎是一个简单的修复，但我在过去的一个小时里一直在修补这个问题，似乎无法找到导致它的原因。

注意：我正在使用来自 fomantic 的滑块元素，但由于视点太小，它没有出现在代码预览中。

我有一个Slider元素（我实际上使用的是Fomantic UI fork，它也有滑块）。我<script>jQuery("mysliderid").slider();</script>在滑块 HTML 之后立即写，它可以工作！

但是，如果我在控制台中写入jQuery("mysliderid").slider();，则滑块不起作用！如果我将代码包含在单独的 .js 文件中，它也不起作用。

对我来说完全是无稽之谈。我不知道如何调试它。

上下文是我正在编写一个 Wordpress 插件

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：Fomantic-UI 提供模态功能 - 只需在 JQuery 元素上调用 .modal() 等等。但是，当模式关闭时，模式元素的 DOM 元素仍然隐藏在 DOM 中。我的用例需要删除这些元素，但我担心模态功能的“剩余”接线。

已完成研究：有关模态的 FUI文档很有用，但它是从启动模态的角度编写的，但并没有完全删除它。

复制：下面的代码片段是一种基于代码的方法，用于为按钮侦听器创建模式和连接。单击按钮打开模式，然后单击关闭按钮。两秒钟后，将显示剩余的 DOM 模态元素的简单 JQuery 计数 - 它应该为零，但将为 1。

笔记：

1 - FUI 模态有一个令人沮丧的功能，即在单击任何按钮时自动关闭模态。它有一个保存子句，即如果触发的按钮事件处理程序返回 false，则模式保持打开状态。显然，如果您正在进行表单验证等，您需要知道这一点。此外，如果您希望覆盖所有按钮的默认功能，请从 onHide 函数返回 false，例如

2 - 此片段使用 FUI 的“dist”版本。由于 FUI 经常更改，因此如果在您看到它时已经发生了重大更改，则该代码段可能会失败。在撰写本文时，jsdelivr cdn 上的官方版本是 2.8.3。（2020 年 1 月 17 日编辑）。

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：选项卡式的比喻很好理解，在某些用例中包括通过 X 图标关闭选项卡的能力——想想多文档编辑器，例如 VS Code 等。Fomantic-UI 有一个很好的选项卡组件，但没有自动方式包括一个关闭图标，以及具有许多选项的良好按钮和图标组件。它还提供了组合组件的能力——功能强大，责任重大——我发现有时一个小指针会很有用。因此，我提供这个片段来建议一些潜在的解决方案。

像这样的东西是目标...

请看下面我的回答。

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

Fomantic 有一个功能强大的日历/日期选择器，但我怎样才能让它以反色显示？

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：FUI 提供了功能强大的模态组件和有用的进度条组件。要求是如何让进度条出现在与模态标题段底部紧密连接的模态中。根据我下面的 gif。在这个用例中，用户正在服务器上搜索正在发生异步过程的东西，我需要向用户显示其他地方的一些操作指示。

使用标准进度条 CSS 意味着进度条没有连接到标题。

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：当页面上的第一个可聚焦对象是下拉列表时，在页面打开时，下拉列表将像单击一样打开。

注意：我第一次在模态情况下发生这种情况并对此感到困惑，认为这是专门针对模态的问题，但此后我在普通页面上遇到了同样的事情。我在下面的片段中使用了一个模态案例来说明，因为 SO 片段查看器不会触发您在普通页面上获得的行为。另一位用户在 FUI 的 git 上提出了这个问题，支持人员指出了我通过这个自我回答的问题在这里分享的答案。

这可能有一个简单的解决方案，但我无法弄清楚。从 Semantic-UI 到 Fomantic-UI 后发生了变化，我需要帮助。

在初始化我要显示的下拉列表时，这在更早的时候起作用：

但似乎这些设置被忽略了（在这种情况下为 maxSelections）。

如果我使用：

设置工作得很好。

工作 https://jsfiddle.net/ruznv83a/2/

不工作 https://jsfiddle.net/ruznv83a/1/

我将不胜感激任何帮助 ：）