Статья успешно отправлена на почту

Стандартные классы стилей в Mobile SMARTS

Применимо к продуктам: Mobile SMARTS платформа
Последние изменения: 2024-03-26

Выделите текст или фото, с замеченной ошибкой > нажмите карандаш для редактирования

Заметили ошибку в тексте?
Напишите нам, мы исправим!

Начиная с версии 3.3 платформы Mobile SMARTS в Android-клиент по умолчанию уже встроены стандартные классы стилей. Использование этих классов обязательно там, где это возможно. Не стоит писать свои аналогичные классы стилей.

Доступные стили текста:

Класс Описание
.__header_sm_text текст для заголовков (скорее всего для заголовков колонок таблиц)
.__error_text отображение уведомлений об ошибке
.__error_block отображение уведомлений об ошибке в блоке с красным фоном
.__helper_text текст для описаний, комментариев
.__caption_text текст для подписей к таблицам, изображениям


Пример 1

<r class="__error_block" size="12">Сообщение об ошибке с наибольшим акцентом</r>
<r class="__error_text" size="12">Сообщение об ошибке с меньшим акцентом</r>
<r class="__helper_text" size="12">текст комментария или описания</r>

Пример 2

<div width="100%">
<table border="1dp" valign="middle">
<tr>
<td width="10%" align="center"><r class="__header_sm_text">Номер п/п</r></td>
<td align="center"><r class="__header_sm_text">Заголовок таблицы</r></td>
</tr>
<tr>
<td align="center">1</td>
<td><r class="__error_block">Сообщение об ошибке с наибольшим акцентом</r></td>
</tr>
<tr>
<td align="center">2</td>
<td><r class="__error_text">Сообщение об ошибке с меньшим акцентом</r></td>
</tr>
<tr>
<td align="center">3</td>
<td><r class="__helper_text">текст комментария или описания</r></td>
</tr>
</table>
<r class="__caption_text">Подпись к таблице</r>
</div>

Доступные стили кнопок:

Класс Описание
.__contained_button кнопки с заливкой используются для наиболее важных действий
.__outlined_button обведенные кнопки используются для менее важных действий
.__text_button текстовые кнопки используются для отображения наименее важных действий
.__menu_button кнопка меню в действии «Меню»
.__exchange_button кнопка обмена с сервером в главном меню
.__exchange_noconn_button кнопка обмена в главном меню при отсутствии соединения с сервером

Пример

Кнопка с заливкой ведет к действию высокой важности
<button class="__contained_button" width="50%">Подтвердить изменения</button>
<br />
Обведенная кнопка ведет к менее важному альтернативному действию
<button class="__outlined_button" width="50%">Вернуться назад</button>
<br />
Текстовая кнопка ведет к наименее важному действию
<button class="__text_button" width="50%">Узнать больше</button>

Для изменения стиля кнопки обмена достаточно в файле global.css прописать свои значения атрибутам соответствующего класса, например:

.__exchange_button{
background-color: lightskyblue;
color: slateblue;
}

То же можно сделать и для других стандартных классов.

Кроме стандартных, можно использовать пользовательские классы стилей. Для их создания используется тег <style>. У каждого стиля есть имя и он хранит в себе параметры key-value.

<style name="MyStyle">
<item name="key">value</item>
 </style>

Была ли статья полезна?
Спасибо за ваш отзыв!
Отзыв
Заполните, пожалуйста, данную форму, что конкретно вы не нашли, оставьте свои комментарии о работе сайта / полезности / сложности с навигацией
0/500