菜单

遮罩层
遮罩层将注意力放在特定的内容中。

下载

类型

遮罩层 (Dimmer)

简单的遮罩层不显示内容

// left button $('.segment').dimmer('show'); // right button $('.segment').dimmer('hide');
当一个元素触发了遮罩时,该遮罩将自动创建。

可覆盖的部分

可覆盖的部分

内容遮罩层 (Content Dimmer)

内容遮罩层可以显示内容

内容必须包含在 .content .center 来显示正确的模态。

可覆盖的部分

遮罩层信息

遮罩网页 (Page Dimmer)

遮罩页可以被格式化固定显示在一个页面中

你好
显示

状态

激活 (Active)

激活的遮罩层可以遮罩父容器

禁用 (Disabled)

禁用的遮罩层将不能被激活

变形

可遮罩

模糊 (Blurring) 2.0新特性

遮罩层可以使其内容模糊

遮罩层

简单遮罩层 (Simple Dimmer)

遮罩层可以被javascript控制

有任何父元素收到ui dimmable dimmed将触发显示效果。

反色遮罩 (Inverted Dimmer)

遮罩层可以被格式化的显示反色颜色。

例子

遮罩层元素 (Dimmer Events)

遮罩层可以触发一个事件的可见变化。

$('.event.example .image') .dimmer({ on: 'hover' }) ;

标题

添加
查看
添加
查看

装载到遮罩层内部 (Loaders inside Dimmers)

任何在加载器内的遮罩层将自动使用适当的颜色。

加载

用法

显示 (Display)

你可以包含 .dimmer('show') 来显示遮罩,或者使用遮罩元素本身来显示。如果你选择遮罩一个暗色的部分,遮罩层将自动创建。

// these two are the same $('.ui.dimmable') .dimmer('show') ; $('.ui.dimmable .dimmer') .dimmer('show') ;

创建遮罩 (Creating Dimmers)

如果遮罩在元素中不存在,他将在第一次使用时创建。

$('h4') .dimmer('toggle') ;

显示特定遮罩层 (Showing a Specific Dimmer)

如果遮罩层已经在元素中,你可以调用遮罩层本身的行为。

// 如果一个遮罩层存在页面中,你可以直接调用它显示。 $('.page.dimmer:first') .dimmer('toggle') ;

行为 (Behavior)

以下所有的行为都可以用语法来调用:

行为必须在相同的内容中调用,不管他是否是可遮罩的 dimmable context, 还是 ui dimmer
$('.your.element') .dimmer('behavior name', argumentOne, argumentTwo) ;
行为 描述
add content (element) 从DOM中脱离出已给出的元素,并附着在遮罩内部元素。
show 显示遮罩
hide 隐藏遮罩
toggle 切换当前遮罩为可显示
set opacity(opacity) 修改遮罩透明度
create 在一个可遮罩的内容中创建新的遮罩层
get duration 返回当前持续显示或者隐藏的时间,取决于当前遮罩的可见性
get dimmer 返回遮罩的DOM元素
has dimmer 返回当前可遮罩区是否有一个遮罩层
is active 判断该部分的遮罩是否被激活
is animating 判断遮罩是否是动画
is dimmer 判断当前元素是否是一个遮罩层
is dimmable 判断当前元素是否为一个可遮罩的部分
is disabled 判断遮罩层是否被禁用
is enabled 判断遮罩层是否可用
is page 判断可遮罩部分是否为 body
is page dimmer 判断遮罩层是否是一个遮罩页面
set active 设置遮罩页为激活状态
set dimmable 设置一个元素为可遮罩部分
set dimmed 设置一个可遮罩部分为已经遮罩状态
set page dimmer 设置当前遮罩层为页面遮罩
set disabled 设置遮罩层不可用

遮罩层

行为

默认 描述
opacity auto 遮罩层的不透明度在0-1之间。设置为 auto 将使用css指定的透明度。
variation false 当产生遮罩时,同时增加一个控制变量,比如 inverted
dimmerName false 如果在一个 dimmable 的上下文中初始化,你可以使用 dimmerName 来区分内容中的多个遮罩。
closable auto 点击遮罩层是否会隐藏遮罩层,(默认取决于 auto)只有在 settings.on 没有被 hover 情况下才能关闭。
on false 可以被设置为 hover 或者 click 来 显示/隐藏遮罩层。
useCSS true 使用css来转换是否遮罩的状态。
duration
duration : { show : 500, hide : 500 }
遮罩动画的持续时间。如果使用一个整数,该值将是显示和隐藏遮罩动画的时间。
transition Fade 动画菜单的过渡。渐变(Fade)和滑块(slide)是可用的不必包含 ui transitions

回调函数

语境 描述
onShow dimmable 用来显示元素的回调函数
onHide dimmable 用来隐藏元素的回调函数
onChange dimmable 用来显示或者隐藏元素的回调函数

模块

这些设置都是本地的所有模块,并且定义了组件如何将内容和DOM属性相关联,以及模块的调试设置。

默认 描述
namespace dimmer 事件名称。确保模块不影响其他事件的元素。
selector
selector: { dimmable : '.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' }
对象包含模块使用的选择器。
template
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 Dimmer 调试日志使用的名字
silent False 关闭所有调试信息的输出,包括错误信息
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台
errors
error : { method : 'The method you called is not defined.' }
输出到控制台的错误信息

遮罩层信息
遮罩层子菜单