问题标签 [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.
arrays - 如何使用 Aurelia 观察数组中的数组?
我有一个people
对象数组,其中每个对象(代表一个人)包含一个roles
数组:
我希望视图遍历并显示它们(例如repeat.for="role of roles"
)。people
但是,当数组更新时,视图不会更新。Angular
-option 对我不起作用的示例代码:
当我初始化people
数组以role '1'
从一开始就包含第三人称时,一切正常,但是当我动态添加相同的第三人称时(例如通过按钮),它不会更新。
我知道如何用via观察people
数组collectionObservers
但我对整个this.people
数组不感兴趣,而是对里面的嵌套数组roles
数组感兴趣。如何解决使用 obersers 观察数组内的数组的问题? this.people
ruby-on-rails - 在我的 Rails 应用程序中,Less::Error `unmatched '/*'`/ Sass::SyntaxError 的原因
我刚刚在我的 Rails 应用程序中从 Semantic UI 切换到社区维护的 Fomantic UI,并在使用npm 包或sass rails gem时遇到两个模糊错误之一。
使用 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/src
是semantic.less。存储在其中的相关文件semantic-ui/dist
是semantic.min.css(我不需要,除了刚才切换东西来解决这个问题时)和semantic.min.js(我确实需要)。同样,如果我需要在 中缩小样式表,它“工作”,如果我需要在 .less 文件中,它
semantic-ui/dist
不会“工作” 。这是semantic.less还是其他生成的导入文件之一的问题?semantic-ui/src
使用 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 时,一切正常。我非常困惑,非常感谢您的帮助。谢谢!
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
并且图标现在正确显示。
这是最好的解决方案吗?
forms - 使用 Google reCAPTCHA v3 进行语义 UI / Fomantic UI 表单验证
我正在尝试找到一种使用 Google reCAPTCHA v3 验证语义 UI / Fomantic UI 表单的方法。我在 Stack 上找到了使用 Google reCAPTCHA v2 进行验证的选项。但是,V3 验证的新形式不同,它使用了另一种形式的用户界面。
vue.js - 将 fomantic-ui-css 与 VueJs 的 webpack 捆绑在一起
我正在尝试使用 Vue-Cli 创建一个 VueJs 项目,并希望将 fomantic-ui-css 与它一起使用。我使用 npm 安装了 fomantic-ui,然后将其导入main.js
,但是当我运行应用程序时,我ReferenceError: jQuery is not defined
从webpack
.
下面是我的配置的样子
main.js
webpack.config.js
包.json
我在这里想念什么?
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吗?缺少宝石?
javascript - Fomantic Form验证错误过渡/动画
大家好,我希望我的 Fomantic Form 的验证错误能够以流畅的动画显示。目前他们只是突然出现,看起来很笨重。似乎有一个设置 -'transition' - 来修改它,但我不知道如何使它工作:
https://fomantic-ui.com/behaviors/form.html#/settings
我正在尝试像这样合并此设置:
我尝试向同一个对象添加另一个设置'inline:true'并且它起作用了,所以必须有其他东西才能使'transition'设置处于活动状态,并对验证错误进行动画处理。有任何想法吗?谢谢