初めましての方もこんにちは、さだこえ (@sadako_a_) と申します。DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しています。 今記事では、主にステータスのデザインに焦点を当てて記事を執筆します。 1. ステータスとステートの違い 2. 色で伝えるステータス 3. アイコンで伝えるステータス 4. 実例 : YOUTRUSTの副業意欲ステータス 5. まとめ1. ステータスとステートの違いまずはステータスの定義について決めます。似たような単語として、ステータス(status)とステート(state)、どちらも状態を表す概念ですが、両者は微妙にニュアンスの違いをもっています。 ステータスは状態を示す箱のような概念で、ステートはその状態の固有要素とであると今記事では定義します。分かりやすく言い換えるとしたら、人間
結論 出力する部分をriot関数化しておけばおけ。 追記(2017/10/17 17:44) 単純な場合はclass={つけたいクラス名:真偽値}みたいな感じでいけます。 tempakyousuke さん感謝! 事情 Riot.jsでpaginationを実装していたときに、現在表示している部分だけ表示を切り替えたかった。が、うまくいかなかった。 classの指定を動的に切り替える方法が調べてもすぐ出てこなかったのでまとめ。 説明 <base_list> <ul class="pagination"> <li each={page in pages} class="page-item"> <a class="page-link" href="#" {page[0]} </a> </li> </ul> </base_list> var self = this; fun
Riot.jsでは各タグ内で様々な挙動を実装していくのですが、タグ間で動作を連携させたいときもあります。 そういった場合はobservableを使うとスムーズになります。 まず適当にタグをいくつか用意して、あるタグから他のタグへ何かしらの通知をしてみたいと思います。 動作サンプル (JSFiddle向けに少し記述を変更しています) 呼び出し元となるhtmlが次のようになります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Riot.js</title> </head> <body> <foo></foo> <bar></bar> <baz></baz> <script src="https://cdn.jsdelivr.net/riot/2.2/riot.min.js"></script> <script src=
たとえばログインが完了したときとか、データの保存に成功したときとか、 ユーザーに対して処理の結果を 簡易的にフィードバックしたいことがあるわけです。 Railsだとflashという仕組みで簡単にできますね。 flash - Railsドキュメント これをRiot.jsでもやりたい！ということでやってみました。 デザインにはおしゃれで有名なSemanticUIを使っていますが、bootstrapとかでも同じような書き方できるはず。SemanticUIおすすめ。 完成イメージ 環境 riot.js v3.0.0 SemanticUI v2.2.4 きましたv3！ メッセージを別タグにして読み込む ログイン完了したあととかって、だいたい画面遷移するじゃないですか。 なので通知メッセージはタグ横断で表示したい。 ということでまずはメッセージ部分をflash.tagとして切り出し、 index.ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く