baserJSで装飾可能にするフォーム要素に付加されるクラス名を変更する

Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

フォーム要素に付加されるクラス名の一部や形式を変更する

bcRadio bcCheckbox bcSelect メソッドを使用すると、装飾用の要素が挿入されますが、それらの要素のクラス名は何も指定しなければ自動的に付加されます。

APIの変数を上書きする

特に変更するメソッドや、bcRadio bcCheckbox bcSelect のオプション引数などで指定するわけではなく、baser内のオブジェクトのプロパティを上書きすることで、クラス名の一部や形式を変更することができます。

// プレフィックスの変更
baser.ui.element.Element.classNameDefaultPrefix = 'original-prefix';

// クラス名の形式を変更
baser.ui.element.Element.classNameDefaultCase = baser.ui.element.ElementClassNameCase.SNAKE_CASE; // スネークケース
baser.ui.element.Element.classNameDefaultCase = baser.ui.element.ElementClassNameCase.CAMEL_CASE; // キャメルケース
baser.ui.element.Element.classNameDefaultCase = baser.ui.element.ElementClassNameCase.HYPHEN_DELIMITED; // ハイフン区切り

// BEM形式のエレメントのクラス名の繋ぎ文字
baser.ui.element.Element.classNameDefaultSeparatorForElement = baser.ui.element.Element.ClassNameSeparatorForBEM.DOUBLE_UNDERSCORE;

// BEM形式のモディファイアのクラス名の繋ぎ文字
baser.ui.element.Element.classNameDefaultSeparatorForModifier = baser.ui.element.Element.ClassNameSeparatorForBEM.DOUBLE_HYPHEN;

/*
baser.ui.element.Element.classNameDefaultSeparatorForElement と
baser.ui.element.Element.classNameDefaultSeparatorForModifier は
baser.ui.element.Element.ClassNameSeparatorForBEM オブジェクトの以下のプロパティを使用することができます。
    HYPHEN => '-'
    DOUBLE_HYPHEN => '--'
    UNDERSCORE => '_'
    DOUBLE_UNDERSCORE => '__'
    CAMEL_CASE => キャメルケース
*/

いずれも bcRadio bcCheckbox bcSelect メソッドを実行する前に上書きしておく必要があることは注意が必要です。