メモ semantic-ui

センタリング , 中央寄せ , center align

お手軽なのは「センタリング３」かなぁ。

センタリング1

<div class="ui equal width center aligned padded grid">
  <div class="row">
    <div class="column">
    内容
    </div>
  </div>
</div> 

センタリング2

<div class="ui one column centered grid">
  <div class="column">内容</div>
</div>

センタリング3

枠あり

<div class="ui center aligned segment">
  Center
</div>

枠なし

<div class="ui center aligned basic segment">
  Center
</div>

センタリング４（その他）

semanticに頼らない方法で自由に・・・

style="text-align:center;"

checkbox

forを必ず付けること。
（iphoneの画面表示でバグる）

<div class="ui checkbox">
   <input type="checkbox" id="tos" tabindex="0" class="hidden">
   <label for="tos">利用規約に同意します（<a href="/tos">確認</a>）</label>
</div>

サイドバー

class	動作
ui sidebar menu	必須
vertical	必須。aリンクを縦に並べる。
inverted	白黒反転させる
right	右側に出す
uncover	影を付けない

setting

setting	設定例	動作
dimPage	false	メニューが開いている時、メニュー以外の場所を暗くする
closable	false	メニューが開いている時、メニュー以外の場所をタッチして閉じない

.sidebar('setting', {
       'transition': 'overlay',
       'dimPage': false,
})

ドロップダウン

ドロップダウン動かない場合は、スクリプトが必須なのに無いという落とし穴にハマっている可能性があるので、チェック。

<script>
    $('.ui.dropdown')
            .dropdown();
</script>