ページごとに1つ以上の小さな広告を表示しないことをお約束します。ご心配なく、このメッセージを非表示にすると、二度と表示されません。
タイプ
サイドバー
サイドバー
<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>
メニューとの使用
サイドバーは任意のコンテンツにできますが、オフキャンバス表示する最も一般的なコンテンツの種類はmenuです。メニューに必要な構造を理解するには、メニューのドキュメントを参照してください。
<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サイドバー
サイドバーは、userAgent検出を使用して追加されるiOS用の特別な修正を使用します。
これはコードに意味のある影響を与えることはありませんが、サイドバーが開いたときにキャンバスが誤ってサイズ変更されるのを防ぎます。
html.ios { overflow-x: hidden; -webkit-overflow-scrolling: touch; } html.ios, html.ios body { height: initial !important; }
動作
次のすべての動作は、次の構文を使用して呼び出すことができます
$('.your.element') .sidebar('behavior name', argumentOne, argumentTwo) ;
| 動作 | 説明 |
|---|---|
| attach events(selector, event) | 指定されたセレクターにサイドバーアクションをアタッチします。指定されていない場合のデフォルトのイベントはtoggleです。 |
| show | サイドバーを表示します |
| hide | サイドバーを隠します |
| toggle | サイドバーの表示/非表示を切り替えます |
| is visible | サイドバーが表示されているかどうかを返します |
| is hidden | サイドバーが非表示になっているかどうかを返します |
| push page | ページコンテンツをプッシュして、サイドバーとともに表示できるようにします |
| get direction | 現在のサイドバーの方向を返します |
| pull page | ページコンテンツを元の位置に戻します |
| add body CSS | サイドバーアニメーションをトリガーするために、ページヘッドにスタイルシートを追加します |
| remove body CSS | サイドバーアニメーションのインラインスタイルシートを削除します |
| get transition event | ベンダープレフィックス付きのトランジション終了イベントを返します |
例
トランジション
すべてのサイドバートランジションがすべてのサイドバーの方向で利用できるわけではありません。また、複数のサイドバーが同時に表示されている場合は利用できません。
| 複数表示 | 垂直サイドバーをサポート | 水平サイドバーをサポート | |
|---|---|---|---|
| オーバーレイ | |||
| プッシュ | |||
| スケールダウン | |||
| アンカバー | |||
| スライドアロング | |||
| スライドアウト |
方向
すべての方向のアニメーション
縦方向のみのアニメーション
複数表示
複数のサイドバーを同時に表示できるのは、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') ;
他のコンテンツによる表示/非表示のトリガー
利便性のために、attach events を呼び出すことでイベントをバインドできます。デフォルトでは、クリックするとサイドバーの表示/非表示が切り替わります。
$('.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なしで初期化された場合、このオプションを使用すると、requestAnimationFrame を使用してDOMの作成を延期します。 |
アニメーション
| 設定 | デフォルト | 説明 |
|---|---|---|
| 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要素を追加する必要がありました。最適なパフォーマンスを得るには、bodyコンテンツがpusher要素内にあることを確認してください。', movedSidebar : 'サイドバーを移動する必要がありました。最適なパフォーマンスを得るには、サイドバーとpusherがbodyタグの直接の子であることを確認してください。', overlay : 'overlay設定はサポートされなくなりました。代わりにanimation: overlayを使用してください', notFound : '指定されたセレクターに一致する要素がありませんでした' }
|
|