Yamato DaiwaFrontend (2.0.0-beta.4)
English
日本語
Русский

Button

ボタンは簡易な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コードが生成されるか、理解する必用がある。

要約

Pugミクスイン
Button--YDF
PugミクスインのLive template　(IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)
btn-ydf
スタイル生成専用Stylusミクスイン
provideButtonYDF_Component
用意済みのテーマ
Button__YDF.Themes.regular
標準（規定）
用意済みの幾何学的変形
Button__YDF.GeometricVariations.regular
標準（規定）
Button__YDF.GeometricVariations.small
小型
Button__YDF.GeometricVariations.linkLike
リンクらしい
幾何学的修飾子
Button__YDF.GeometricModifiers.pillShape
最大の面取り
Button__YDF.GeometricModifiers.squareShape
正方形型
Button__YDF.GeometricModifiers.squareShapeUnlessOverflowed
オーバフローが発生しない限り正方形型
Button__YDF.GeometricModifiers.singleLine
強制一行、オーバーフローの時切り詰め
Button__YDF.GeometricModifiers.noLeftBorderAndRoundings
左側枠・面取り無し
Button__YDF.GeometricModifiers.noRightBorderAndRoundings
右側枠・面取り無し
Button__YDF.GeometricModifiers.noTopBorderAndRoundings
上部枠・面取り無し
Button__YDF.GeometricModifiers.noBottomBorderAndRoundings
下部枠・面取り無し
Button__YDF.GeometricModifiers.noRoundings
面取り無し
Button__YDF.GeometricModifiers.horizontallyShrinkable
水平で圧縮可
用意済みの修飾的変形
Button__YDF.DecorativeVariations.regular
標準（規定）
Button__YDF.DecorativeVariations.accented
強調
Button__YDF.DecorativeVariations.danger
危険行動
Button__YDF.DecorativeVariations.linkLike
リンクらしい
修飾的修飾子
Button__YDF.DecorativeModifiers.bordersDisguising
大小変化無しで枠が無い効果
Button__YDF.DecorativeModifiers.noBackground
塗りつぶし無し
Button__YDF.DecorativeModifiers.noBackgroundInDefaultState
初期状態には塗りつぶし無し
ローディングプレースホルダ
Button--YDF__LoadingPlaceholder

利用

マークアップ

プロジェクトに含む方法

当GUIコンポーネントのマークアップは Pugミクスインの Button--YDFに依り確保される。 取り組み方法は 通常 即ちComponents.pugと言うPugファイルの 含め 。 但し其の前Functionality.pugファイルも含めなければいけないが、ページのテンプレート の場合、Functionality.pugは含め済みで、 重複し含めてるとエラーが発生するのだ。

© 2023 Yamato Daiwa Co., Ltd.