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ファミリー結合開発環境専用正式的プラグイン)
オートコンプリート系
Button--YDF
省略
btn-ydf
Loading Placeholder
Button--YDF-LoadingPlaceholder
スタイル生成専用Stylusミクスイン
generateButtonYDF_GUI_ComponentStyles
用意済みのテーマ
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
初期状態には塗りつぶし無し
ローディングプレースホルダ
無し

利用

マークアップ

プロジェクトに含む方法

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

Pug混入のButton--YDF

Button--YDF
(
1パラメーター目
必須
一般技術名
properties
日本語名
プロパティ揃い
型
Properties
):void
Button.propertiesSpecification
{
HTML_Type
日本語名
HTML種類
型
string
undefinedの代替
Button__YDF.HTML_Types.regular
nullは不可か
はい
利用可能な選択肢
  • Button__YDF.HTML_Types.regular
  • Button__YDF.HTML_Types.submit
  • Button__YDF.HTML_Types.inputButton
  • Button__YDF.HTML_Types.inputSubmit
  • Button__YDF.HTML_Types.inputReset
label
日本語名
キャプション
型
多形性
いつundefinedは不可か
`HTML_Type`プロパティーに`Button__YDF.HTML_Types.inputButton`か`Button__YDF.HTML_Types.inputSubmit`か`Button__YDF.HTML_Types.inputReset`が指定
nullは不可か
はい
選択肢
  • 型
    string
    最小文字数
    1
  • 型
    number
    数の集合
    実数
accessibilityGuidance
日本語名
アクセシビリティ技術専用説明文
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
URI
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
mustOpenLinkInNewTab
日本語名
URIを新しいタブみ開くべきか
型
boolean
undefinedの代替
false
nullは不可か
はい
mustRequestNotFollowLinkForCrawlingToSearchEngine
日本語名
検索エンジンにランキングに指示されたURIの資源にランキングを共有しない事を頼むべきか
型
boolean
undefinedの代替
false
nullは不可か
はい
disabled
日本語名
非活性状態の真偽
型
boolean
undefinedの代替
false
nullは不可か
はい
toggled
日本語名
押したまま状態の真偽
型
boolean
undefinedの代替
false
nullは不可か
はい
theme
日本語名
テーマ
型
string
undefinedの代替
Button__YDF.Themes.regular
nullは不可か
はい
利用可能な選択肢
  • Button__YDF.Themes.regular
  • (`Button__YDF.defineThemes(themesNames)`で定義された中から何れか)
areThemesCSS_ClassesCommon
日本語名
テーマCSSクラスは共通真偽
型
boolean
undefinedの代替
Button__YDF.areThemesCSS_ClassesCommon
nullは不可か
はい
geometricVariation
日本語名
幾何学的変形
型
string
undefinedの代替
Button__YDF.GeometricVariations.regular
nullは不可か
はい
利用可能な選択肢
  • Button__YDF.GeometricVariations.regular
  • Button__YDF.GeometricVariations.small
  • Button__YDF.GeometricVariations.linkLike
  • (`Button__YDF.defineGeometricVariations(geometricVariationsNames)`で定義された中から何れか)
geometricModifiers
日本語名
幾何学的改変
型
指数配列
undefinedの代替
[]
nullは不可か
はい
undefined要素可否
はい
null要素可否
はい
配列の要素
型
string
利用可能な選択肢
  • 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
decorativeVariation
日本語名
修飾的変形
型
string
undefinedの代替
Button__YDF.DecorativeVariations.regular
nullは不可か
はい
利用可能な選択肢
  • Button__YDF.DecorativeVariations.regular
  • Button__YDF.DecorativeVariations.accented
  • Button__YDF.DecorativeVariations.danger
  • Button__YDF.DecorativeVariations.linkLike
  • (`Button__YDF.defineDecorativeVariations(decorativeVariationsNames)`で定義された中から何れか)
decorativeModifiers
日本語名
修飾的修飾子
型
指数配列
undefinedの代替
[]
nullは不可か
はい
undefined要素可否
はい
null要素可否
はい
配列の要素
型
string
利用可能な選択肢
  • Button__YDF.DecorativeModifiers.bordersDisguising
  • Button__YDF.DecorativeModifiers.noBackground
  • Button__YDF.DecorativeModifiers.noBackgroundInDefaultState
}

© 2023 Yamato Daiwa Co., Ltd.