TypeScript + React で作る checkbox の checked と defaultChecked を型で「排他」にしてエラー検知しやすくした話 - Qiita
import React, { FC } from 'react'; interface Props { checked?: boolean; } const Checkbox: FC<Props> = ({ checked = false }) => ( <input type="checkbox" checked={checked} /> ); export default Checkbox; 超最低限で書くと、こんな感じになります！ checked という Props を用意して、それを <input> に流しています。 流れてくる boolean によって、 checkbox の check 状態を制御できるようになっているわけです。 外部から <Checkbox checked={true} /> とすれば「check された状態」になりますし、 <Checkbox checke
Selecto.js - Web上でドラッグで選択するUXを実現 MOONGIFT
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.
href=”mailto:”のリンクをクリックした際に選択式にするスクリプト・「mailgo」
mailgoは<a href="mailto:***">のようなmailtoリンクを、メーラw－立ち上げずにモーダルウィンドウを開いて選択式にするスクリプトです。少し前にMailtoUIというスクリプトの記事を書きましたが概ね同じ目的、挙動となっています。 こちらも動作サンプルを作ってみました。 動作サンプル アニメーションのエフェクトの有無や見た目だけで基本的にはMailtoUIと大差ありませんが違いはオプションとファイルサイズでしょうか。 まぁファイルサイズは極端に大きな差ではありませんが、性能は少し異なっていて、mailgoはスパム対策が施されています。上がmailtoリンクで下がスパム対策版になります。 対してMailtoUIはスパム対策こそされていないものの、モーダルウィンドウ内のボタンテキストの変更等がオプションで行えるようになっています。 需要があればいずれどちらもないものを
iro.js - 色をホイールで選択するUIライブラリ MOONGIFT
Web上で表現できる色は1600万色あります。ちょっとした違いを認識しながら色を選択するのは困難です。そこで色をピッキングする手法が様々に作られています。一つはサークル型のウィジェットです。 今回紹介するiro.jsはそんなサークル型のカラーピッカーをJavaScriptで提供するライブラリです。 iro.jsの使い方 表示したところです。見慣れたサークル型のカラーピッカーです。 色を変えると右側のHEX/RGB/HSLが変化します。 iro.jsは円形の色選択と、明暗をスライダーで変えられるようになっています。Webアプリケーションなどに組み込んでおくと便利に使える場面が多そうです。他にも様々な色選択を行うUIがありますが、iro.jsもその際の選択肢に加えられるでしょう。依存ライブラリもなく、SVGベースで軽快な動作が可能です。 iro.jsはJavaScript製のオープンソース・ソ
DOM要素をドラッグで複数選択するスクリプト・「selection.js」
selection.jsは要素の複数う選択を可能にするスクリプトです。非依存で単体で動作します。上サンプルのように、複数並べられたボックスをドラッグで選択する事が可能で、タッチデバイスにも対応させることも可能です。選択された要素にはclassが付与されます。ライセンスはMIT。 selection.js
multi.js - 複数選択のドロップダウンをリッチに変身 MOONGIFT
WebのフォームはHTML5でリッチになっていますが、それでもまだまだ標準では使い勝手がよくありません。とは言え、それを改善するためのライブラリも出てきていますので、積極的に取り入れていきましょう。 今回紹介するのはmulti.js、複数選択できるselectタグを格好良くしてくれるライブラリです。 multi.jsの使い方 multi.jsを使っていない場合はこうなります。正直選びづらいし、キーボードを組み合わせるのは面倒です。 それがこうなります。 絞り込みできます。選択すると右側のリストに追加されます。 すでに選ばれているものは色が薄くなります。 multi.jsを使うと複数選択するドロップダウンが一気に便利になります。大きさも変わるので、それに合わせてデザインを考える必要がありますが、ぴったりと当てはまるケースもありそうです。 multi.jsはJavaScript製のオープンソー
Selection Sharer - ブログやサイトのシェアをスムーズに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログ記事などを見ていて、気になった文章があったらシェアしたくなるでしょう。そんな時に文字列をコピーしてメーラーやソーシャルメディアを開いて、リンクなども貼り付けて…なんてやっていたら面倒でシェアを止めてしまうでしょう。 Mediumでは選択した文字の上にツールチップを表示してすぐにシェアできますが、同様の機能を提供するのがSelection Sharerです。 Selection Sharerの使い方 利用しているところ。文字列を選択するとツールチップが出ます。基本形はTwitterとメールです。 Twitterを選択すると選択した文字列を引用しつつ、リンクも追加されます。 メールの場合はHTML形式で、リンクなどが追加されます。 Selection Sharerを使えばユーザは
colorPicker – Advanced JavaScript Color Picker
ColorPicker (v. 1.0) and Colors ColorPicker v1.0 is a small (45.4KB, 19.5KB gZip) but very advanced framework independent javaScript color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-lay
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
