Button (React)

ボタンは簡易なGUIコンポーネントの評判が有り、新しいUI/UXフレームワークの勉強の際ボタンから始められる事が多い。 然し、表記入りの四角と言う地味な外見を持っても、当コンポーネントの簡易性は非常に虚妄だ。

ボタンの外見を持っているのHTML要素は３つも存在し、即ち button、inputとa、 但し何方の要素にせよ取り扱いの際考慮しなければいけない特質が有るのだ。 例えば、子要素が持てるのはbuttonとa だけだが、disabled属性が持てるのは buttonとinputのみ。

スタイルならどうだろうか。 枠の色や拝礼を変える事は簡単ではあるが、実際の市場の需要に近づけば近づく程、方程式の変数が急増しているのだ。 先ずは、操作専用の要素として、ボタンはhover、focus、 active、disabledの様な状態が有る。 全ての状態が視覚的に異ならなければいけなく、しかもテーマが有れば全テーマに対応しないといけない （YDFの意味でのテーマにせよ、YDFでない意味での テーマにせよ）。 同時に発生しない状態も有り、同時に発生出来る状態も有るので、対立が発生しない様にスタイルを定義しなければいけない。

表記がボタンに入れ切れなければ、どう成るだろうか？ 表記に加えてSVGアイコンを追加しない時、どうだろうか？ アイコンに依って大小が違い、SVGキャンバス内の余白の異なるのだ！ ボタンの状態に応じて、アイコンの色を変えないといけに時も有るが、色変更方法はアイコンのSVGコードに依って異なるのだ！ 表記が無い時、アイコンを正方形にしたければどうだろうか？ アイコンのみのボタンはリテラシーが低い利用者経ちにとって不親切はないので、非推薦だが、残念ながら依頼側に表記を追加する事を説得させる事が上手く行くとは限らない。 上記の「どうだろうか」を考慮すればする程、出力のCSSコード膨らんでいき、複雑に成りつつある。

YDFの開発側の方から、上記の複雑さをなるべく分かりやすいAPIにカプセル化しようとしていた。 とは言え、アクセサビリチや必用に応じて検索最適化を考慮した妥当なHTMLコードの作成の際、 どういったHTMLコードが生成されるか、理解する必用がある。

• 要約

要約

コンポーネントのクラス

Badge

スタイル生成専用Stylusミクスイン

provideBadgeYDF_Component

用意済みのテーマ

Badge.Themes.regular

標準（規定）

用意済みの幾何学的変形

Badge.GeometricVariations.regular

標準（規定）

Badge.GeometricVariations.small

小型

幾何学的修飾子

Badge.GeometricModifiers.pillShape

最大の面取り

Badge.GeometricModifiers.singleLine

強制一行、オーバーフローの時切り詰め

用意済みの修飾的変形

Badge.DecorativeVariations.veryCatchyBright

Badge.DecorativeVariations.catchyBright

Badge.DecorativeVariations.modestlyCatchyBright

Badge.DecorativeVariations.neutralBright

Badge.DecorativeVariations.modestlyCalmingBright

Badge.DecorativeVariations.calmingBright

Badge.DecorativeVariations.achromaticBright

Badge.DecorativeVariations.veryCatchyPastel

Badge.DecorativeVariations.catchyPastel

Badge.DecorativeVariations.modestlyCatchyPastel

Badge.DecorativeVariations.neutralPastel

Badge.DecorativeVariations.modestlyCalmingPastel

Badge.DecorativeVariations.calmingPastel

Badge.DecorativeVariations.achromaticPastel

修飾的修飾子

Badge__YDF.DecorativeModifiers.bordersDisguising

大小変化無しで枠が無い効果

Badge__YDF.DecorativeModifiers.noBackground

塗りつぶし無し

ローディングプレースホルダ

無し