StylePerk

継承:Perk セクション名:style 優先度:200

StylePerkはユニットのCSSのロードと適用など、ユニットのスタイルに関する機能を付与します。

全ユニットに共通な設定はグローバル設定の“system.style”セクションに記述します。

systemセクションのapplyで指定されたCSSは、Perkの初期化時にロードされ、Documentに対して適用されます。

{
    "system": {
        "style": {
            "options": {
                "apply": [String, ...],
                "path": String,
            },
            "styles": {
                <styleName>: {
                    "CSS": String,
                    "type": "CSS"|"URL",
                    "URL": String,
                },
                ...
            }
        }
    }
}

各ユニット固有の設定は“style”セクションに記述します。

{
    "style": {
        "options": {
            "apply": [String, ...],
            "fileName": String,
            "hasStyle": Boolean,
            "path": String,
            "styleRef": Boolean|String,
        },
        "styles": {
            <styleName>: {
                "apply": [String, ...],
                "CSS": String,
                "fileName": String,
                "path": String,
                "type": "CSS"|"URL",
                "URL": String,
            },
            ...
        }
    }
}

いくつかの設定は、タグ属性に指定することもできます。

<my-unit
    bm-styleref=Empty|String|"false"
></my-unit>

型:Array of String

適用するCSSの名前を指定します。“system.style”セクションに記述されている場合、指定されたCSSをdocumentに対して適用します。

“style”セクション内では、“options”セクションと“styles.<styleName>“セクションに記述できます。”options”セクション内に記述された場合、どのCSSを使用しても適用されます。“styles.<styleName>“セクションに記述して場合、そのCSSを使用する場合のみ適用されます。各CSSは、Shadow DOMモードの場合はユニットに、そうでない場合はdocumentに対して適用されます。

なお、ユニットのデフォルトのスタイルをここに指定する必要はありません。”style.options.styleRef”が指定してある場合、ここに記述されていなくても自動的に一番最後に適用されます。

型:String

CSSの文字列を指定します。これはCSSであって、CSSのファイル名ではありません。“type”設定が“CSS“の時に使用されます。

型:String デフォルト:<タグ名>

CSSのファイル名を指定します。拡張子は不要です。”style.options”と“style.styles.<styleName>“の２箇所に記述することができます。

優先順は高い順に、”style.styles.<styleName>.fileName”、“style.options.fileName”、"unit.options.fileName"で、いずれも指定がない場合はタグ名がファイル名として使われます。

ファイル名に拡張子“css”を付けたファイルをロードします。

型:Boolean デフォルト:True

ユニットがユニット専用CSSを持つかどうかを指定します。Falseの場合、ユニット専用CSSのロードと適用は行われません。ただし、“style.options.apply”に設定されている共通CSSは適用されます。

型:String

CSSファイルのパスを指定します。“style.options”と“style.styles.<styleName>“の２箇所に記述することができます。グローバル設定のパスと、ユニット固有設定のパスを連結したものが、最終的なパスとして使われます。

グローバル設定は”system.style.options.path”、“system.unit.options.path”の優先順で使用され、ユニット固有設定は“style.styles.<styleName>.path”、“style.options.path”、“unit.options.path”の優先順で使用されます。

型:String

スタイル名を指定します。デフォルトのスタイルは“default”と指定してください。一つの<styleName>を、ユニットに適用することができます。basic.transformスペルを使って別のCSSに切り替える際に、この名前を指定します。

型:Boolean|String デフォルト:True

ユニットのデフォルトのCSSファイルへのURLを指定します。Trueの場合は、デフォルトのURLが使用されます。Falseの場合、デフォルトCSSファイルのロードと適用が行われません。hasStyleオプションをFalseに設定するのと同じ意味になります。

bm-styleref属性を指定した場合、値が指定されていればファイルへのURL、値が指定されてなければTrueとみなされます。Falseを指定したい場合は、“false”という文字列を指定してください。

CSSファイルが存在しない場合、404エラーが発生し、ユニットの初期化が止まります。もしユニットにCSSファイルがないのであれば、明示的にfalseをセットしてください。

型:String デフォルト:“URL”

CSSをどこから取得するかを指定します。タイプは“CSS“、”URL“のいずれかです。”CSS“の場合は、”CSS“設定からCSS文字列を取得して使用します。”URL“の場合は、”URL“オプションで指定されたURLからCSSファイルをロードします。

型:String

CSSファイルのURLを指定します。”type”設定が“URL“の時に使用されます。

beforeTransformでは、まず現在適用されているCSSをクリアした後、summonスペルを使って共通CSSをロードします。共通CSSは”style.options.apply”に指定されている共通スタイルです。ロードが完了すると、applyスペルを使ってCSSをユニットに適用します。

• style.options.apply

doTransformでは、設定の“style.options.hasStyle”がTrueの場合(デフォルトはTrue)、summonスペルを使ってユニット専用CSSをロードします。ユニット専用CSSはe.detail.styleNameで指定されたスタイルと、そのスタイルの設定“style.styles.<styleName>.apply”に指定されているスタイルです。ロードが完了すると、applyスペルを使ってCSSをユニットに適用します。

• style.options.hasStyle
• style.styles.<styleName>.apply

型:Object 対象:インスタンス

スタイル情報を保持するオブジェクトです。それぞれのアイテムは以下のキーを持っています。

型:Undefined 対象:Unit

ユニットにスタイルを適用します。Shadow DOMの場合はユニットに、そうでない場合はDocumentに対して適用します。すでに適用されているスタイルは、適用されません。

なし。

• 指定されたスタイルがまだロードされてない場合。

型:Undefined 対象:Unit

CSSをロードします。ロードするのみで適用はされません。既にロード済みの場合は、ロードされません。optionsパラメータが渡されない場合、パラメータで指定されたスキン名の設定を参照します。

ロードしたスタイルのスタイル情報オブジェクトを返します。

• style.options.path / unit.options.path
• style.options.path
• style.options.styleRef
• style.styles.<styleName>.fileName
• style.sytles.<styleName>.type
• style.sytles.<styleName>.CSS
• style.styles.<styleName>.path
• style.sytles.<styleName>.URL
• system.style.options.path / system.unit.options.path