ページごとに小さな広告を1つ表示するだけだと約束します。このメッセージを非表示にすると、再度表示されなくなりますのでご安心ください。
空の状態の解決
Semantic 2.4では、コンテンツの読み込み処理のための新しいコンポーネントui placeholderと、コンテンツのスペースを確保するために使用される新しいタイプのsegmentであるui placeholder segmentが追加されました。
さらに、このリリースにはいくつかの重要なコンポーネントのアップデートが含まれています。
モーダルはハイブリッドフレックスサポートを使用するように再設計され、より複雑なユースケース（または古いブラウザ）の場合はJSポジショニングにフォールバックします。
ドロップダウンには、ユーザーがドロップダウンを空の状態にリセットできるようにする
clearable設定が追加されました。新しいUIコンポーネント
プレースホルダーセグメント
プレースホルダーセグメントを使用すると、コンテンツが表示される予定の場所にデザインでスペースを確保できます。これは、コンテンツが存在しない場合でも、ページがその意図された機能についてユーザーに促す必要がある場合に役立ちます。
まだユーザーが追加されていません
または
国を検索
新しい国を追加
新機能
クリア可能なドロップダウン
これで、ドロップダウンはclearable: trueを使用してコンテンツをクリアできるようになります。
韓国
表示
現在提供されているコース。
CSS
Flexboxモーダルの改良
フレックスボックスは2.3.0で導入されましたが、高度なユースケースを妨げる可能性のある制限がありました。たとえば、フレックスボックスモーダルはdetachable: falseを使用し、ディマーフレックスコンテナ内に直接ないモーダルをサポートしていませんでした。また、一部のフレックスブラウザ（IE11）は、フレックスコンテナ内の絶対配置された要素をサポートしていないため、そのような場合、複数のオーバーラップするモーダルを使用できませんでした。
2.4.0では、フレックスと互換性のないブラウザまたはレイアウトに対して、JavaScriptによる配置にフォールバックするハイブリッドフレックスシステムを導入することで、この問題を解決しました。
新しいアプローチ
長期にわたるパッチの後、Semantic UI 2.3は、このプロジェクトに重要な機能変更が戻ってきたことを示しています。
今後のSemanticリリースでは、より頻繁に、しかしより小さな変更セットでリリースすることで、ユーザーがアップグレードし、グローバルな変更に適応しやすくなります。
新機能
Font Awesome 5.0と改善されたアイコン検索
2.3では、アイコンにFont Awesome 5.0.6の完全なポート（929個のアイコンを含む）が含まれるようになりました。
アイコンカテゴリは、Font Awesomeのドキュメントのアイコンカテゴリと一致するようになったため、ドキュメント間でアイコンを見つけやすくなりました。
スマイル
スマイルアウトライン
ハンドロック
ハンドペーパー
ハンドシザーズ
Semantic UIのアイコンドキュメントには、グローバルなアイコン検索と、HTMLへの簡単なコピーとペーストアクセスが含まれるようになりました。
Flexboxモーダルとディマー
Semantic UI 2.3には、垂直方向の中央揃えのための非JSフレックスボックス配置を含むモーダルの書き直しが含まれています。コンテンツの高さが変更されても、再中央揃えのために$('.ui.modal').modal('refresh')を呼び出す必要はもうありません。
さらに、新しい設定centered: falseにより、内部が動的であり、コンテンツが垂直方向にシフトしないようにしたい場合に、上部に揃えられたモーダルを作成しやすくなります。
上部に揃えられたモーダル
$('.ui.special.modal') .modal({ centered: false }) .modal('attach events', '.modal.example .button') ;
新しいトランジション
トランジションには、zoomとglowが含まれるようになりました。グローは、ページ上の要素を強調表示するのに役立ちます。
$('.autumn.leaf') .transition('zoom') ;
$('.autumn.leaf') .transition('glow') ;
グローバルフォントウェイト変数
テーマは、@boldと@normalの2つのグローバル変数を使用するようになったため、より複雑なフォントスタックでフォントウェイトを変更しやすくなりました。
/* カスタムフォントウェイトを使用 */ @bold: 600; @normal: 400;
ローカルカテゴリ検索
APIコールバックを追加しなくても、sourceオプションを使用してカテゴリ検索を使用できるようになりました。
var categoryContent = [ { category: 'South America', title: 'Brazil' }, { category: 'South America', title: 'Peru' }, { category: 'North America', title: 'Canada' }, { category: 'Asia', title: 'South Korea' }, { category: 'Asia', title: 'Japan' }, { category: 'Asia', title: 'China' }, { category: 'Europe', title: 'Denmark' }, { category: 'Europe', title: 'England' }, { category: 'Europe', title: 'France' }, { category: 'Europe', title: 'Germany' }, { category: 'Africa', title: 'Ethiopia' }, { category: 'Africa', title: 'Nigeria' }, { category: 'Africa', title: 'Zimbabwe' }, ]; $('.local-category.example .ui.search') .search({ type: 'category', source: categoryContent, searchFields: [ 'title', 'category' ] }) ;
小さなポップアップの矢印の位置合わせ
Semantic ポップアップは、ポップアップの矢印を水平方向に揃える方が、ポップアップのエッジを一致させるよりも適切な場合を検出するようになりました。
$('.centering.example .avatar.image').popup();
ポップアップは複数の座標系をサポート
ポップアップは、2つの異なる座標系を持つ要素を正しく配置できるようになりました。これらは通常、CSSプロパティtransformまたはpositionを持つ親要素があることによって発生します。
ボタンはこちらにあります
ポップアップはこちらにあります
テスト
このポップアップは、DOM要素を移動してポップアップを同じ座標系に移動することなく、正しく表示されるようになりました。
ボタンはこちらにあります
ポップアップはこちらにあります
テスト
このポップアップは、DOM要素を移動してポップアップを同じ座標系に移動することなく、正しく表示されるようになりました。
/* アクティブ化要素は、異なる配置コンテキストを持つ#oneの中にあります */ #one { display: block; position: relative; padding: 50px 100px; background-color: #F0F0F0; } /* ポップアップは、position relativeを持つtwoの中にあります（別の配置コンテキストを作成します） */ #two { display: block; background-color: #E2EAE4; position: relative; top: 10px; padding: 50px 8px; }
$('.complex-popup.example .ui.button') .popup({ movePopup: false, popup: $('.complex-popup.example .popup') }) ;
新しいマッチングオプション
さらに、検索には、ドロップダウンで使用できるオプションと同様に、3層のマッチした結果が含まれるようになりました。ファジー検索は、新しいデフォルトのfullTextSearch: 'exact'によってオフになっています。
クエリは、フィールドの先頭と完全に一致します。
クエリは、フィールドの任意の部分と一致します。
新規
クエリは、フィールドと「ファジー」に一致します。
$('.ui.search') .search({ fullTextSearch: 'exact' // 完全一致のみをマッチングします（ファジーマッチングはありません） }) ;
数字で表す
2.2は、約半年のアップデート、多くの新機能、およびバグ修正を表しています。
バグの完全なリスト、対応するissueスレッド、および修正については、リリースノートを参照してください。
リリースノートプロジェクトの変更点
重大なバグ修正
2.2では、多くのバグ修正が導入されています。完全なリストについては、リリースノートをご覧ください。いくつかの重大なバグのハイライトを以下に示します。
重大なバグリストを表示
すべてのUI - オブジェクトリテラルとして複数の設定を追加するために
component('setting, {})を使用する場合（例：error: {}）、既存のオブジェクトを置き換えるのではなく、ディープコピーで拡張されるようになりました。
API -
beforeSendは、コールバックでreturn false;が使用された場合、リクエストを正しくキャンセルできませんでした。
API -
cache: 'local'は、場合によってはローカルストレージにキャッシュされた結果を返せませんでした。
Divider -
水平方向のDividerでは、「g」のようなディセンダーが切り取られていました。
Dropdown -
forceSelectionは、複数選択のドロップダウンで値を自動的に選択するようになりました。userAdditions設定を使用する場合、現在入力されている値を自動的にトークン化するようになりました。
Dropdown -
検索選択で、左矢印を使用して入力された検索文字列を戻ることができませんでした。
Dropdown - JavaScriptのDOMメタデータを使用して設定された値が、メッセージまたはユーザー追加によって
refreshがトリガーされたときにクリアされる問題を修正しました。
フォーム検証/Dropdown -
検索ドロップダウンで「Enter」キーを使用すると、フォームが送信される可能性がありました。
フォーム検証 - 拡張文字セットを含む一部の外国のメールアドレスが原因でメール検証が失敗する問題を修正しました。
フォーム検証 -
on: blurでフィールドを再検証すると、まだ操作されていないフィールドが検証される可能性がありました。
フォーム -
(x)フィールドと等幅フィールドで、中央の行が左右のパディングを%幅に含めるため、わずかに小さくなっていた問題を修正しました。（エッジは片側のパディングのみです）。フィールドグループは、代わりに負のマージンを使用するようになりました。
Popup - DOMから削除されたPopup内の要素（複数選択のラベルをクリックするなど）をクリックすると、Popupが閉じられる問題を修正しました。
Rail -
close railとvery close railの幅が、pxとemが混在した単位の変数の追加によって間違っていた問題を修正しました。
Search - 以前のXHRクエリが、リクエストの待ち時間によっては次のクエリが失敗する可能性があるバグを修正しました。
Search -
onResultがfalseを返しても、検索メニューが非表示にならない問題を修正しました。空の結果メッセージをクリックしても、検索結果が閉じなくなりました。
Sticky/Visibility - DOMコンテキストから削除された場合に
destroyを使用して要素を削除するためにMutationObserverを追加し、潜在的なメモリリークを修正しました。
Video -
.video('change')の動作がビデオを正しく変更しない問題を修正しました。新機能
CSSのみのツールチップ
2.2には、任意の要素のdata-tooltipプロパティを使用してJS初期化なしで動作するCSSのみのポップアップが含まれています。CSSツールチップは、反転と指定された位置決めもサポートしています。
新しいアイコン
Semantic UI 2.2には、50個以上の新しいアイコンを含む最新バージョンのFont Awesomeが含まれています。新しいアイコンの完全な内訳については、Font Awesomeのリストを確認してください。
車椅子
アメリカ手話通訳(ASL)
補聴システム
音声解説
視覚障害者
点字
難聴
弱視
手話
ユニバーサルアクセス
音量調整電話
高速更新可能なプログレスバー
2.2のプログレスバーは、高速な更新イベントを処理するように再コード化されました。
開発者は、アニメーションが途切れたり、イージングトゥイーンが不自然に発生したりすることなく、短い間隔で更新をトリガーできるようになりました。
ボタンを押すのを待っています
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; clearInterval(window.fakeProgress) $progress.progress('reset'); // updates every 10ms until complete window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // stop incrementing when complete if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;メモリリークの削減
Sticky、visibility、popup、およびdropdownモジュールは、ウィンドウスクロールの変化を検出するためなどに、初期化時にwindowとbodyにイベントをアタッチできますが、追加のMutationObserverを使用してDOMから削除されたかどうかを判断し、自動的にdestroy動作を実行するようになりました。
これにより、コンポーネントの親要素が、要素がdestroy動作によって適切に削除されることなく削除された場合のメモリリークを防ぐことができます。
非アクティブ
このセグメントには、画面上に表示されたときに上のボタンを「アクティブ」にするためにアタッチされたvisibilityイベントがあります。
$('.memory.example .demo.segment') .visibility({ onOnScreen: function() { // this will no longer fire even though element was removed indirectly $('.memory.example .display.segment').html('This is active'); } }) ; // button will remove parent of visibility element and callback will stop firing automatically $('.memory.example .ui.button') .on('click', function() { $('.memory.example .display.segment').html('De-activated'); $('.memory.example .wrapper') .remove() ; }) ;従属フォーム検証
フォームフィールドの検証では、dependsプロパティを指定できるようになりました。これにより、チェックボックスや入力などの別のフィールドが選択された場合にのみ検証が行われます。
$('.depends.example .ui.form') .form({ onSuccess: function() { alert('No form problems'); return false; }, fields: { yearsPracticed: { identifier : 'yearsPracticed', depends : 'isDoctor', rules : [ { type : 'empty', prompt : 'Please enter the number of years you have been a doctor' } ] } } }) ;高速なドロップダウン選択
ドロップダウンを更新して、ドロップダウンを含むフォームを簡単に操作し、より直感的な選択コントロールを提供しました。
複数選択ドロップダウンでは、グリフ幅の計算に基づいた推定長ではなく、実際にレンダリングされたピクセルに基づいた改行アルゴリズムを使用しているため、以前よりも多くの選択肢を1行に収めることができます。
ドロップダウンでは、「Enter」キーを押さなくてもキーボードで選択が変更されるようになりました。これにより、ユーザーは各フィールド入力後に「Enter」キーを押してから「Tab」キーを押す必要がなくなり、追加のキーストロークを節約できます。
すべてのドロップダウンメニューは、キーボードの文字ショートカットをサポートするようになりました。たとえば、「C」キーを押すと、検索選択ドロップダウンを使用しなくても、ドロップダウンリストの「California」にジャンプし、もう一度押すと「Colorado」にジャンプできます。
基本的なボタンの追加
primary、secondary、positive、およびnegativeのbasicボタンを追加しました。
ポップアップの境界とスクロールコンテキスト
ポップアップには、ポップアップが別のセクションの境界を超えないように指定できる新しい設定boundaryが含まれるようになりました。これは、複雑なペインレイアウトで役立ちます。
さらに、ポップアップではスクロールコンテキストを指定できるようになりました。これにより、ウィンドウ以外のスクロールコンテナでも、スクロール時にクリックされたポップアップを非表示にすることができます。
$('.boundary.example .button') .popup({ boundary: '.boundary.example .segment' }) ;通常、このポップアップはデフォルトの位置中央上に表示されますが、セグメントの境界を超えるため、セグメント内にポップアップを配置できる位置が見つかるまで、他の利用可能な位置を検索します。
新しい設定
いくつかのユースケースでより詳細な制御を提供するために、コンポーネントに多くの新しい設定を追加しました。
ドロップダウン
| selectOnKeydown | キーボードショートカットでドロップダウンのアクティブな選択を変更するかどうか。ユーザーがフィールドからタブアウトする前に選択を確認するために「Enter」キーを押す必要がなくなります（これにより、キーストロークが1回削減されます）。 |
| allowReselection | trueに設定すると、同じオプションを再選択した場合でもonChangeをトリガーできます。 |
| fullTextSearch | trueに設定すると、文字列の任意の部分を検索できます。exactに設定すると、ドロップダウンのあいまい検索が無効になります。 |
| hideAdditions | trueに設定すると、「カスタムの選択肢を追加」という特別なドロップダウンメッセージをトリガーすることなく、カスタムユーザー追加を許可できます。これは、デフォルトで有効になっています。 |
| minCharacters | フィルタリングされた結果を表示し始めるために必要な最小文字数。 |
ポップアップ
| boundary | ポップアップが位置決め時に決して超えないセレクター、またはDOM要素。 |
| scrollContext | ユーザーがスクロールしたかどうかを判断するために使用するセレクターまたはDOM要素。 |
| observeChanges | メモリリークを避けるために、ポップアップがページからの自身の削除を自動的に監視するかどうか。 |
検索
| selectFirstResult | 検索結果が表示された後、最初の検索結果要素を選択するかどうか。 |
| showNoResults | 検索結果が返されない場合にメッセージを表示するかどうか。 |
表示
| zIndex | type: 'fixed'で使用されるz-indexを指定できます。 |
| onFixed | コンテンツがページに固定されたときに発生する、type: 'fixed'で使用されるコールバック。 |
| onUnfixed | コンテンツがページに固定されたときに発生する、type: 'fixed'で使用されるコールバック。 |
| onLoaded | コンテンツが読み込まれたときに発生する、type: 'image'で使用されるコールバック。 |
| onAllLoaded | 同時に初期化されたすべての画像が読み込まれたときに発生する、type: 'image'で使用されるコールバック。 |
タブ
| cacheType | htmlに設定すると、読み込み後にタブのHTMLをキャッシュし、まったく同じHTMLで再読み込みします。responseに設定すると、サーバーのレスポンスをキャッシュし、同じコンテンツで読み込みイベントが発生できるようにします。 |
| deactivate | siblingsに設定すると、選択されたタブアクティベーターの兄弟であるDOM要素のみを非アクティブ化します。allは、同時に初期化された他のすべての要素を非アクティブ化します。 |
形状
| width | nextに設定すると、形状のアニメーション中に次のsideのサイズを使用します。initialに設定すると、初期化時の形状のサイズを使用します。特定のピクセル幅に設定すると、サイズをその幅に強制します。 |
| height | nextに設定すると、形状のアニメーション中に次のsideのサイズを使用します。initialに設定すると、初期化時の形状のサイズを使用します。特定のピクセル高さに設定すると、サイズをその高さに強制します。 |
集計
2.1は、多くの新機能と既存のUIを堅牢にするためのアップデートを含め、約2ヶ月間の作業を要約したものです。
アップデートの完全なリストを見るには、リリースノートを確認してください
ラベル付きボタン
ラベル付きボタンは、ボタンと一緒に集計を表示するのに役立つデザインパターンです。
ラベル付きボタンはあらゆる種類のラベルと互換性がありますが、basic labelと組み合わせると見栄えが良くなります。
基本ラベル
邪魔にならない新しいスタイルbasic labelを追加しました。これは他のすべてのラベルのバリエーションと互換性があり、複雑さを軽減します。
Elliot 赤いポインティング 青
これは伸縮グリッド列です。このセグメントは常にタブの高さに一致します。
反転色メニュー
反転メニューは、個々のitemの色をサポートするようになりました。
反転可能なグリッド列
グリッドは、デバイスごとに列のフローを反転させることをサポートするようになりました。これは、列が小さな画面で画面の反対側に表示される必要がある場合に役立ちます。
グリッドの反転は、分割またはセル化など、列順序に固有のバリエーションとの互換性も考慮して設計されています。
コンピューター優先
タブレット4番目
タブレット4番目
コンピューター2番目
タブレット3番目
タブレット3番目
コンピューター3番目
タブレット2番目
タブレット2番目
コンピューター4番目
タブレット優先
タブレット優先
スタック可能なカード
カードには、モバイルで全幅で表示されるstackableバリエーションがあります。
Elliot
いいね17件 コメント3件
Elliot
いいね17件 コメント3件
Elliot
いいね17件 コメント3件
Elliot
いいね17件 コメント3件
固定テーブル
テーブルは、table-layout: fixedを使用するためのバリエーションを含めるようになりました。これは、サイズに基づいて列幅を調整しません。
これにより、均一にフォーマットされたコンテンツでデータをよりきれいに表示できます。
固定テーブルは、single lineで使用する場合、text-overflow: ellipsisを使用してコンテンツの折りたたみもサポートします。
| 名前 | ステータス | 性別 |
|---|---|---|
| ジョン | 承認済み | 男性 |
| ジェイミー | 承認済み | 男性 |
| ジル | 拒否済み | 女性 |
固定テーブル
| 名前 | ステータス | 説明 |
|---|---|---|
| ジョン | 承認済み | これは長すぎて収まりません、申し訳ありません |
| ジェイミー | 承認済み | 短い説明 |
| ジル | 拒否済み | 短い説明 |
新しい動作
完全にカスタマイズ可能なJSON
2.1では、リモートデータを使用するすべてのコンポーネントで、期待されるJSONプロパティ名を変更するためのfields配列を指定できます。これにより、データ構造を変更するためのonResponseコールバックを指定する手間が省けます。
$('.ui.search') .search({ apiSettings: { url: '//api.github.com/search/repositories?q={query}' }, fields: { results : 'items', title : 'name', url : 'html_url' } }) ;
fieldsは、ローカル検索でも使用して、特殊な検索ソースの処理を簡素化できます。
$('.ui.search') .search({ searchFields: ['pickle'], fields: { title : 'mustard' }, source: [ { mustard: 'Title #1', pickle: 'thing' }, { mustard: 'Title #2', pickle: 'another thing' }, { mustard: 'Title #3', pickle: 'thing 100' } ] }) ;
クレジットカード検証
支払いに対して新しい検証ルールを追加しました。これらは、ルーンとルーン以外のカード番号で機能します。特定のクレジットカードのみを受け付ける場合は、それも指定できます。
$('.payment.example form') .form({ on: 'blur', inline: true, fields: { card: { identifier : 'card', rules: [ { type : 'creditCard', prompt : '有効なクレジットカード番号を入力してください' } ] }, exactCard: { identifier : 'exact-card', rules: [ { type : 'creditCard[visa,amex]', prompt : 'VISAまたはAmexカードを入力してください' } ] } } }) ;
キャンセル可能なチェックボックス
チェックボックスには、beforeChecked、beforeUnchecked、beforeDeterminate、beforeIndeterminateの4つの新しいコールバックが含まれるようになりました。これらのコールバックからfalseを返すことで、アクションの実行をキャンセルできます。
$('.cancel.example .ui.checkbox') .checkbox({ beforeChecked: function() { var luckyPerson = (Math.random() < 0.5) ; return luckyPerson; } }) ;
テーマのアップデート
グローバルフォームフォーカス
すべてのコンポーネントでフォームフォーカスの色を変更するためのグローバル変数が追加されました。デフォルトのテーマでは、選択を示すために薄い青色を使用するようになりました。
更新されたフォーム検証
フォーム検証は、検証プロンプトにbasic labelを使用するようになりました。
色付きの基本ボタン
色付きの基本ボタンは、hoverなしで色が付けられるようになり、ほとんどのサイトでの一般的な使用方法とスタイルがより似てきました。
ラベル付きアイコンメニュー
水平方向のlabeled icon menuは、スタックされたアイコンを使用するようになり、一般的なアイコンメニューの使用方法とより調和するようになりました。
はじめに
悪魔は細部に宿る
2.0は、プロジェクトに膨大な数の変更をもたらします。
1ページで網羅するには多すぎるため、2.0で使用できる新機能の例をいくつかご紹介しました。
変更点の完全なリストを見るには、プロジェクトのリリースノートを確認してください。
リリースノートを見るグローバルな変更
あらゆるものをFlexboxで
Flexboxを使用すると、要素が利用可能なスペースに合わせて直感的にサイズ変更されるため、多くの複雑なレイアウトがはるかにシンプルになります。
13個のコンポーネント：フォーム、グリッド、メニュー、メッセージ、ボタン、セグメント、ステップ、ドロップダウン、モーダル、フィード、統計、カード、アイテムは、現在、配置にflexを使用しています。
完全なスペクトル
Semanticには、12個の命名された色が含まれるようになりました。これは、ほとんどの言語で色を区別するのに十分な数です。2.0の新機能は、オリーブ、バイオレット、ブラウン、グレーです。
グレー 赤 オレンジ 黄 オリーブ 緑 ティール詳細
青 バイオレット 紫 ピンク
茶色
新しいデフォルトテーマ
2.0では、すべてのコンポーネントが刷新されました。スタイルはわずかにネガティブスペースを増やし、いくつかの特異なデザインタッチが削除されました。
より正確なEM値
2.0ではEMサイズの計算が改善され、すべての値が正確なピクセル値に丸められるようになりました。これにより、垂直方向の配置における丸め誤差など、一般的な相対サイズ設定における落とし穴が解消されます。
Em変数は、@relative4pxなどの新しくグローバルに計算されたem比率を使用して、ルートemサイズでピクセル値を表すようになりました。これにより、サイズ設定を行う際に、コンポーネントに分かりにくい小数点以下の値や分数値が含まれることがなくなります。
グリッド
グリッドの自動生成
新しいequal width のバリエーションでは、利用可能な幅を列に自動的に分割することで、列幅を自動調整します。
列に幅を指定した場合、他の列は利用可能なスペースに合わせて調整されます。
ドロップダウン
複数選択
複数選択ドロップダウンが利用可能になり、標準的なHTML selectから自動的に生成できます。
ドロップダウンはすべて、pagedown、delete、shift+left、ctrl+clickなどの高度なキーボードショートカットと、項目の最初の文字を使った選択をサポートするようになりました。
さらに、ドロップダウンの下にビューポート内に十分なスペースがない場合、ドロップダウンは自動的に上方向に開きます。
ユーザータグ付け
単一選択と複数選択のすべてのドロップダウンで、ユーザータグ付けがサポートされるようになりました。値はデリミタで自動的に区切られ、非表示の入力フィールドに配置するか、既存のselect要素を拡張できます。
$('.ui.dropdown') .dropdown({ allowAdditions: true }) ;
スキル
スキル
リモートデータ
すべてのドロップダウンで、リモートデータの読み込みがサポートされるようになりました。リモートから取得された選択された名前と値のペアはsessionStorageに保存されるため、ページを更新した後でも、選択された値が正しく再表示されます。
// アプリケーション内のある場所で $.api.settings.api = { queryTags: '//api.semantic-ui.com/tags/{query}' }; $('.ui.dropdown') .dropdown({ apiSettings: { action: 'queryTags' } }) ;
1つ選択してください…
選択してください…
スクロールメニュー
スクロールメニューとネストされたメニューがサポートされるようになりました。
ネストされたメニューに選択肢をリストしても、通常のメニューと同じキーボードショートカットとフィルタリングがすべて使用できます。
高度なショートカット
ドロップダウンでは、page downやpage upなどの高度なショートカット、最初の文字を押して選択にスクロールする機能（例：「N」でニューヨーク）、shift+left/rightによるグループ選択、ctrl+clickによるグループの変更などがサポートされるようになりました。
その他多数
ドロップダウンは、以下を含む多くの新機能をサポートしています。
- 複数選択の場合、最大選択数がサポートされます。
- ミューテーションオブザーバーは、メニューまたはメニューが生成される要素の変更を監視し、選択肢を自動的に更新するようになりました。
- ドロップダウンで、カスタムテンプレートによるエラーメッセージがサポートされるようになりました。
API
ローカルキャッシュ
APIはsessionStorageキャッシュをサポートするようになりました。この設定により、URLへの繰り返しリクエストはユーザーのセッション全体で瞬時に結果を返すため、検索などのコンポーネントのパフォーマンスが大幅に向上します。
ページを更新して同じ文字を検索してみてください。サーバーとのやり取りなしに、結果が瞬時に表示されます。
$('.ui.dropdown') .dropdown({ apiSettings: { cache : 'local', url: '//api.semantic-ui.com/tags/{query}' } }) ;
1つ選択してください…
任意のAPIを変換
APIでは、新しいコールバックonResponseを使用して、サーバーのJSONレスポンスを調整できるようになりました。これにより、サードパーティのAPIをローカルデータの要件に合わせて再構成できます。
$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // GitHub APIレスポンスを変換して検索で動作するようにする $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // 新しい言語カテゴリを作成する if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // カテゴリに結果を追加する response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, url: '//api.github.com/search/repositories?q={query}' } })
モックレスポンス
APIはモックレスポンスをサポートするようになり、レスポンスが事前にどのように返されるかを指定できるようになりました。
$('.toggle.button') .api({ // 読み込みに時間がかかったと仮定する loadingDuration: 500, // このボタンをこのJSONを要求するものとして扱う mockResponse: { success: true } }) // 成功したレスポンスはテキストの状態変更をトリガーする .state({ text: { inactive : 'Off', active : 'On' } }) ;
カスタムバックエンド
APIは、APIリクエストを解決するためのカスタム非同期コールバックを使用できるようになりました。これにより、他のカスタムXHRバックエンドやローカルデータを使用してリクエストを解決できます。
$('.toggle.button') .api({ // 0.5秒待ってから試してみる mockResponseAsync: function(settings, callback) { var luckyPerson = (Math.random() < 0.5), response = (luckyPerson) ? { success: true } : { success: false, message: 'You are not lucky' } ; // 非同期タスクであることをシミュレートする setTimeout(function() { callback(response); }, 500); }, successTest: function(response) { return response && response.success; }, onFailure: function (response) { alert(response.message); } }) .state({ text: { inactive : 'Off', active : 'On' } }) ;
フォーム
オートコンプリート
フォームには、ブラウザのオートコンプリートされたフォームフィールドのカスタムスタイルが含まれるようになりました。オートコンプリートされたフィールドは、フォーカスされたオートコンプリートと、エラー状態のオートコンプリートスタイルも指定できます。
ディマー
ぼかしディマー
ディマーにblurring（ぼかし）バリエーションが含まれるようになりました。
他のコンポーネントは、ぼかしディマーを使用してオーバーレイコンテンツを追加できます。モーダルにも、生成されたディマーに影響を与えるぼかし設定が含まれています。
チェックボックス
セグメント
複雑なレイアウト
グループはflexboxを使用するようになり、ネストを完全にサポートします。
上
ネストされた上
ネストされた中央
ネストされた下
中央
左
中央
右
下
メニュー
より良い連携
メニューでは、ドロップダウン、検索、ボタン、入力などの他のコンポーネントとの連携が向上しました。
$('.ui.menu .browse.item') .popup({ popup : '.classes.popup', hoverable : true, position : 'bottom left', delay : { show: 300, hide: 800 } }) ;
$('.ui.search') .search({ type: 'category', apiSettings: { action: 'categorySearch' } }) ;
表示
シンプルなスティッキー
Visibility APIには、スティッキーコンテンツに役立つショートカットが含まれるようになりました。要素が渡されると、プレースホルダーが自動的に追加され、他のコンテンツの位置がずれることがなくなります。
さらに、visibilityとstickyは、1.0よりもはるかにパフォーマンスの高いパブリッシュ/サブスクライブパターンを使用するように書き直されました。
$('.overlay') .visibility({ type : 'fixed', offset : 15 // 画面上部から少しスペースを開ける }) ;
.overlay { background-color: #FFFFFF; padding: 0.5em; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: all 0.5s ease; background: transparent; } /* スタイルを変更 */ .fixed.overlay { position: fixed; padding: 1em; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
