我们承诺每页只显示一个小型广告。不用担心，隐藏此消息将确保您不会再被烦扰。
解决空状态
语义 2.4 带来了一个用于处理内容加载的新组件 ui placeholder，以及一种用于为内容保留空间的新类型 segment：ui placeholder segment.
此外，此版本还包含一些重要的组件更新。
模态框已重新架构，以使用混合弹性支持，在更复杂的使用场景（或旧版浏览器）中回退到 JS 定位。
下拉菜单现在包含一个
clearable 设置，用于让用户将其下拉菜单重置为空状态。新的 UI 组件
或
查找国家/地区
添加新国家/地区
新功能
可清除的下拉菜单
现在下拉菜单可以使用 clearable: true 指定其内容可以被清除。
韩国
显示给我
目前可用的课程。
css
改进的 Flexbox 模态框
虽然 Flexbox 在 2.3.0 中引入，但存在一些限制，可能阻止了某些高级用例。例如，Flexbox 模态框不支持使用 detachable: false 且不在调光器 Flex 容器内的模态框。此外，一些 Flex 浏览器（如 IE11）不支持 Flex 容器内的绝对定位元素，因此在这种情况下无法使用多个重叠的模态框。
2.4.0 通过引入混合 Flex 系统解决了这个问题，该系统将对不兼容 Flex 的浏览器或布局回退到 Javascript 定位。
一种新方法
经过一段时间的补丁修复，Semantic UI 2.3 标志着该项目重返重大功能变更。
在接下来的 Semantic 版本中，我们将更频繁地发布，但变更集将更小，以便用户更容易升级并适应全局变更。
新功能
Font Awesome 5.0 & 更好的图标搜索
在 2.3 中，图标 现在包含 Font Awesome 5.0.6 的完整移植，包括 929 个图标。
图标类别现在与 Font Awesome 文档中的图标类别匹配，使您更容易在文档之间找到图标。
微笑
微笑轮廓
石头剪刀布 手势 - 石头
石头剪刀布 手势 - 布
石头剪刀布 手势 - 剪刀
Semantic UI 图标文档 现在包含一个全局图标搜索功能，可轻松复制和粘贴到 html 中。
Flexbox 模态框和调光器
Semantic UI 2.3 包含对模态框的重写，以包含非 JS Flexbox 定位以进行垂直居中。您不再需要在内容高度发生变化时调用 $('.ui.modal').modal('refresh') 来重新居中。
此外，还新增了一个设置 centered: false，当内部内容可能动态变化且您不想让内容在垂直方向上发生偏移时，使用它可以更容易地进行顶部对齐的模态框。
顶部对齐模态框
$('.ui.special.modal') .modal({ centered: false }) .modal('attach events', '.modal.example .button') ;
新的过渡效果
过渡效果 现在包含 zoom 和 glow。Glow 对于突出显示页面上的元素很有用。
$('.autumn.leaf') .transition('zoom') ;
$('.autumn.leaf') .transition('glow') ;
全局字体粗细变量
主题现在使用两个全局变量 @bold 和 @normal，使您更容易在更复杂的字体堆栈中修改字体粗细。
/* 使用一些自定义字体粗细 */ @bold: 600; @normal: 400;
本地类别搜索
现在，您可以使用 source 选项进行类别搜索，而无需添加 API 回调。
var categoryContent = [ { category: 'South America', title: 'Brazil' }, { category: 'South America', title: 'Peru' }, { category: 'North America', title: 'Canada' }, { category: 'Asia', title: 'South Korea' }, { category: 'Asia', title: 'Japan' }, { category: 'Asia', title: 'China' }, { category: 'Europe', title: 'Denmark' }, { category: 'Europe', title: 'England' }, { category: 'Europe', title: 'France' }, { category: 'Europe', title: 'Germany' }, { category: 'Africa', title: 'Ethiopia' }, { category: 'Africa', title: 'Nigeria' }, { category: 'Africa', title: 'Zimbabwe' }, ]; $('.local-category.example .ui.search') .search({ type: 'category', source: categoryContent, searchFields: [ 'title', 'category' ] }) ;
小弹出窗口上的箭头对齐
Semantic 弹出窗口 现在可以检测到何时在弹出窗口的箭头方向上水平对齐弹出窗口比与弹出窗口匹配边缘更合理。
$('.centering.example .avatar.image').popup();
弹出窗口支持多个坐标系
弹出窗口现在可以正确放置具有两个不同坐标系的元素。这些通常是由父元素具有 css 属性 transform 或 position 引起的。
按钮在这里
弹出窗口在这里
测试
此弹出窗口现在显示正确，无需通过移动 DOM 元素将弹出窗口移动到相同的坐标系。
按钮在这里
弹出窗口在这里
测试
此弹出窗口现在显示正确，无需通过移动 DOM 元素将弹出窗口移动到相同的坐标系。
/* 激活元素位于 #one 内，具有不同的定位上下文 */ #one { display: block; position: relative; padding: 50px 100px; background-color: #F0F0F0; } /* 弹出窗口位于 two 内，position 为 relative（创建另一个定位上下文） */ #two { display: block; background-color: #E2EAE4; position: relative; top: 10px; padding: 50px 8px; }
$('.complex-popup.example .ui.button') .popup({ movePopup: false, popup: $('.complex-popup.example .popup') }) ;
新的匹配选项
此外，搜索现在包含三个级别的匹配结果，类似于下拉列表中可用的选项。模糊结果现在被新的默认设置 fullTextSearch: 'exact' 关闭。
查询与字段的开头完全匹配
查询与字段的任何部分匹配
新的
查询“模糊”匹配字段
$('.ui.search') .search({ fullTextSearch: 'exact' // 仅匹配完全匹配（无模糊匹配） }) ;
用数字说话
2.2 代表了近半年的更新、许多新功能和错误修复。
有关错误的完整列表、附带的错误线程和修复程序，请查阅发行说明。
发行说明项目变更
严重错误修复
2.2 带来了许多新的错误修复。有关完整列表，请查看我们的发行说明。以下是一些严重错误的重点。
查看严重错误列表
所有 UI - 使用
component('setting, {}) 添加多个设置作为对象字面量，例如 error: {}，现在将深度扩展现有对象，而不是替换它。
API - 当
return false; 用于回调时，beforeSend 不会正确取消请求。
API -
cache: 'local' 在某些情况下不会返回本地存储缓存的结果。
分隔符 - 在
水平分隔符 中，像 “g” 这样的下降字母会被截断。
下拉列表 -
forceSelection 现在将自动选择具有多下拉列表的值。当使用 userAdditions 设置时，它现在将自动对当前输入的值进行标记。
下拉列表 -
搜索选择 不允许您使用左箭头在输入的搜索字符串中后退。
下拉列表 - 修复了使用 Javascript DOM 元数据设置的值会在消息或用户添加触发
refresh 时被清除的问题。
表单验证/下拉列表 - 在
搜索下拉列表 中使用 “Enter” 键可能会导致表单提交。
表单验证 - 修复了某些带有扩展字符集的外国电子邮件地址导致电子邮件验证失败的问题。
表单验证 - 在
on: blur 上重新验证字段可能会导致尚未交互的字段被验证。
表单 - 修复了
(x) 字段 和 等宽 字段的问题，其中中间行会略微更小，因为它们在 % 宽度中包含左右填充。（边缘只有一侧填充）。字段组现在使用负边距代替。
弹出窗口 - 修复了在弹出窗口内单击元素（例如，单击多选标签）从 DOM 中删除会导致弹出窗口关闭的问题。
轨道 - 修复了由混合单位
px + em 的变量加法引起的 关闭轨道 和 非常靠近轨道 的不正确宽度。
搜索 - 修复了以前 XHR 查询可能会导致下一个查询失败的错误，具体取决于请求的延迟。
搜索 - 修复了
onResult 返回 false 不会阻止搜索菜单隐藏的问题。点击空结果消息也不会再关闭搜索结果。
粘性/可见性 - 添加了变异观察器来拆除具有
destroy 属性的元素，如果从 DOM 上下文中删除，修复了可能发生的内存泄漏
视频 - 修复了
.video('change') 行为没有正确更改视频的问题。新功能
仅 CSS 工具提示
2.2 包含仅 CSS 弹出窗口，无需使用任何元素上的 data-tooltip 属性进行 JS 初始化。CSS 工具提示甚至支持反转和指定定位。
新图标
Semantic UI 的 2.2 版本包含最新版本的 Font Awesome，其中包含 50 多个新图标。有关新图标的完整细分，请查看 Font Awesome 的列表。
轮椅
美国手语 (ASL) 口译
辅助聆听系统
音频描述
盲人
盲文
耳聋
低视力
手语
通用访问
音量控制电话
快速就绪进度
2.2 中的进度条已重新编码以处理快速更新事件。
现在，开发人员可以以快速间隔触发更新，而不会导致动画卡顿或缓动过渡发生不自然现象。
等待您按下按钮
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; clearInterval(window.fakeProgress) $progress.progress('reset'); // 每 10 毫秒更新一次，直到完成 window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // 完成后停止递增 if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;
减少内存泄漏
Sticky、visibility、popup 和 dropdown 模块可以在初始化时附加到 window 和 body 的事件，例如检测窗口滚动更改，现在将使用 额外的变异观察器 来确定它们是否从 DOM 中删除，并自动触发其 destroy 行为。
这可以在组件的父元素被删除时防止内存泄漏，而该元素没有通过调用其 destroy 行为正确地拆除。
未激活
此部分附带可见性事件，以修改上面的按钮，使其在屏幕上时显示“激活”。
$('.memory.example .demo.segment') .visibility({ onOnScreen: function() { // 即使元素被间接删除，也不会再触发 $('.memory.example .display.segment').html('This is active'); } }) ; // 按钮将删除可见性元素的父元素，回调将自动停止触发 $('.memory.example .ui.button') .on('click', function() { $('.memory.example .display.segment').html('De-activated'); $('.memory.example .wrapper') .remove() ; }) ;
依赖表单验证
表单字段验证现在可以指定 depends 属性，该属性仅在选择另一个字段（如复选框或输入）时才会进行验证。
$('.depends.example .ui.form') .form({ onSuccess: function() { alert('No form problems'); return false; }, fields: { yearsPracticed: { identifier : 'yearsPracticed', depends : 'isDoctor', rules : [ { type : 'empty', prompt : 'Please enter the number of years you have been a doctor' } ] } } }) ;
更快的下拉选择
我们更新了下拉菜单，使其更轻松地浏览带有下拉菜单的表单，并提供更直观的选项控制。
多选下拉菜单使用基于实际渲染像素的新换行算法，而不是基于字形宽度计算的估计长度，这意味着比以前可以将更多选项挤在一行上。
下拉菜单现在可以在键盘上更改选择，而无需按“Enter”键，这使用户可以在表单中快速导航下拉菜单元素，而无需在每次字段输入后按“Enter”键再按“Tab”键，从而节省了一个额外的击键。
所有下拉菜单现在都支持字母键盘快捷键。例如，按“C”键可以跳转到下拉列表中的“California”，然后再次按“C”键可以跳转到“Colorado”，即使没有使用搜索选择下拉菜单也是如此。
更多基本按钮
我们添加了 primary、secondary、positive 和 negative basic 按钮
弹出窗口边界和滚动上下文
弹出窗口现在包含一个新的设置 boundary，它允许您指定弹出窗口不应超出另一个部分的边界。这在复杂的窗格布局中很有用。
此外，弹出窗口现在可以指定滚动上下文，以允许除窗口之外的滚动容器导致点击的弹出窗口在滚动时隐藏。
$('.boundary.example .button') .popup({ boundary: '.boundary.example .segment' }) ;
通常，此弹出窗口将以默认位置 top center 打开，但由于这将超出段落的边界，它将搜索其他可用位置，直到找到一个位置将弹出窗口放置在段落内。
新设置
我们在组件中添加了许多新设置，以帮助为某些用例提供更细粒度的控制。
下拉菜单
| selectOnKeydown | 下拉菜单是否应在键盘快捷键上更改活动选择，从而避免用户在退出字段之前按 enter 键确认选择的要求。（这将节省一个额外的击键） |
| allowReselection | 设置为 true 将允许 onChange 即使重新选择相同的选项也能被触发 |
| fullTextSearch | 设置为 true 将允许搜索字符串的任何部分，设置为 exact 将禁用下拉菜单的模糊匹配。 |
| hideAdditions | 设置为 true 将允许自定义用户添加，而不会触发“添加自定义选项”的特殊下拉菜单消息。现在默认启用此功能。 |
| minCharacters | 开始显示过滤结果所需的最小字符数 |
弹出窗口
| boundary | 弹出窗口在定位自身时不应超出其范围的选择器或 DOM 元素 |
| scrollContext | 用于确定用户是否滚动的选择器或 DOM 元素。 |
| observeChanges | 弹出窗口是否应自动监视其自身从页面中的移除，以避免内存泄漏。 |
可见性
| zIndex | 允许您指定 type: 'fixed' 使用的 z-index |
| onFixed | 与 type: 'fixed' 一起使用的回调，在内容固定到页面时发生。 |
| onUnfixed | 与 type: 'fixed' 一起使用的回调，在内容固定到页面时发生。 |
| onLoaded | 与 type: 'image' 一起使用的回调，在内容加载时发生。 |
| onAllLoaded | 与 type: 'image' 一起使用的回调，在所有一起初始化的图像加载时发生。 |
选项卡
| cacheType | 设置为 html 时，将在加载后缓存选项卡的 html，并使用完全相同的 html 重新加载。设置为 response 将缓存服务响应，允许加载事件使用相同的内容触发。 |
| deactivate | 设置为 siblings 时，将仅停用选定选项卡激活器兄弟节点的 DOM 元素。all 将停用同时初始化的所有其他元素。 |
形状
| width | 设置为 next 时，将在形状的动画过程中使用下一个 side 的大小。设置为 initial 时，它将使用初始化时形状的大小。设置为特定的像素宽度时，将强制大小为该宽度。 |
| height | 设置为 next 时，将在形状的动画过程中使用下一个 side 的大小。设置为 initial 时，它将使用初始化时形状的大小。设置为特定的像素高度时，将强制大小为该高度。 |
统计
2.1 总结了大约两个月的开发工作，包括许多新功能和对现有 UI 的更新，以增强其稳健性。
要查看更新的完整列表，请 查看我们的发行说明
这是一个拉伸的网格列。此段将始终匹配选项卡高度
反转彩色菜单
反转菜单 现在支持单个 item 颜色
可逆网格列
网格现在支持 反转其列流，按设备。当列应出现在较小屏幕上屏幕的另一侧时，这很有用。
反转网格也旨在与特定列顺序的变化兼容，例如分割或单元格
计算机优先
平板第四
平板第四
计算机第二
平板第三
平板第三
计算机第三
平板第二
平板第二
计算机第四
平板第一
平板第一
可堆叠卡片
卡片有一个 stackable 变体，以便它们在移动设备上显示为全宽度。
Elliot
17 个赞 3 条评论
Elliot
17 个赞 3 条评论
Elliot
17 个赞 3 条评论
Elliot
17 个赞 3 条评论
固定表格
表格 现在包括使用 table-layout: fixed 的变体，它不会根据大小调整列宽。
这有助于以格式一致的内容更清晰地呈现数据。
固定表格还支持使用 text-overflow: ellipsis 与 single line 一起使用时折叠内容。
| 姓名 | 状态 | 性别 |
|---|---|---|
| 约翰 | 已批准 | 男性 |
| 杰米 | 已批准 | 男性 |
| 吉尔 | 拒绝 | 女性 |
固定表格
| 姓名 | 状态 | 描述 |
|---|---|---|
| 约翰 | 已批准 | 这太长了，无法容纳，对此我感到抱歉 |
| 杰米 | 已批准 | 较短的描述 |
| 吉尔 | 拒绝 | 较短的描述 |
新行为
完全可定制的 JSON
在 2.1 中，所有使用远程数据的组件都允许您指定 fields 数组来修改预期的 JSON 属性名称，从而避免您指定 onResponse 回调来修改数据结构的麻烦。
$('.ui.search') .search({ apiSettings: { url: '//api.github.com/search/repositories?q={query}' }, fields: { results : 'items', title : 'name', url : 'html_url' } }) ;
字段也可以与本地搜索一起使用，以简化与不寻常搜索源的合作。
$('.ui.search') .search({ searchFields: ['pickle'], fields: { title : 'mustard' }, source: [ { mustard: '标题 #1', pickle: '事物' }, { mustard: '标题 #2', pickle: '另一件事' }, { mustard: '标题 #3', pickle: '事物 100' } ] }) ;
信用卡验证
我们添加了用于付款的新验证规则。这些规则适用于 luhn 和 非 luhn 卡号。如果您只接受某些特定类型的信用卡，您也可以指定。
$('.payment.example form') .form({ on: 'blur', inline: true, fields: { card: { identifier : 'card', rules: [ { type : 'creditCard', prompt : '请输入有效的信用卡' } ] }, exactCard: { identifier : 'exact-card', rules: [ { type : 'creditCard[visa,amex]', prompt : '请输入维萨卡或美国运通卡' } ] } } }) ;
可取消的复选框
复选框 现在包括四个新的回调 beforeChecked、beforeUnchecked、beforeDeterminate 和 beforeIndeterminate，从这些回调返回 false 将取消操作的发生。
$('.cancel.example .ui.checkbox') .checkbox({ beforeChecked: function() { var luckyPerson = (Math.random() < 0.5) ; return luckyPerson; } }) ;
主题更新
全局表单焦点
已添加全局变量以修改所有组件的表单焦点颜色。默认主题现在使用浅蓝色来表示选择。
更新的表单验证
表单验证 现在使用 basic label 用于验证提示。
彩色基本按钮
彩色基本按钮 现在是彩色的，没有 hover，使样式更类似于大多数网站上的常用用法。
带标签的图标菜单
水平 labeled icon menu 现在使用堆叠图标，使其更符合常见的图标菜单用法。
简介
全局更改
Flexbox无所不能
Flexbox 允许元素直观地调整大小以填充可用空间，使许多复杂布局变得更加简单。
13 个组件：表单、网格、菜单、消息、按钮、段落、步骤、下拉菜单、模态框、动态内容、统计数据、卡片、项目 现在使用 flex 进行定位。
完整频谱
Semantic 现在包含十二种命名颜色，足以让大多数语言 区分颜色。2.0 中新增了：橄榄色、紫罗兰色、棕色和灰色。
灰色 红色 橙色 黄色 橄榄色 绿色 青绿色详细信息
蓝色 紫罗兰色 紫色 粉色
棕色
新的默认主题
所有组件都已针对 2.0 进行了重新设计。样式提供了稍微更多负空间，并且已删除了一些特殊的设计元素。
更精确的 EM 值
2.0 中改进了 EM 大小，所有值都四舍五入到精确的像素值。这有助于避免常见的相对大小陷阱，例如垂直对齐中的舍入错误。
Em 变量现在使用新的全局计算的 em 比例，如 @relative4px，以根 em 大小表示像素值。这确保了组件在处理大小问题时不会包含令人困惑的小数或分数值。
网格
下拉菜单
多选
现在可以使用多选下拉菜单，并且可以从标准 HTML 选择中自动生成。
所有下拉菜单现在都支持高级键盘快捷键，例如 pagedown、delete、shift+left ctrl+click，以及使用项目首字母进行选择。
此外，如果视窗下方没有足够的可用空间，下拉菜单现在将自动向上打开。
用户标记
所有下拉菜单（单选和多选）现在都支持用户标记。值可以由分隔符自动分隔并放置在隐藏的输入中，或扩展现有的选择元素。
$('.ui.dropdown') .dropdown({ allowAdditions: true }) ;
技能
技能
远程数据
所有下拉菜单现在都支持加载远程数据。远程检索到的所选名称值对存储在 sessionStorage 中，以便即使在页面刷新后也能正确重新填充所选值。
// 在应用程序中的某个地方 $.api.settings.api = { queryTags: '//api.semantic-ui.com/tags/{query}' }; $('.ui.dropdown') .dropdown({ apiSettings: { action: 'queryTags' } }) ;
请选择...
请选择...
高级快捷键
下拉菜单现在支持高级快捷键，例如 page down 和 page up，在按首字母时滚动到选择，即“N”表示纽约，shift+left/right 用于组选择，以及 ctrl+click 用于修改组。
更多
下拉菜单支持许多新功能，包括
- 多选支持最大选择数量
- 变异观察器现在将监控菜单或生成它们的元素的变化，并会自动更新选择
- 自定义模板化的错误消息现在与下拉菜单一起使用
API
本地缓存
API 现在支持 sessionStorage 缓存。此设置使对 URL 的重复请求在用户的会话期间立即返回结果，从而大大提高了诸如 搜索 等组件的性能。
尝试刷新页面并搜索相同的字母，结果将立即显示，无需服务器往返。
$('.ui.dropdown') .dropdown({ apiSettings: { cache : 'local', url: '//api.semantic-ui.com/tags/{query}' } }) ;
请选择...
翻译任何 API
API 现在允许您使用新的回调 onResponse 调整服务器的 JSON 响应。这使您可以重新构建第三方 API 以匹配您的本地数据要求。
$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // 将 GitHub API 响应翻译为适用于搜索的响应 $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // 创建新的语言类别 if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // 将结果添加到类别 response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, url: '//api.github.com/search/repositories?q={query}' } })
模拟响应
API 现在支持模拟响应，允许你预先指定响应如何返回。
$('.toggle.button') .api({ // 假设这需要一段时间加载 loadingDuration: 500, // 将此按钮视为请求此 JSON mockResponse: { success: true } }) // 成功响应将触发文本状态更改 .state({ text: { inactive : 'Off', active : 'On' } }) ;
自定义后端
API 现在可以使用 自定义异步回调 来解析 API 请求，这可以让你使用其他自定义 XHR 后端或本地数据来解析请求。
$('.toggle.button') .api({ // 等待半秒钟然后尝试你的运气 mockResponseAsync: function(settings, callback) { var luckyPerson = (Math.random() < 0.5), response = (luckyPerson) ? { success: true } : { success: false, message: '你没有那么幸运' } ; // 模拟这是一个异步任务 setTimeout(function() { callback(response); }, 500); }, successTest: function(response) { return response && response.success; }, onFailure: function (response) { alert(response.message); } }) .state({ text: { inactive : 'Off', active : 'On' } }) ;
表单
自动完成
表单现在包含针对浏览器 自动完成的表单字段 的自定义样式。自动完成的字段还可以指定聚焦的自动完成和错误的自动完成样式。
遮罩
复选框
段落
复杂布局
组现在使用 flexbox 并完全支持嵌套。
顶部
嵌套顶部
嵌套中间
嵌套底部
中间
左
中心
右
底部
菜单
更好的耦合
菜单现在与其他组件（如下拉菜单、搜索、按钮和输入）具有更好的耦合性。
$('.ui.menu .browse.item') .popup({ popup : '.classes.popup', hoverable : true, position : 'bottom left', delay : { show: 300, hide: 800 } }) ;
$('.ui.search') .search({ type: 'category', apiSettings: { action: 'categorySearch' } }) ;
可见性
简单粘性
可见性 API 现在包含用于粘性内容的有用快捷方式。当元素被传递时，将自动添加一个占位符，确保其他内容不会发生位置偏移。
此外，可见性 和 粘性 已被重写为使用发布/订阅模式，这比 1.0 性能更高。
$('.overlay') .visibility({ type : 'fixed', offset : 15 // 给屏幕顶部留出一些空间 }) ;
.overlay { background-color: #FFFFFF; padding: 0.5em; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: all 0.5s ease; background: transparent; } /* 更改样式 */ .fixed.overlay { position: fixed; padding: 1em; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
