Button (Blazor)
ページが準備中
恐れ入りますが、現在此のページは未完成の状態です。
ボタンは簡易な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コードが生成されるか、理解する必用がある。
概要
- コンポーネントのクラス
Button- スタイル生成専用Stylusミクスイン
generateButtonYDF_GUI_ComponentStyles- 用意済みのテーマ
Button.StandardThemes.regular- 標準（規定）
- 用意済みの幾何学的変形
Button.StandardGeometricVariations.regular- 標準（規定）
Button.StandardGeometricVariations.small- 小型
Button.StandardGeometricVariations.linkLike- リンクらしい
- 幾何学的修飾子
Button.GeometricModifiers.pillShape- 最大の面取り
Button.GeometricModifiers.squareShape- 正方形型
Button.GeometricModifiers.squareShapeUnlessOverflowed- オーバフローが発生しない限り正方形型
Button.GeometricModifiers.singleLine- 強制一行、オーバーフローの時切り詰め
Button.GeometricModifiers.noLeftBorderAndRoundings- 左側枠・面取り無し
Button.GeometricModifiers.noRightBorderAndRoundings- 右側枠・面取り無し
Button.GeometricModifiers.noTopBorderAndRoundings- 上部枠・面取り無し
Button.GeometricModifiers.noBottomBorderAndRoundings- 下部枠・面取り無し
Button.GeometricModifiers.noRoundings- 面取り無し
Button.GeometricModifiers.horizontallyShrinkable- 水平で圧縮可
- 用意済みの修飾的変形
Button.StandardDecorativeVariations.regular- 標準（規定）
Button.StandardDecorativeVariations.accented- 強調
Button.StandardDecorativeVariations.danger- 危険行動
Button.StandardDecorativeVariations.linkLike- リンクらしい
- 修飾的修飾子
Button__YDF.DecorativeModifiers.bordersDisguising- 大小変化無しで枠が無い効果
Button__YDF.DecorativeModifiers.noBackground- 塗りつぶし無し
Button__YDF.DecorativeModifiers.noBackgroundInDefaultState- 初期状態には塗りつぶし無し
- ローディングプレースホルダ
- 無し
Buttonクラス
Razorコンポーネントの引数
Button.Properties
{
- HTML_Type
- 日本語名
- HTML種類
- 型
- string
- 規定値
- Button.HTML_Types.regular
- 利用可能な選択肢
- Button.HTML_Types.regular
- Button.HTML_Types.submit
- Button.HTML_Types.inputButton
- Button.HTML_Types.inputSubmit
- Button.HTML_Types.inputReset
- label
- 日本語名
- キャプション
- 型
- 多形性
- いつundefinedは不可か
- `HTML_Type`プロパティーに`Button__YDF.HTML_Types.inputButton`か`Button__YDF.HTML_Types.inputSubmit`か`Button__YDF.HTML_Types.inputReset`が指定
- 選択肢
- 型
- string
- 最小文字数
- 1
- 型
- number
- 数の集合
- 実数
- accessibilityGuidance
- 日本語名
- アクセシビリティ技術専用説明文
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- mustOpenLinkInNewTab
- 日本語名
- URIを新しいタブみ開くべきか
- 型
- boolean
- 規定値
- false
- mustRequestNotFollowLinkForCrawlingToSearchEngine
- 日本語名
- 検索エンジンにランキングに指示されたURIの資源にランキングを共有しない事を頼むべきか
- 型
- boolean
- 規定値
- false
- disabled
- 日本語名
- 非活性状態の真偽
- 型
- boolean
- 規定値
- false
- toggled
- 日本語名
- 押したまま状態の真偽
- 型
- boolean
- 規定値
- false
- theme
- 日本語名
- テーマ
- 型
- string
- 規定値
- Button.StandardThemes.regular
- 利用可能な選択肢
- Button.StandardThemes.regular
- (`Button.defineCustomThemes(CustomThemesEnumeration)`で定義された中から何れか)
- areThemesCSS_ClassesCommon
- 日本語名
- テーマCSSクラスは共通真偽
- 型
- boolean
- 規定値
- false
- geometricVariation
- 日本語名
- 幾何学的変形
- 型
- string
- 規定値
- Button.StandardGeometricVariations.regular
- 利用可能な選択肢
- Button.StandardGeometricVariations.regular
- Button.StandardGeometricVariations.small
- Button.StandardGeometricVariations.linkLike
- (`Button.defineCustomGeometricVariations(CustomGeometricVariationsNamesEnumeration)`で定義された中から何れか)
- geometricModifiers
- 日本語名
- 幾何学的改変
- 型
- 指数配列
- 規定値
- []
- 配列の要素
- 型
- string
- 利用可能な選択肢
- Button.GeometricModifiers.pillShape
- Button.GeometricModifiers.squareShape
- Button.GeometricModifiers.squareShapeUnlessOverflowed
- Button.GeometricModifiers.singleLine
- Button.GeometricModifiers.noLeftBorderAndRoundings
- Button.GeometricModifiers.noRightBorderAndRoundings
- Button.GeometricModifiers.noTopBorderAndRoundings
- Button.GeometricModifiers.noBottomBorderAndRoundings
- Button.GeometricModifiers.noRoundings
- Button.GeometricModifiers.horizontallyShrinkable
- decorativeVariation
- 日本語名
- 修飾的変形
- 型
- string
- 規定値
- Button.StandardDecorativeVariations.regular
- 利用可能な選択肢
- Button.StandardDecorativeVariations.regular
- Button.StandardDecorativeVariations.accented
- Button.StandardDecorativeVariations.danger
- Button.StandardDecorativeVariations.linkLike
- (`Button.defineCustomDecorativeVariations(CustomDecorativeVariationsEnumeration)`で定義された中から何れか)
- decorativeModifiers
- 日本語名
- 修飾的修飾子
- 型
- 指数配列
- 規定値
- []
- 配列の要素
- 型
- string
- 利用可能な選択肢
- Button.DecorativeModifiers.bordersDisguising
- Button.DecorativeModifiers.noBackground
- Button.DecorativeModifiers.noBackgroundInDefaultState
- rootElementModifierCSS_Class
- 日本語名
- 根要素の修飾子CSSクラス
- 型
- string
- 必須
- いいえ
- rootElementModifierCSS_Classes
- 日本語名
- 根要素の修飾子CSSクラスの配列
- 型
- 指数配列
- 必須
- いいえ
- 配列の要素
- 型
- string
- rootElementSpaceSeparatedModifierCSS_Classes
- 日本語名
- 空白で区切られた根要素の修飾子CSSクラス一覧
- 型
- string
- 必須
- いいえ
- internalURI
- 日本語名
- 内部URI（ルート）
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- externalURI
- 日本語名
- 外部URI
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1