我们保证每页最多只显示一个小广告。别担心，隐藏此消息将确保您不会再被烦扰。
类型
调光器
一个简单的调光器不显示任何内容
// 左侧按钮 $('.segment').dimmer('show'); // 右侧按钮 $('.segment').dimmer('hide');
可叠加部分
可叠加部分
内容调光器
调光器可以显示内容
可叠加部分
调暗的消息！
页面调光器
调光器可以格式化为固定在页面上的
你好
状态
激活
激活的调光器将使其父容器变暗
禁用
禁用的调光器无法激活
变体
可调光
模糊 2.0 版新增功能
可调光元素可以模糊其内容
对齐方式
垂直对齐 2.3 版新增功能
调光器可以使其内容顶部或底部对齐。
标题
标题
调光器
简单调光器
调光器可以在没有 Javascript 的情况下进行控制
反转调光器
调光器可以格式化为反转其颜色
示例
调光器事件
调光器可以在事件上触发可见性更改
$('.event.example .image') .dimmer({ on: 'hover' }) ;
标题
调光器内的加载器
调光器内的任何加载器都会自动使用适当的颜色来匹配
加载中
使用
显示
您可以通过在部分或调光器本身调用 .dimmer('show') 来显示调光器。如果您选择调暗可调光部分，则会自动创建调光器。
// 这两个是相同的 $('.ui.dimmable') .dimmer('show') ; $('.ui.dimmable .dimmer') .dimmer('show') ;
创建调光器
如果元素内部不存在调光器，则会在第一次使用时创建它。
$('h4') .dimmer('toggle') ;
显示特定调光器
如果元素内部已经存在调光器，则可以在可调光部分或调光器本身调用行为。
// 如果页面上存在调光器，您可以通过直接调用它来使其出现 $('.page.dimmer:first') .dimmer('toggle') ;
行为
所有以下行为都可以使用以下语法调用
$('.your.element') .dimmer('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| 添加内容（元素） | 将给定元素从 DOM 中分离，并将元素重新附加到调光器内部 |
| 显示 | 显示调光器 |
| 隐藏 | 隐藏调光器 |
| 切换 | 切换当前调光器的可见性 |
| 设置不透明度（不透明度） | 更改调光器的不透明度 |
| 创建 | 在可调光上下文中创建一个新的调光器 |
| 获取持续时间 | 返回显示或隐藏事件的当前持续时间，具体取决于当前可见性 |
| 获取调光器 | 返回调光器的 DOM 元素 |
| 具有调光器 | 返回当前可调光部分是否具有调光器 |
| 处于活动状态 | 部分的调光器是否处于活动状态 |
| 正在动画 | 调光器是否正在动画 |
| 是调光器 | 当前元素是否为调光器 |
| 是可调光的 | 当前元素是否为可调光部分 |
| 已禁用 | 调光器是否已禁用 |
| 已启用 | 调光器是否未禁用 |
| 是页面 | 可调光部分是否为body |
| 是页面调光器 | 调光器是否为页面调光器 |
| 设置活动 | 将页面调光器设置为活动 |
| 设置可调光 | 将元素设置为可调光部分 |
| 设置调暗 | 将可调光部分设置为调暗 |
| 设置页面调光器 | 将当前调光器设置为页面调光器 |
| 设置禁用 | 将调光器设置为禁用 |
调光器
行为
| 默认 | 描述 | |
|---|---|---|
| useFlex | true | 调光器是否应该使用 flex 或旧版定位 |
| 变体 | false | 在生成调光器时指定要添加的变体，例如inverted |
| dimmerName | false | 如果在dimmable上下文中初始化调光器，则可以使用dimmerName来区分该上下文中的多个调光器。 |
| 可关闭 | 自动 | 单击调光器是否应该隐藏调光器（默认为auto，仅当settings.on不是hover时可关闭 |
| on | false | 可以设置为hover或click，以便在可调光事件上显示/隐藏调光器 |
| useCSS | true | 是否使用 CSS 过渡来调暗调光器。 |
| 持续时间 |
duration : { show : 500, hide : 500 }
|
调暗的动画持续时间。如果使用整数，该值将应用于显示和隐藏动画。 |
| 过渡 | 淡入淡出 | 在动画菜单进出时使用的命名过渡。淡入淡出和向下滑动无需包含ui 过渡 |
回调
| 上下文 | 描述 | |
|---|---|---|
| onShow | 可调光 | 元素显示时的回调 |
| onHide | 可调光 | 元素隐藏时的回调 |
| onChange | 可调光 | 元素显示或隐藏时的回调 |
模块
这些设置是所有模块的原生设置，它们定义了组件如何将内容绑定到 DOM 属性，以及模块的调试设置。
| 默认 | 描述 | |
|---|---|---|
| 命名空间 | dimmer | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| 选择器 |
selector: { dimmable : '.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' }
|
包含模块使用的选择器的对象。 |
| 模板 |
template : { dimmer: function() { return $(' ').attr('class', 'ui dimmer'); } }
|
用于生成调光器内容的模板 |
| className |
className : { active : 'active', dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', pageDimmer : 'page', hide : 'hide', show : 'show', transition : 'transition' }
|
用于将样式附加到状态的类名 |
| name | 调光器 | 调试日志中使用的名称 |
| silent | False | 静音所有控制台输出，包括错误消息，无论其他调试设置如何。 |
| debug | False | 向控制台提供标准调试输出 |
| performance | True | 向控制台提供标准调试输出 |
| 详细 | True | 向控制台提供辅助调试输出 |
| 错误 |
错误：{方法：'您调用的方法未定义。'}
|
显示在控制台上的错误消息 |