我们保证每个页面最多显示一个小型广告。别担心，隐藏此消息将确保您不再收到烦人的提示。
类型
侧边栏
侧边栏
<body> <div class="ui sidebar inverted vertical menu"> <a class="item"> 1 </a> <a class="item"> 2 </a> <a class="item"> 3 </a> </div> <div class="pusher"> <!-- 网站内容 !--> </div> </body>
$('.ui.sidebar') .sidebar('toggle') ;
<div class="ui left demo vertical inverted sidebar labeled icon menu"> <a class="item"> <i class="home icon"></i> 主页 </a> <a class="item"> <i class="block layout icon"></i> 主题 </a> <a class="item"> <i class="smile icon"></i> 朋友 </a> </div>
$('.ui.labeled.icon.sidebar') .sidebar('toggle') ;
状态
侧边栏
可见
侧边栏可以在页面上可见
推动器
调暗
推动器可以调暗
变体
方向
侧边栏可以出现在页面的不同侧边
宽度
侧边栏可以指定其宽度
设置
页面结构
使用侧边栏需要特定的页面结构。为了获得最佳性能，您的页面应该在初始化侧边栏之前已经使用这种结构设置好。
<body> <div class="ui sidebar"> ... </div> <div class="pusher"> 您网站的实际内容 </div> </body>
与菜单一起使用
侧边栏可以是任何内容，但最常见的非画布显示内容类型是 菜单。要了解菜单所需的结构，请参阅 菜单文档。
<body> <div class="ui left vertical menu sidebar"> <a class="item"> 项目 1 </a> <a class="item"> 项目 2 </a> <a class="item"> 项目 3 </a> </div> <div class="pusher"> <!-- 网站内容 !--> </div> </body>
使用固定内容
任何固定位置的内容，当您的侧边栏可见时应该与页面内容一起移动，应该接收类名 fixed 并且作为侧边栏的同级元素存在。
<body> <div class="ui sidebar"> ... </div> <div class="ui top fixed menu"> ... </div> <div class="pusher"> 您网站的实际内容 </div> </body>
iOS 侧边栏
侧边栏使用专门针对 iOS 的修复，这些修复是使用 userAgent 检测添加的。
这应该对您的代码没有实质性影响，但会防止画布在侧边栏打开时错误地自动调整大小。
html.ios { overflow-x: hidden; -webkit-overflow-scrolling: touch; } html.ios, html.ios body { height: initial !important; }
行为
所有以下行为都可以使用以下语法调用
$('.your.element') .sidebar('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| 附加事件(选择器, 事件) | 将侧边栏操作附加到给定选择器。如果未指定，默认事件为切换 |
| 显示 | 显示侧边栏 |
| 隐藏 | 隐藏侧边栏 |
| 切换 | 切换侧边栏的可见性 |
| 可见 | 返回侧边栏是否可见 |
| 隐藏 | 返回侧边栏是否隐藏 |
| 推入页面 | 推动页面内容，使其与侧边栏一起可见 |
| 获取方向 | 返回当前侧边栏的方向 |
| 拉动页面 | 将页面内容返回到原始位置 |
| 添加主体 CSS | 将样式表添加到页面头部以触发侧边栏动画 |
| 删除主体 CSS | 删除侧边栏动画的任何内联样式表 |
| 获取过渡事件 | 返回供应商前缀的过渡结束事件 |
示例
过渡
并非所有侧边栏过渡都适用于每个侧边栏方向，或者当多个侧边栏同时可见时。
| 多个可见 | 支持垂直侧边栏 | 支持水平侧边栏 | |
|---|---|---|---|
| 覆盖 | |||
| 推动 | |||
| 缩小 | |||
| 揭开 | |||
| 沿边滑动 | |||
| 滑动出去 |
方向
所有方向动画
仅垂直动画
显示多个
只有在使用支持的动画（如 push 或 overlay）时，才能同时显示多个侧边栏。
// 显示多个 $('.demo.sidebar') .sidebar('setting', 'transition', 'overlay') .sidebar('toggle') ;
使用自定义上下文
侧边栏可以在任何元素内部初始化，而不仅仅是页面的 body。
应用程序内容
// 使用上下文 $('.context.example .ui.sidebar') .sidebar({ context: $('.context.example .bottom.segment') }) .sidebar('attach events', '.context.example .menu .item') ;
使用其他内容触发显示/隐藏
为了方便起见，调用附加事件将允许您绑定事件。默认情况下，这将在单击时将侧边栏切换到可见和不可见状态
$('.left.demo.sidebar').first() .sidebar('attach events', '.toggle.button') ; $('.toggle.button') .removeClass('disabled') ;
通过其他内容触发自定义行为
您也可以指定元素被点击时应该执行的行为
$('.left.demo.sidebar').first() .sidebar('attach events', '.open.button', 'show') ; $('.open.button') .removeClass('disabled') ;
开始可见
通过添加类名visible，可以使侧边栏从一开始就可见
应用程序内容
// 显示多个 $('.visible.example .ui.sidebar') .sidebar({ context: '.visible.example .bottom.segment' }) .sidebar('hide') ;
侧边栏
行为
| 设置 | 默认 | 描述 |
|---|---|---|
| context | body | 侧边栏将出现在其中的上下文 |
| exclusive | false | 是否可以同时打开多个侧边栏 |
| closable | true | 侧边栏是否可以通过点击页面关闭 |
| dimPage | true | 侧边栏可见时是否要使页面内容变暗 |
| scrollLock | false | 侧边栏可见时是否要锁定页面滚动 |
| returnScroll | false | 侧边栏隐藏时是否要返回到原始滚动位置，在使用transition: scale时会自动执行。 |
| delaySetup | false | 当侧边栏在没有正确 HTML 的情况下被初始化时，使用此选项将推迟 DOM 的创建，以使用requestAnimationFrame。 |
动画
| 设置 | 默认 | 描述 |
|---|---|---|
| transition | auto | 在为侧边栏制作动画时要使用的命名转换。默认值为'auto'，它根据方向从defaultTransition中选择转换。 |
| mobileTransition | auto | 在检测到移动设备时为制作动画使用的命名转换。默认值为'auto'，它根据方向从defaultTransition中选择转换。 |
| defaultTransition |
{ computer: { left : 'uncover', right : 'uncover', top : 'overlay', bottom : 'overlay' }, mobile: { left : 'uncover', right : 'uncover', top : 'overlay', bottom : 'overlay' } }
|
每个方向和屏幕大小的默认转换，与transition: auto一起使用 |
| useLegacy | false | 是否应该使用 Javascript 动画。默认为false。设置为auto将在不支持 CSS 转换的浏览器中仅使用传统动画 |
| duration | 500 | 使用传统 Javascript 动画时侧边栏动画的持续时间 |
| easing | easeInOutQuint | 使用传统 Javascript 动画时要使用的缓动 |
回调
| 设置 | 上下文 | 描述 |
|---|---|---|
| onVisible | 侧边栏 | 当侧边栏开始动画时调用。 |
| onShow | 侧边栏 | 当侧边栏完成动画时调用。 |
| onChange | 侧边栏 | 当侧边栏开始隐藏或显示时调用 |
| onHide | 侧边栏 | 在侧边栏开始动画之前调用。 |
| onHidden | 侧边栏 | 侧边栏完成动画后调用。 |
模块
DOM 设置
| 设置 | 默认 |
|---|---|
| namespace | sidebar |
| className |
className : { active : 'active', animating : 'animating', dimmed : 'dimmed', ios : 'ios', pushable : 'pushable', pushed : 'pushed', right : 'right', top : 'top', left : 'left', bottom : 'bottom', visible : 'visible' }
|
| regExp |
regExp: { ios : /(iPad|iPhone|iPod)/g, mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g }
|
| selector |
selector: { fixed : '.fixed', omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed', pusher : '.pusher', sidebar : '.ui.sidebar' }
|
调试
| 设置 | 默认 | 描述 |
|---|---|---|
| name | 侧边栏 | 调试日志中使用的名称 |
| silent | False | 静默所有控制台输出，包括错误消息，无论其他调试设置如何。 |
| debug | False | 向控制台提供标准调试输出 |
| performance | True | 向控制台提供标准调试输出 |
| verbose | True | 向控制台提供辅助调试输出 |
| errors |
error : { method : '您调用的方法未定义。', pusher : '必须添加 pusher 元素。为了获得最佳性能，请确保主体内容位于 pusher 元素内部', movedSidebar : '必须移动侧边栏。为了获得最佳性能，请确保侧边栏和 pusher 是主体标签的直接子元素', overlay : 'overlay 设置不再受支持，请使用动画: overlay', notFound : '没有与指定选择器匹配的元素' }
|
|