问题标签 [fomantic-ui]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
136 浏览

arrays - 如何使用 Aurelia 观察数组中的数组?

我有一个people对象数组,其中每个对象(代表一个人)包含一个roles数组:

我希望视图遍历并显示它们(例如repeat.for="role of roles")。people但是,当数组更新时,视图不会更新。Angular-option 对我不起作用的示例代码:

当我初始化people数组以role '1'从一开始就包含第三人称时,一切正常,但是当我动态添加相同的第三人称时(例如通过按钮),它不会更新。

我知道如何用via观察people数组collectionObservers

但我对整个this.people数组不感兴趣,而是对里面的嵌套数组roles数组感兴趣。如何解决使用 obersers 观察数组内的数组的问题? this.people

0 投票
1 回答
84 浏览

ruby-on-rails - 在我的 Rails 应用程序中,Less::Error `unmatched '/*'`/ Sass::SyntaxError 的原因

我刚刚在我的 Rails 应用程序中从 Semantic UI 切换到社区维护的 Fomantic UI,并在使用npm 包sass rails gem时遇到两个模糊错误之一。

  1. 使用 npm 包,我可以Less::Error unmatched '/*'随时stylesheet_link_tags在文档头中加载 fomantic 资产。通过以下两个文件将 fomantic 样式和 js 拉入我的项目中:

    应用程序.css.scss

    *= require 'semantic-ui/src/semantic

    应用程序.js

    //= require semantic-ui/dist/semantic

    我注意到当我从semantic-ui/dist. 但是,这样做排除了很多。图标停止工作。存储的相关文件semantic-ui/srcsemantic.less。存储在其中的相关文件semantic-ui/distsemantic.min.css(我不需要,除了刚才切换东西来解决这个问题时)和semantic.min.js(我确实需要)。

    同样,如果我需要在 中缩小样式表,它“工作”,如果我需要在 .less 文件中semantic-ui/dist不会“工作” 。这是semantic.less还是其他生成的导入文件之一的问题?semantic-ui/src

  2. 使用 sass rails gem,我得到一个 Sass::SyntaxError Invalid CSS after "i.icon.stopwatch.": expected class name, was "20:before"

    查看源代码,我看到了许多这样的声明:i.icon.stopwatch.20:before {content: "\f96f";}.

    为什么会抛出错误?

这是否意味着 npm 包和 gem 有无效的 css 或者我的应用程序编译不正确?我对使用 npm 包或 gem 没有意见,我只想让它工作。当我使用旧的语义 UI 时,一切正常。我非常困惑,非常感谢您的帮助。谢谢!

0 投票
0 回答
217 浏览

css - 带有 fomantic-ui 和 fontawesome-free 的 sapper/svelte

我正在使用 Sapper ( https://sapper.svelte.dev/ ) / Svelte ( https://svelte.dev/ ) 开始一个项目,我的客户希望使用 Fomantic-UI 作为 CSS 框架 ( https:// fomantic-ui.com/introduction/getting-started.html)。

我没有在网上找到如何做到这一点的例子。有人会帮我这样做吗?包括对带有 fomantic-ui 的无字体图标的正确配置?

关于 Fomantic-UI,我做了:

在那之后,我改变了rollup.config.js包括这一行:

我写了一个文件svelte.config.js

src/style用一个文件创建了一个目录global.css

src/routes/_layout.svelte,我打电话给global.scss

我将文件夹复制./node_modules/fomantic-ui-sass/src/themes/default/assets./static/default/assets

并且图标现在正确显示。

这是最好的解决方案吗?

0 投票
0 回答
20 浏览

javascript - 是否可以在 Fomantic UI 多选下拉列表中为所选项目框着色。如果有怎么办?

正如我的标题所述,我想为显示所选项目的小框/按钮着色。

我尝试将显示的文本包装在设置背景的元素中。但它并没有以我想要的方式改变颜色(它看起来有点像颜色被它后面的灰色模糊并且没有填满盒子)。我也无法通过 Fomantics 文档确定方法。

这是我希望完成的一个示例(照片编辑不佳)。左边是我拥有的,右边是我想要的。 在此处输入图像描述

我假设我需要在我的下拉声明中添加一些内容?

我目前的声明:

的HTML

0 投票
1 回答
54 浏览

forms - 使用 Google reCAPTCHA v3 进行语义 UI / Fomantic UI 表单验证

我正在尝试找到一种使用 Google reCAPTCHA v3 验证语义 UI / Fomantic UI 表单的方法。我在 Stack 上找到了使用 Google reCAPTCHA v2 进行验证的选项。但是,V3 验证的新形式不同,它使用了另一种形式的用户界面。

0 投票
1 回答
41 浏览

semantic-ui - 语义 UI:无法通过可搜索的下拉菜单“选项卡”

我连续有多个下拉菜单,我想允许用户使用制表键从一个字段移动到另一个字段。

下拉菜单与文本匹配,允许全文搜索并且可以清除。

选项卡确实有效,但不幸的是,当通过下拉列表进行选项卡时,第一个值会自动选择:

在此处输入图像描述

我已经尝试了 Semantic UI 和 Fomantic UI 的多种设置组合,但我找不到任何允许搜索下拉菜单的设置。

通过查看不同的选项,action我可以得到一个非常有希望的选项,但是当只有一个选项(左)时,无法做出选择。

有没有人知道允许用户在不选择第一个选项的情况下通过下拉列表进行选项卡的配置?使用 Semantic-UI 还是 Fomantic-UI?

0 投票
0 回答
59 浏览

semantic-ui - 在 Fomantic UI 日历中显示接下来的 30 天

我试图在 Fomantic Calendar Widget 中显示接下来的 30 天。此外,我只使用 Fomantic 的日历小部件,而其他使用语义 ui。不幸的是,它只显示当前月份。

到目前为止,这就是我实现它的方式:

JS是:

这将导致以下结果,而不是显示接下来的 30 天: 在此处输入图像描述

0 投票
1 回答
203 浏览

vue.js - 将 fomantic-ui-css 与 VueJs 的 webpack 捆绑在一起

我正在尝试使用 Vue-Cli 创建一个 VueJs 项目,并希望将 fomantic-ui-css 与它一起使用。我使用 npm 安装了 fomantic-ui,然后将其导入main.js,但是当我运行应用程序时,我ReferenceError: jQuery is not definedwebpack.

下面是我的配置的样子

main.js

webpack.config.js

包.json

我在这里想念什么?

0 投票
0 回答
23 浏览

ruby-on-rails - Ruby on Rails - Fomantic UI Navbar 下拉菜单不起作用

我正在运行 Rails 版本 6.1.4.1 我正在尝试添加导航栏下拉列表(https://fomantic-ui.com/modules/dropdown.html#pointing)这是我在 Ruby on Rails 中的相关部分:

视图正确呈现下拉列表。但是,在悬停或单击时,下拉菜单不会显示其菜单项。我的 application.js 看起来像这样:

在 application.html.erb 中导入 application.js:

我不确定问题出在哪里?是jquery吗?缺少宝石?

0 投票
0 回答
18 浏览

javascript - Fomantic Form验证错误过渡/动画

大家好,我希望我的 Fomantic Form 的验证错误能够以流畅的动画显示。目前他们只是突然出现,看起来很笨重。似乎有一个设置 -'transition' - 来修改它,但我不知道如何使它工作:

https://fomantic-ui.com/behaviors/form.html#/settings

我正在尝试像这样合并此设置:

我尝试向同一个对象添加另一个设置'inline:true'并且它起作用了,所以必须有其他东西才能使'transition'设置处于活动状态,并对验证错误进行动画处理。有任何想法吗?谢谢