コンポーネントのデフォルト・スタイルを提供するCSSを追加できます。
design.css
ファイルをコンポーネントのassets
フォルダに追加します:
.h1-component-default-style .scs-component-content { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; color:red; font-weight: normal; }
appinfo.json
に追加します。h1-component
のstyleClassName
を追加する場合、コンポーネントがページにドロップされると、デフォルト・スタイルがh1-component-default-style
になります。appinfo.json
の新しいコンテンツは、次のようになります:
{ "id": "h1-component-id", "settingsData": { "settingsHeight": 90, "settingsWidth": 300, "settingsRenderOption": "inline", "componentLayouts": [ ], "triggers": [ ], "actions": [ ] }, "initialData": { "componentId": "h1-component-id", "styleClassName":"h1-component", "customSettingsData": { "headingText": "Heading 1" }, "nestedComponents": [ ] } }
define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
)を次の行に置き換えて、CSSファイルをロードするためにrender.js
を更新します。
define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) {
注:
appinfo.json
ファイルを変更したため、ブラウザをリフレッシュし、コンポーネントを再度ページに追加して、変更内容を反映させる必要があります。コンポーネントでappinfo.json
ファイルからそのデフォルト・データが取得されるようになることとを確認します。