semantic-ui 相关问题

找不到模块：错误：无法解析模块“semantic-ui-css”

我正在尝试使用 Webpack + Semantic UI 但没有成功。 我试过... npm 我语义-ui-css 在我的index.js..从'semantic-ui-css'导入语义 我将配置添加到 webpack.config.js 中

SemanticUI 切换基线

我想将我的切换按钮与其他表单元素（如输入框）对齐。这是 HTML： 我想将我的切换按钮与其他表单元素（如输入框）对齐。这是 HTML： <div class="ui toggle checkbox"> <input type="checkbox" name="stromlos" id="stromlos"> <label>Stromlos</label> </div> 这是我的（不起作用）方法： .ui.toggle.checkbox { display: inline-flex; align-items: baseline; vertical-align: middle; } .ui.toggle.checkbox label { margin-left: 0.5em; } 有什么想法吗？它什么也没做:-( 尝试将 div 的宽度设置为 100% 并将 vertical-align 与 justify-content 切换，如下所示： .ui.toggle.checkbox { display: inline-flex; align-items: baseline; justify-content: center; width:100%; } .ui.toggle.checkbox label { margin-left: 0.5em; } <div class="ui toggle checkbox"> <input type="checkbox" name="stromlos" id="stromlos"> <label>Stromlos</label> </div>

为什么semantic-ui-react有循环依赖，使用webpack时如何解决这个问题？

我在基于create-react-app的React应用程序中使用semantic-ui-react。我遇到了一个问题，仅使用 或 之类的组件会引发泛型，不幸的是

Angular2 formControl 用于选择多个

我正在使用 Sematinc-UI 和 Angular2 ReactiveFormsModule 表单，我想使用 [formControl] 来选择多个。 如果我使用 select 它可以正常工作： 我正在使用 Sematinc-UI 和 Angular2 ReactiveFormsModule 表单，我想使用 [formControl] 来选择多个。 如果我使用select，它可以正常工作： <select class="ui fluid dropdown" [formControl]="myForm.controls.category"> <option *ngFor="let item of categories" value="{{item}}">{{item}}</option> </select> 如果我使用选择多个它不起作用： <select multiple="" class="ui fluid dropdown" [formControl]="myForm.controls.category"> <option *ngFor="let item of categories" value="{{item}}">{{item}}</option> </select> 我收到此错误： core.umd.js:3462 异常：未捕获（承诺中）：错误：http://localhost:3000/app/components/category.component.js类 CategoryComponent - 内联模板中的错误：0:1701 导致作者：values.map 不是函数 可能是什么问题？ 我成功了。诀窍是确保该值始终是一个数组，即使没有选择任何内容。 <select multiple class="ui fluid dropdown" [formControl]="myForm.controls.category"> <option *ngFor="let item of categories" [ngValue]="item">{{item}}</option> </select> 创建 FormControl 时，确保 blank 值是空数组，而不是 '' 或 undefined。 this.control = new FormControl([]); 我没有使用 Semantic-UI，只是使用标准 Angular 2 在 ionic2 和反应形式中工作，我能够仅使用验证器“必需”来验证多重选择，minlength() 不起作用。如果您不想通过验证，则需要将 null 传递给模型。空数组将通过“必需”验证。如果你问我的话有点奇怪。 我为我的离子项目尝试了丹尼尔的答案，它有效。如果有人正在寻找的话，这是一个示例 buildForm() { this.registerForm = this.formBuilder.group({ 'contact': ['03007654321', [Validators.required]], 'agree': [true, Validators.requiredTrue], 'categories': this.formBuilder.array([]), 'locations': [[], Validators.required], }); } 在你的 HTML 模板中像这样使用它 <ion-item > <ion-label>Gender</ion-label> <ion-select multiple="true" [formControl]="registerForm.controls.locations"> <ion-option value="f">Female</ion-option> <ion-option value="m">Male</ion-option> </ion-select> </ion-item> 注意：我在离子选择上使用它，但我猜它会 也可以使用常规 HTML select()。 查看 FormControl 的测试，很明显，如果您传入一个数组，那么第二个和后续值将被视为验证器（因此是我上面评论中的第一个错误）。要传入数组，它必须被“装箱”（在对象内），但 FormControl 需要“disabled”属性才能使用“value”属性作为值，所以最终正确的格式是 'courseIds': {value: [1,3,5], disabled: false} .

无法在 Next.js 中使用语义 UI 中的 Dropdown/Modal

我无法在 Next.js 中使用 Semantic UI 中的 Dropdown/Modal。下面的代码无法正常运行（点击按钮无反应） '使用客户端'； 从“下一个/图像”导入图像； 导入 * 作为

使用 Leftbar、Toggle 和 Bot 组件响应聊天页面

我正在尝试使用 React 创建一个聊天页面。 用户界面与 Chatgpt 非常相似。有一个左栏、一个用于打开和关闭左栏和聊天组件的切换按钮。 开关是垂直的...

R Shiny语义页面（）：根据menu（）更改内容

如何使用semanticPage()中的menu()函数根据选择的menu_item()来更改ui页面的内容？以及如何无论选择哪个 ui 页面都始终显示它？ ...

vue js 和 jquery DOM 操作

我想知道是否有人可以给我建议，当我需要直接访问 DOM 元素，同时我也在使用 VUE.JS 时，如何处理这种情况。 我使用 Semantic-UI 框架（dead Semantic UI 的分支）...

包含标题的主（html标签）

我很困惑。我读到了关于 main 的不同意见。第一个表示 main（因为它是主要部分）可以包含页眉和页脚作为直接子项。 ... 我很困惑。我读到了关于 main 的不同意见。第一个表示 main（因为它是主要部分）可以包含页眉和页脚作为直接子项。 <main> <header></header> <section>for the content</section> </main> 其他人说 main 不能包含标题作为直接子项，而是使用文章或部分作为父项。所以结果是： <main> <article> <header></header> <section>for the content</section> </article> </main> 目前我有这个布局，但我很困惑是否有必要添加一篇文章或一个部分来包装标题和内容： 两种变体均可。 做你更喜欢的事情，我喜欢第一个变体。 我不确定你的作品的格式。如果是理论使用：MDN Library 如果实用，请确保它有效且可读。 不要像您对标签那样担心。每个标签通常毫无价值，只有浏览器才描述标签。如果您愿意 - 您甚至可以创建自己的标签。 例如： <style> main-header{display: block;} heading-large{display:inline; font: 700 1.5em system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #111; margin: 0; padding: 0;} </style> <main-header> <heading-large> It is working </heading-large> </main-header> 但是你需要用CSS来描述它，并且在经历过程中你会需要解决更多的问题，但它们对于非公司项目来说是痛苦的。 main-header{display: block;} heading-large{display:inline; font: 700 1.5em system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #111; margin: 0; padding: 0;} <main-header> <heading-large> It is working </heading-large> </main-header> 好吧，经过更多研究，使用带有 header 的 main 作为直接子项似乎是可以的。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main 如果我理解这一点， main 可以是任何流内容的父级。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content 根据这些文档，<main>可以包含 self <header>，就像<article>一样。但是 <header> 的 <main> 应该与页面 <header> 的 <body> 分开/独立： 当上下文是 <header> 元素时，<body> 元素定义横幅地标。当 HTML 标头元素是 <article>、<aside>、<main>、<nav> 或 <section> 元素的后代时，不会将其视为横幅地标。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header#accessibility_concerns 当页面的主要内容（即不包括页脚、页眉、导航块和侧边栏）都是一个独立的组合时，该内容可以用一篇文章来标记，但在这种情况下在技术上是多余的（因为不言而喻，该页面是一个单一的组合，因为它是一个单一的文档）。 附注 对您所写内容的唯一评论是“主要部分（因为它是主要部分）”。 <main> 元素不是像 <article> 或 <section> 那样的分段元素。 <main> HTML 元素代表文档的主要内容。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

语义 UI 搜索模块禁用默认错误消息

有没有办法禁用语义搜索模块中的错误消息。我尝试将错误配置设置为未定义，如下所示： $('搜索').搜索({ 错误：未定义 }); 但它...

在React语义ui列表元素中显示奇怪的字符而不是项目符号点

我正在使用react语义ui列表项目符号，但部署后项目符号点显示像奇怪的字符。我已经在 index.html 文件中包含以下代码 我正在使用 React 语义 ui 列表项目符号，但部署后项目符号点显示像奇怪的字符。我已经在index.html文件中包含了以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> 我也有这个问题，为什么它们只是偶尔出现，并且不可选，也不属于html？

如何使用Javascript从语义搜索中访问标题？

我正在尝试构建一个网络应用程序，可以使用自然语言执行语义搜索并返回结果答案。使用response.data.results，我可以在con中看到标题文本...

无法在 Git Bash (Windows) 中使用箭头键

我正在尝试在我的存储库中设置语义 UI，但由于某种原因，我无法使用箭头键在 Git Bash 中选择菜单选项。 按向下或向上只会移动我的光标，它不会移动 > ico...

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

我正在尝试找到一种使用 Google reCAPTCHA v3 验证 Semantic UI / Fomantic UI 表单的方法。我在 Stack 上找到了使用 Google reCAPTCHA v2 进行验证的选项。但是，V3的新形式

ajax 成功后，ajax 回调中的语义 UI 下拉菜单未初始化

我在 Laravel 控制器功能中使用语义 UI 下拉列表和数据表。我正在向路由发送 ajax 请求，并使用其中一个键（列）接收 JSON 数据（包含表行）

网格之间的空间语义UI

这些天我正在学习 Semantic UI Grid。使用起来很酷，但我在网格方面遇到了一些问题。下面我创建了两个不同的网格，但我不明白为什么没有间距...

语义 UI 下拉列表在 Rails 7 应用程序中不起作用

我在使用 CDN 开发的 Rails 7 应用程序中遇到语义 UI 下拉列表问题。尽管我做出了努力，但下拉菜单并未按预期工作。以下是相关c...

如何更改禁用的复选框颜色

我想覆盖禁用复选框的语义ui css，因为我不擅长CSS，所以我不知道应该覆盖哪个角色。 我想覆盖禁用复选框的语义 ui css，因为我不擅长 css，所以我不知道应该覆盖哪个角色。 <link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> <div class="ui disabled checkbox"> <input type="checkbox" disabled="disabled"> <label>Disabled</label> </div> <div class="ui disabled checkbox"> <input type="checkbox" disabled="disabled"> <label></label> </div> 从上面的代码片段来看，他们似乎正在设计标签的样式。如何将复选框颜色设置为灰色或任何较暗的颜色？ input[type="checkbox"]:disabled + label::before{ background: gray; } input[type="checkbox"]:disabled + label:hover::before{ background: gray; border: 1px solid #d4d4d5; } <link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" /> <div class="ui disabled checkbox"> <input type="checkbox" disabled="disabled"> <label>Disabled</label> </div> <br/> <div class="ui disabled checkbox"> <input type="checkbox"> <label>Abled</label> </div> 这是一个使用 CSS 将复选框图像添加到输入的父级的解决方案。在此示例中，仅对禁用的选中复选框进行样式设置，并且可以完全自定义。 /* add custom checkbox to container with disabled checked checkbox */ .checkbox-container:has(> input:disabled:checked)::after { width: 10px; height: 10px; font-size: 9px; background: #8585cf; display: inline-block; border: 1px solid #000000; border-radius: 3px; color: white; position: relative; content: "✔"; text-align: center; float: left; margin: 3px 4px 0 5px; } /* remove display of default disabled checked checkbox */ .checkbox-container input:disabled:checked { display: none } With new styling: <div class="checkbox-container"> <input type="checkbox" id="cb-enabled-1" checked="checked"/><label for="cb-enabled-1">Enabled Checkbox</label> </div> <div class="checkbox-container"> <input type="checkbox" id="cb-disabled-unchecked-1" disabled="disabled" /><label for="cb-disabled-unchecked-1">Disabled Checkbox - Unchecked</label> </div> <div class="checkbox-container"> <input type="checkbox" id="cb-disabled-checked-1" checked="checked" disabled="disabled"/><label for="cb-disabled-checked-1">Disabled Checkbox - Checked</label> </div> <br> Browser Default Styling: <div> <input type="checkbox" id="cb-enabled-2" checked="checked"/><label for="cb-enabled-2">Enabled Checkbox</label> </div><div> <input type="checkbox" id="cb-disabled-unchecked-2" disabled="disabled" /><label for="cb-disabled-unchecked-1">Disabled Checkbox - Unchecked</label> </div><div> <input type="checkbox" id="cb-disabled-checked-2" checked="checked" disabled="disabled" /><label for="cb-disabled-checked-2">Disabled Checkbox - Checked</label> </div>

更改语义 ui 反应输入中日历图标的颜色

我正在使用语义 UI React 来输入日期。我需要更改输入的日历图标颜色。是否可以 ？ 这是我的代码 我正在使用语义 UI React 来输入日期。我需要更改输入的日历图标颜色。是否可以 ？ 这是我的代码 <Input id="fromDate" name="fromDate" type="date" value={state.fromDate} onChange={onHandleChange} placeholder="Date" className="custom-date-input" /> 我不确定是否有更好的方法来处理其他特定颜色，但您可以对其使用滤镜。你只需要用 CSS 选择它 .custom-date-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(); }就像这样。 另外，这里是我实现它的codesandbox的link，我尝试使用过滤器获取占位符中的颜色。那么就来看看吧，希望对你有帮助。

Google Sheets 多项选择菜单显示持久复选框？

我正在尝试修改此处另一个SO答案中给出的代码（https://stackoverflow.com/a/72411940/8236733），它允许谷歌表格进行多项选择菜单选择。转载如下