- background-color(ver. 2.7)
- background-image(ver. 2.7)
- border-color(ver. 2.7)
- border-radius(ver. 2.7)
- border-style(ver. 2.7)
- border-width(ver. 2.7)
- color(ver. 2.7)
- dock-align(ver. 2.7)
- font(ver. 2.7)
- font-family(ver. 2.7)
- font-size(ver. 2.6)
- height(ver. 2.6)
- horizontal-align(ver. 2.6)
- margin-bottom(ver. 2.6)
- margin-left(ver. 2.6)
- margin-right(ver. 2.6)
- margin-top(ver. 2.6)
- padding-bottom(ver. 2.6)
- padding-left(ver. 2.6)
- padding-right(ver. 2.6)
- padding-top(ver. 2.6)
- placeholder-color(ver. 2.6)
- selected-background(ver. 2.6)
- selected-color(ver. 2.6)
- text-align(ver. 2.6)
background-color
Определяет цвет фона элемента.
Синтаксис:
background-color: цвет
См. цвет
Значение по умолчанию:
background-color: none;
Пример:
background-color: #FF0000;
Область применения:
background-image
Устанавливает фоновое изображение для элемента. Допустимо наличие в рисунке прозрачных областей.
Синтаксис:
background-image: url(путь к файлу) | none
Значение по умолчанию:
background-image: none;
Пример:
background-image: url(arrow.png);
Область применения:
Примечание:
- Если для элемента одновременно задан цвет фона и фоновое изображение, будет отображено только изображение.
- Если для элемента одновременно заданы границы и фоновое изображение, будет отображено только изображение.
border-color
Устанавливает цвет границы для всех сторон элемента.
Синтаксис:
border-color: цвет
См. цвет
Значение по умолчанию:
border-color: none;
Пример:
border-color: $f00;
Область применения:
border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис:
border-radius: размер
См. размер
Значение по умолчанию:
border-radius: 0px;
Пример:
border-radius: 10dp;
Область применения:
Примечание:
- Невозможно задать в качестве единицы измерения проценты от родителя (%) или проценты от экрана (sp)
- Радиус скругления не влияет на разметку
border-style
Устанавливает стиль границы вокруг элемента.
Синтаксис:
border-style: none | solid
none: Не отображает границу и ее толщина задается нулевой.
solid: Отображает простую границу
Значение по умолчанию:
border-style: none;
Пример:
border-style: solid;
Область применения:
border-width
Задает толщину границы одновременно на всех сторонах элемента.
Синтаксис:
border-width: размер
См. размер
Значение по умолчанию:
border-width: 0px;
Пример:
border-width: 1вз;
Область применения:
Примечание:
- Невозможно задать в качестве единицы измерения проценты от родителя (%) или проценты от экрана (sp)
- Границы напрямую влияют на разметку
color
Определяет цвет текста элемента.
Синтаксис:
color: цвет
См. цвет
Значение по умолчанию:
color: none;
Пример:
color: #2d89cf;
Область применения:
dock-align
Выравнивает элемент относительно своего родителя, если он - <c:DockLayout/>.
Синтаксис:
dock-align: left | top | right | bottom
Значение по умолчанию:
dock-align: top;
Пример:
dock-align: left;
Примечание:
Подробности см. <c:DockLayout/>.
font
Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
Синтаксис:
font: font-size font-family
font-size: высота шрифта, см. размер
font-family: наименование шрифта
Значение по умолчанию:
font: 0px arial;
Пример:
font: 80% arial;
Область применения:
Компонент | Версия |
---|---|
Button(ver. 2.7) | - |
EditText(ver. 2.7) | - |
MemoEdit(ver. 2.7) | - |
TextView(ver. 2.7) | - |
Примечание:
- Если значение размера шрифта задается в процентах, за основу берется текущий контейнер. Не рекомендуется устанавливать размер шрифта более 90%
- Стили font-family и font-size частично переопределяют и переопределяются данным стилем
font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
Синтаксис:
font-family: имя шрифта
Значение по умолчанию:
font-family: arial;
Пример:
font-family: roboto;
Область применения:
Компонент | Версия |
---|---|
Button(ver. 2.7) | - |
EditText(ver. 2.7) | - |
MemoEdit(ver. 2.7) | - |
TextView(ver. 2.7) | - |
Примечание:
Стиль font переопределяет и частично переопределяется данным стилем
font-size
Определяет размер шрифта элемента.
Синтаксис:
font-size: размер
См. размер
Значение по умолчанию:
font-size: 0px;
Пример:
font-size: 20dp;
Область применения:
Компонент | Версия |
---|---|
Button(ver. 2.7) | - |
EditText(ver. 2.7) | - |
MemoEdit(ver. 2.7) | - |
TextView(ver. 2.7) | - |
Примечание:
- Если значение размера шрифта задается в процентах, за основу берется текущий контейнер. Не рекомендуется устанавливать размер шрифта более 90%
- Стиль font переопределяет и частично переопределяется данным стилем
height
Устанавливает ширину элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Синтаксис:
height: размер
См. размер
Значение по умолчанию:
height: 0px;
Пример:
height: 50%;;
horizontal-align
Выравнивает элемент по горизонтали относительно своего родителя, если он - <c:VerticalLayout\> или <c:SwipeVerticalLayout/>.
Синтаксис:
horizontal-align: left | center | right
Значение по умолчанию:
horizontal-align: left;
Пример:
horizontal-align: right;
Примечание:
Подробности см. в справке по <c:VerticalLayout\> и <c:SwipeVerticalLayout/>.
margin-bottom
Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис:
margin-bottom: размер
См. размер
Значение по умолчанию:
margin-bottom: 0px;
Пример:
margin-bottom: 19mm;
Примечание:
- Отступы не работают для компонентов, вложенных в ScrollView
- Если размер отступа задан в процентах от родителя (%) или от экрана (sp), то для left, right используется ширина контейнера,а для to , botttom - высота.
margin-left
Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис:
margin-left: размер
См. размер
Значение по умолчанию:
margin-left: 0px;
Пример:
margin-left: 19mm;
Примечание:
- Отступы не работают для компонентов, вложенных в ScrollView
- Если размер отступа задан в процентах от родителя (%) или от экрана (sp), то для left, right используется ширина контейнера,а для to , botttom - высота.
margin-right
Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис:
margin-right: размер
См. размер
Значение по умолчанию:
margin-right: 0px;
Пример:
margin-right: 19mm;
Примечание:
- Отступы не работают для компонентов, вложенных в ScrollView
- Если размер отступа задан в процентах от родителя (%) или от экрана (sp), то для left, right используется ширина контейнера,а для to , botttom - высота.
margin-top
Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис:
margin-top: размер
См. размер
Значение по умолчанию:
margin-top: 0px;
Пример:
margin-top: 19mm;
Примечание:
- Отступы не работают для компонентов, вложенных в ScrollView
- Если размер отступа задан в процентах от родителя (%) или от экрана (sp), то для left, right используется ширина контейнера,а для to , botttom - высота.
padding-bottom
Устанавливает значение поля снизу от содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис:
padding-bottom: размер
См. размер
Значение по умолчанию:
padding-bottom: 0px;
Пример:
padding-bottom: 10mm;
Область применения:
Примечание:
Если значение задается в процентах, за основу берется текущий контейнер
padding-left
Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис:
padding-left: размер
См. размер
Значение по умолчанию:
padding-left: 0px;
Пример:
padding-left: 10mm;
Область применения:
Примечание:
Если значение задается в процентах, за основу берется текущий контейнер
padding-right
Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис:
padding-right: размер
См. размер
Значение по умолчанию:
padding-right: 0px;
Пример:
padding-right: 10mm;
Область применения:
Примечание:
Если значение задается в процентах, за основу берется текущий контейнер
padding-top
Устанавливает значение поля от сверху содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис:
padding-top: размер
См. размер
Значение по умолчанию:
padding-top: 0px;
Пример:
padding-top: 10mm;
Область применения:
Примечание:
Если значение задается в процентах, за основу берется текущий контейнер
placeholder-color
Задает текст компонента placeholder.
Синтаксис:
placeholder-color: цвет
См. цвет
Значение по умолчанию:
placeholder-color: none;
Пример:
placeholder-color: #f00;
Область применения:
Компонент | Версия |
---|---|
EditText(ver. 2.7) | - |
MemoEdit(ver. 2.7) | - |
selected-background
Задает изменение цвета фона компонента, при взаимодействии с ним
Синтаксис:
selected-background: цвет
См. цвет
Значение по умолчанию:
selected-background: none;
Пример:
selected-background: #0f0;
Область применения:
Компонент | Версия |
---|---|
Button(ver. 2.7) | - |
TextView(ver. 2.7) | - |
Примечание:
- Если задано значение none, фон не становится прозрачным, он просто не меняется
- Основное отличие данного стиля от selected-color(ver. 2.6) в том, что только для Button(ver. 2.7) и TextView(ver. 2.7) selected-background меняет цвет фона компонента, в то время как selected-color(ver. 2.6) для данных компонентов меняет только цвет текста
selected-color
Цвета компонента, при взаимодействии с ним
Синтаксис:
selected-color: цвет
См. цвет
Значение по умолчанию:
selected-color: none;
Пример:
selected-color: #bacdce;
Область применения:
Компонент | Версия |
---|---|
Button(ver. 2.7) | - |
DockLayout(ver. 2.7) | - |
HorizontalLayout(ver. 2.7) | - |
VerticalLayout(ver. 2.7) | - |
Image(ver. 2.7) | - |
TextView(ver. 2.7) | - |
Примечание:
- Если задано значение none, фон не становится прозрачным, он просто не меняется
- Для компонентов DockLayout(ver. 2.7), HorizontalLayout(ver. 2.7), VerticalLayout(ver. 2.7), Image(ver. 2.7) данный стиль меняет background-color(ver. 2.7) или применяет цветовой фильтр к background-image(ver. 2.7) при взаимодействии
- Для компонентов Button(ver. 2.7), TextView(ver. 2.7) данный стиль меняет цвет текста (color(ver. 2.7)) при взаимодействии
text-align
Определяет горизонтальное выравнивание текста в пределах элемента.
Синтаксис:
text-align: center | left | right
Значение по умолчанию:
text-align: left;
Пример:
text-align: center;
Область применения:
Компонент | Версия |
---|---|
Button(ver. 2.7) | 2.3.2.106 |
EditText(ver. 2.7) | - |
MemoEdit(ver. 2.7) | - |
TextView(ver. 2.7) | - |
text-format
Свойство, позволяющее задать способ обработки текста.
Синтаксис:
text-format: text | html
Значение по умолчанию:
text-format: text;
Пример:
text-format:html
Область применения:
Примечание:
- Html теги возможно задать только в скрипте или в словаре (папка Translate). Например: <c:TextView Text=""#text# ", где #text# - объявленная в словаре строка <b><font color="#FF0000">Hello</font> <i>World</i></b>
- Поддерживаемые html теги: <a href="...">, <b>, <big>, <blockquote>, <br>, <cite>, <dfn>, <div align="...">, <em>, <font size="..." color="..." face="...">, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <img src="...">, <p>, <small>, <strike>, <strong>, <sub>, <sup>, <tt>, <u>
- Разбор html занимает достаточно приличное время (20-40 миллисекунд) на устройствах под управлением IOS. Выполняется динамически, так что вполне корректно применять text-format: html для TextView в ScrollView
vertical-align
Выравнивает элемент по горизонтали относительно своего родителя, если он - <c:HorizontalLayout\> или <c:SwipeHorizontalLayout/>.
Синтаксис:
vertical-align: top | center | bottom
font-size: высота шрифта, см. размер
font-family: наименование шрифта
Значение по умолчанию:
vertical-align: top;
Пример:
vertical-align: bottom;
Область применения:
Примечание:
Подробности см. в справке по <c:HorizontalLayout\> или <c:SwipeHorizontalLayout/> .
white-space
Устанавливает возможность автоматического переноса текста по словам.
Синтаксис:
white-space: normal | nowrap
normal - автоматический перенос слов включен;
nowrap - автоматический перенос слов отключен
Значение по умолчанию:
white-space: nowrap;
Пример:
white-space: normal;
Область применения:
width
Устанавливает ширину элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Синтаксис:
width: размер
См. размер
Значение по умолчанию:
width: 0px;
Пример:
width: 19mm;
0 Комментариев