Kullanıcıların bileşeninize uygulayabilecekleri tanımlı bir stil listesi oluşturabilirsiniz.
Bileşeniniz için ön tanımlı bir stil listesine sahip olma, bir temanın tasarım dosyaları yoluyla Oracle Content Management tarafından sağlanan bileşenlere yönelik stil sınıflarını tanımlama ile aynı modeli izler. Özel stil sınıflarınızı bileşene yönelik appinfo.json dosyasında adlandırırsınız.
design.css ve design.json dosyalarında ek stiller tanımlarsınız. json dosyası kullanıcı arayüzünde görünecek addan altta yatan fiili css sınıf adına bir eşleme sağlar ve css dosyası her stil sınıfı için detayları sağlar.
design.json dosyası bileşenler için şu yapıya sahiptir:
{
"componentStyles": {
"scs-image": {
"styles": []
},
"scs-map": {
"styles": []
},
"scs-title": {
"styles": []
},
"scs-paragraph": {
"styles": []
},
"scs-txt": {
"styles": []
},
"scs-divider": {
"styles": []
},
"scs-button": {
"styles": []
},
"scs-app": {
"styles": []
},
"scs-spacer": {
},
"scs-gallery": {
"styles": []
},
"scs-youtube": {
"styles": []
},
"scs-socialbar": {
"styles": []
},
"scs-document": {
"styles": []
}
}
}
Her "styles":[] girişi, bu belirli bileşen için bir dizi stil içerebilir. "name", kullanmak üzere belirtilen bir değer veya yerleşik bir yerelleştirilmiş dize referansı olabilir. Örneğin, Başlık bileşeni şu stil öndeğerlerini sağlar:
{
"styles": [{
"name": "COMP_STYLE_FLAT",
"class": "scs-title-default-style"
},
{
"name": "COMP_STYLE_HIGHLIGHT",
"class": "scs-title-style-2"
},
{
"name": "COMP_STYLE_DIVIDER",
"class": "scs-title-style-3"
}
]
}
Ad değerleri, kullanıcı arayüzünde görüntülenmek üzere gerçek sözcüklere eşlenir; örneğin:
"COMP_STYLE_FLAT": "Flat",
"COMP_STYLE_HIGHLIGHT": "Highlight",
"COMP_STYLE_DIVIDER": "Divider",
css dosyası sınıf değerleri için tanımları sağlar:
.scs-title-default-style {
color: #333333;
display: block;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: normal;
}
Örnek olarak, temanın design.json dosyasında components.json dosyasında tanımladığınız initialData.compomentId değerini esas alarak bileşeniniz için girişler ekleyebilirsiniz:
"componentId": "news-article"
design.json dosyasındaki ilgili girişler:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
design.css dosyasındaki ilgili girişler:
.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}