标签: semantic-ui

我想在我的新项目中使用Laravel的Elixir和Semantic UI.

在Semantic UI文档中,他们建议如何将gulp任务包含在当前项目的gulpfile中.在Laravel,他们(简要地)建议如何扩展Elixir.但是如何在watch命令中包含另一个gulp任务？

目前我正在运行gulp watch watch-ui,但我想将watch-ui任务包括在内watch.可能吗？

这是我目前的gulpfile.js:

var gulp     = require('gulp');
var elixir   = require('laravel-elixir');
var semantic = {
  watch: require('./resources/assets/semantic/tasks/watch'),
  build: require('./resources/assets/semantic/tasks/build')
};

gulp.task('watch-ui', semantic.watch);
gulp.task('build-ui', semantic.build);

elixir(function(mix) {
  mix.task('build-ui');
});

我试图用语义ui创建一个简单的web ui.

我想要一个带有菜单的侧边栏,在某些项目中会有子项目......难道不应该那么辛苦吗？

http://jsfiddle.net/ycm8ctfx/

<div class="ui vertical menu sidebar teal">
   <div class="menu">
   <a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
     Example
   </a>
   <div class="ui left pointing dropdown link item">
      <i class="dropdown icon"></i>
      Messages
     <div class="menu">

如何使子项在正常页面内容上"跳出"侧边栏？如果单击示例中的"消息",将显示菜单(观察底部的滚动条以显示),但由于这些是侧边栏的子项,因此它们将显示在侧边栏中.但我希望他们能够超越正常的内容!我没有通过摆弄z-index来使它工作.

我正在试图弄清楚滚动时如何保持桌面可见.这个语义ui中有一个设置吗？或者我只需要使用非语义ui解决方案？

您需要查看"整页"才能正确查看表格.

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.css" rel="stylesheet" />

<div style="height:200px;overflow:auto">
  <table class="ui small celled striped table" sytle="width:100%">
    <thead>
      <tr>
        <th>Date</th>
        <th>Status</th>
        <th>Facility Name</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody data-bind="foreach:FollowupEntries">
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td> …

我在语义 ui 中尝试实现 2 个下拉菜单时遇到了问题。

我想要发生的是，当我更改第一个下拉列表中的选定项目时，第二个下拉列表将自动从其先前的选择中清除（这是对第二个下拉列表的内容实施自动更改的第一步）。

我在 JS bin 中创建了一个更简单的版本，其中包含 2 个下拉菜单和一个清除按钮：here。

编码：

var $one = $('#one'),
    $two = $('#two');

$two.dropdown();
$one.dropdown({
    onChange :function(val) {
        $two.dropdown('clear');
    }
});

$('.button').on('click', function() {
    $('#two').dropdown('clear');  
});

在这里我遇到了多个问题：

我遇到的第一个问题是清除按钮不会清除两个下拉列表，除非两个下拉列表都只被初始化并且没有在初始化中添加其他设置（即 $(".ui.dropdown").dropdown()）。

第二个问题是，在提供的代码中，只有当清除按钮的选择器为 $(".ui.dropdown) ，如果我使用 $("#one")/$("#two") 按钮将不会清除下拉列表。

第三个问题是，当第一个下拉列表发生变化时，第二个下拉列表没有被清除，这是我的最终目标。

任何想法或建议将不胜感激。

我正在使用ajax来更新表的内容,我想使用semantic-ui的内置类" Loader "在获取内容的同时在表的中心显示一些加载动画,但这似乎不适用于<table>标签.

<div class="ui active loader">
  <table class="ui unstackable striped table segment">
    <tr><td>id</td><td>name</td></tr>
    <tr><td>1</td><td>test test</td></tr>
  </table>
</div>

我如何让它工作？

我有这个代码,但我不知道如何获得选定的值.我应该给这个列表的id值？

<div class="ui compact menu">
    <div class="ui simple dropdown item">Question
        <i class="dropdown icon"></i>
        <div id="question" class="menu">
            <div id="type" class="item" data-value="mcsc">Multiple Choice Single Correct</div>
            <div id="type" class="item" data-value="mcmc">Multiple Choice Multiple Correct</div>
            <div id="type" class="item" data-value="numerical">Numerical</div>
        </div>
    </div>
</div>

我正在建立一个网站,其中很多主题和样式都是基于Bootstrap 3.但我想使用多选下拉搜索框之类的内容,这些内容随时可用,Semantic UI但并非如此Bootstrap.我认为将项目完全转移到现在还为时已晚Semantic UI.此外,我知道这些框架之间存在大量的命名冲突.所以Semantic UI一起使用Bootstrap并不是一个好主意.那我该怎么办？我的问题是双重的.

1. Semantic UI建议安装使用Node JS.可以Semantic UI在带PHP后端的项目中使用吗？

2. 我不能只使用Semantic UI Githubrepo中这些元素的源代码并在我的项目中使用它而不需要实际安装Semantic UI吗？

我使用语义ui日历与Vuejs结合来获得价值.在使用datepicker选择日期后,此日历未设置该值.所以我无法通过Vuejs保存日期.这是我的HTML:

<div class="ui calendar" id="date">
    <div class="ui input left icon">
         <i class="calendar icon"></i>
         <input type="text" v-model="input.date">
    </div>
</div>

我的Vuejs:

var app = new Vue({
    el: "#app",
    data: {
        input: {
            unique_number:"",
            date: "",
            description: ""
        },
            inputErrors: []
    }
});

任何的想法 ？

原始语义菜单会自动变成汉堡包图标

好像通过代码重复.是否可以通过语义ui反应重新创建代码重复(作为一个组件)以及如何做这样的事情？

如何semantic-ui-react在html表中使用colspan通常合并几个单元格？

https://react.semantic-ui.com/collections/table#types-pagination

我尝试了不同的选择 - 似乎没有任何帮助!!