Стилизация для каждого из компонентов библиотеки описана во внешнем CSS файле "webix.css" / "webix.min.css". Библиотека требует подключения этого файла вместе с файлом "webix.js".
После этого, вы можете стилизовать компоненты двумя способами:
<style>
.my_style {
font-style: italic;
}
</style>
<script>
webix.ui({
view:"dataview",
css:"my_style",
template: "#title#<br/> Year: #year#, rank: #rank#",
});
</script>
Related sample: Dataview Italic
Указываем CSS класс:
webix.ui({
view:"dataview",
template:"<div class='my_style'>#title#<br/> Year: #year#, rank: #rank#</div>",
data:"..."
});
Результат тот же, что и выше.
Добавляем стили
view:"window",
body:{
template:"<span style='font-size:14px;font-style:italic'>Styled Window</span>"
}
CSS открывает широкие возможности стилизации виджета, однако существуют некоторые вещи, которые мы не рекомендуем делать со стилями.
Вы можете изменять цвета, шрифты, внутренние отступы элементов данных и др. Примеры рассмотрим ниже.
В большинстве случаев размеры и позиционирование в Webix контролируется с помощью JS. Внутренние и внешние отступы, ширина и высота высчитываются в JavaScript коде, который не может получить их из CSS файла. Поэтому следующие параметры вам необходимо указывать через JS - не CSS:
webix.ui({
view:"button", value:"Button",
width:70, height:50
});
webix.ui({
rows:[
{ padding:10, margin:2, cols:[
{ template:"Column 1" },
{ template:"Column 2" }
]}
]
});
webix.ui({
view:"list", data:grid_data,
type:{
height:70,
template:"#rank#. #title#<br>#votes#"
}
});
Если вы попытаетесь изменить эти параметры через CSS, они будут проигнорированы или же сломается позиционирование компонента.
Вы можете добавлять CSS классы компонентам динамически с помощью переопределения свойств:
.mycss{
color:red;
}
//"datatable" - ID компонента
$$("datatable").define("css", "mycss");
или используя хелпер webix.html:
//getNode() возвращает самый верхний узео компонента
webix.html.addCss( $$("datatable").getNode(), "mycss");
Преимущества метода addCss, в том, что есть обратный метод removeCss, который используется для снятия CSS класса с компонента:
webix.html.removeCss( $$("datatable").getNode(), "mycss");
Когда вы указываете размеры элементов компоненты, вы используете свойство type, которое содержит объект с шириной и высотой элемента. Вы можете добавить туда и другие параметры, включая темплейт и CSS.
webix.ui ({
view:"dataview",
type:{
height: 45,
width: 300,
template:"<span style='color:#67B802; font-style:italic'>#name#</span>"
}
// ...
})
Type можно создавать отдельно с помощью класса webix.type.
webix.type(webix.ui.dataview,{
name:"custom",
template:"<span style='color:#67B802; font-style:italic'>#name#</span>",
height: 45,
width: 300
});
webix.ui ({
view:"dataview",
type: "custom",
// ...
})
Related sample: Dataview Type Styling
Вы можете использовать встроенный CSS:
webix.ui({
view:"dataview",
template:"<div class='webix_strong'>#title#</div> Year: #year#, rank: #rank#",
// ...
});
Related sample: Controlling a Number of Displayed Items
Или переопределить CSS по умолчанию для этого документа:
.mywin .webix_win_head>.webix_view>.webix_template{
background: #444; color:#AFA;
}
Вероятно, вы заметили, что встроенные CSS классы промаркированы префиксом "webix_". Более того, у каждой части компонента есть свой собственный CSS класс, который можно переопределить. Читайте об этом ниже.
Кроме того, что вы можете добавлять CSS классы всему компоненту, можно делать это и для его элементов данных. Добавьте свойство $css в объект данных. Свойство может содержать имя CSS класса или хэш CSS правил.
Задаём стили прямо в наборе данных
<style>
.my_style{
background-color:#FFAAAA;
}
</style>
<script>
webix.ui({
view:"list",
data:[
{ id:1,
value:"The Shawshank Redemption",
$css:"highlight"
},
{ id:2,
value:"The Godfather",
$css:{ "text-align":"right" }
}
]
});
</script>
Если вам нужно менять стили динамически, вы можете использовать методы addCss и removeCss после загрузки страницы.
CSS карты помогают стилизовать отдельные части компонента. Вам необходимо обратиться к CSS карте нужной части, выбрать CSS класс и определить стили в шапке документа.
Ниже стили применены к хедеру компонента UnitList:
<style>.webix_unit_header{
color:#cb4c26;
font-style:italic;
}
</style>
CSS классы для каждого компонента описаны части о CSS картах
Контролы используются чаще всего. Один и тот же тип контрола, (например, "button") как правило, появляется на странице несколько раз.
К примеру, возьмём кнопки. Если вам нужно стилизовать каждую кнопку по-разному - определите отдельные CSS классы для каждой кнопки:
.bt_1 input{
border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px;
background: #396D9E;
...
}
.bt_2 input{
border-radius: 4px; -webkit-border-radius: 4px;-moz-border-radius: 4px;
border: 1px solid #3D7113;
...
}
Имена классов .bt1 и bt2 предназначены для разных кнопок, а input указывает на то, что поля вода кнопок должны быть тоже стилизованы.
Related sample: Buttons: Styling
Иконки, которые используются в разных контролах можно заменить на другие. Процесс подробно описан здесь.
Наверх