Начиная с версии 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>