ページあたり1つの小さな広告しか表示しないと約束します。このメッセージを非表示にすると、再度表示されなくなりますのでご安心ください。
種類
ディマー
シンプルなディマーはコンテンツを表示しません。
// 左側のボタン $('.segment').dimmer('show'); // 右側のボタン $('.segment').dimmer('hide');
オーバーレイ可能なセクション
オーバーレイ可能なセクション
コンテンツディマー
ディマーはコンテンツを表示できます。
オーバーレイ可能なセクション
ディミングされたメッセージ！
ページディマー
ディマーはページに固定されるようにフォーマットできます。
こんにちは
状態
アクティブ
アクティブなディマーは、親コンテナをディミングします。
無効
無効なディマーはアクティブ化できません。
バリエーション
ディミング可能
ぼかし 2.0の新機能
ディミング可能な要素は、そのコンテンツをぼかすことができます。
配置
垂直方向の配置 2.3の新機能
ディマーのコンテンツは、上または下に配置できます。
タイトル
タイトル
ディマー
シンプルなディマー
ディマーはJavaScriptなしで制御できます。
反転ディマー
ディマーの色を反転するようにフォーマットできます。
例
ディマーイベント
ディマーは、イベントで可視性の変更をトリガーできます。
$('.event.example .image') .dimmer({ on: 'hover' }) ;
タイトル
ディマー内のローダー
ディマー内のローダーは、自動的に適切な色を使用してマッチします。
読み込み中
使用方法
表示
セクションまたはディマー自体に対して`.dimmer('show')`を呼び出すことで、ディマーを表示できます。ディミング可能なセクションをディミングすることを選択した場合、ディマーは自動的に作成されます。
// これらの2つは同じです $('.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から切り離し、ディマー内に再接続します。 |
| show | ディマーを表示します。 |
| hide | ディマーを非表示にします。 |
| toggle | 現在のディマーの可視性を切り替えます。 |
| opacityの設定 (opacity) | ディマーの不透明度を変更します。 |
| create | ディミング可能なコンテキストに新しいディマーを作成します。 |
| durationの取得 | 現在の可視性に応じて、showまたはhideイベントの現在のdurationを返します。 |
| 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 | ディマーを無効として設定します。 |
ディマー
ビヘイビア
| デフォルト | 説明 | |
|---|---|---|
| useFlex | true | ディマーでflexを使用するかどうか、またはレガシーポジショニングを使用するかどうか。 |
| 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 }
|
ディミングのアニメーション時間。整数を用いると、その値はshowとhide両方のアニメーションに適用されます。 |
| transition | フェード | メニューの出し入れ時に使用する名前付きトランジション。フェードとスライドダウンは、ui トランジションを含めることなく使用できます。 |
コールバック
| コンテキスト | 説明 | |
|---|---|---|
| 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 | ディマー | デバッグログで使用される名前。 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を無効にします。 |
| debug | False | 標準的なデバッグ出力をコンソールに提供します。 |
| performance | True | 標準的なデバッグ出力をコンソールに提供します。 |
| verbose | True | 補助的なデバッグ出力をコンソールに提供します。 |
| errors |
error : { method : 'The method you called is not defined.' }
|
コンソールに表示されるエラーメッセージ。 |