alluserのブックマーク - はてなブックマーク

Angular2 RC5への更新とステート管理の変更、power-assertによるテストまで試す - undefined

概要以前触ってみたときはRC3でRC5が出たらもう一回触るかってことで、以前作ったサンプルのRC5への更新、ステート管理の変更、ユニットテストについて試してみた。以前の記事は以下。 blog.bokuweb.me RC5への更新情報収集をするとNgModuleが追加されたことが大きいようで、コンポーネントごとにdirectivesやpipesでの指定を行う必要がなくなり、stableでこの方法は廃止になるとのこと。現状、このサンプルにおいてはRC3のコードのまま動作するしwarningもでなかった。詳細は以下で確認すると良さそう。 ng2-info.github.io ng2-info.github.io NgModuleの導入まずは@NgModuleを使用してモジュールを作ることになる。前回コンポーネントごとに記述していたディレクティブはdeclarationsに記述することにな

alluser 2016/08/18

angular2

リンク

モダンCSSフレームワーク『Bulma』のReactコンポーネントセット『ReBulma』を作った - undefined

概要今年に入ってからのんびりTwitterClient(https://github.com/bokuweb/tsukiakari)を作っていて、こいつに使いたいなーと思いコンポーネントセット作った。といっても、まだかなり雑でまだまだやることがありそう。以下のような記事もあって様々なReactコンポーネントセットがあるんだが、あまり気にいるものがなく作ってみることにした。有名ところはMateri-UIあたりになるんだろうけど、正直自分はMaterialデザインの色とか見た目があまり好きじゃないし、Material-UIの挙動が?（現在は改善されてるかも）だったり、Styleのみを閉じたシンプルなものが欲しいというのも理由のひとつになっている。 qiita.com Bulma BulmaはFlexboxベースのモダンCSSフレームワークで現在V0.1.0RC。どんな感じなのかは以下の公式

alluser 2016/08/02

リンク

react-resizable-boxを作って公開しました - undefined

リサイズが可能なdiv、react-resizable-boxを作りました。こういうの。 Demo React-resizable-box example Repository github.com インストール npm i react-resizable-box 概要 Electronでリサイズ/ソートが可能なカラムを使いたいと思い、検索したところ同様のものはあったけど、使い辛かったので勉強も兼ねて作りました。具体的には以下のように使用する予定。以下はreact-motionとreact-resizable-boxで作ったデモ。 http://bokuweb.github.io/react-sorta ble-column-sandbox/ さいごに使えそうだったら使ってやってください。 github.com

alluser 2016/03/03

リンク

ソートとリサイズが可能なペインコンポーネントreact-sortable-paneを作った - undefined

今作ってるtwitterクライントでソートとリサイズができるコンポーネントが欲しかったので作った。作ったもの github.com デモ http://bokuweb.github.io/react-sorta ble-pane スクリーンショット使い方インストール npm i react-sorta ble-pane サンプル以下のように使用する。 <Sorta blePane margin={10}> <Pane width={200} height={500} style={style}> A </Pane> <Pane width={300} height={400} style={style}> B </Pane> </Sorta blePane> このコンポーネントについてもともとは以下のコンポーネントを作ったときのデモだったんだけど、今回コンポーネント化しといた。 blog

alluser 2016/03/03

リンク

吹き出しコンポーネントを作った - undefined

吹き出しコンポーネントが必要になって作った。作ったもの github.com デモ React-balloon example スクリーンショット使い方インストール npm i react-balloon サンプル以下のように使用する。 <Balloon start={{ box: { x: 100, y: 100, width: 300, height: 105 }, destination: { x: 400 , y: 400 }, }} style={{ borderRadius: '5px' }} backgroundColor="#ECF0F1" > Hello, World!! </Balloon> このコンポーネントについて吹き出し部分をSVGで描画し、ボックスとは独立して吹き出しの指し先も動かせるようにした。SVGはこれまでやろうやろうと思いながら触れてなかったけ