Следующие шаги были проверены на APEX 19.2.
- Измените размер изображения до квадрата 16px. CSS, используемый для добавления изображения, не позволяет изменять размер изображения с помощью CSS, поэтому это необходимо сделать заранее. Вы можете выбрать другой размер изображения, но это потребует настройки других аспектов меню. Если необходимо, см. Примечания внизу.
- Загрузите изображение в общие компоненты и получите URL-адрес из столбца Ссылка в отчете. Вы можете использовать либо файлы приложений Stati c, либо файлы рабочей области Stati c в зависимости от ваших потребностей. Я использовал Stati c Файлы приложений, а URL-адрес был: # APP_IMAGES # dm-16.jpg
- Go для общих компонентов> Списки. Выберите список, с которым вы хотите работать, а затем перейдите к записи списка, в которой вы хотите отобразить изображение. В поле Image / Class добавьте пользовательский класс, который можно использовать для нацеливания на элемент. Я использовал: дм-16
Go на странице, где у вас есть кнопка настройки, чтобы открыть меню. Если у вас еще нет этой настройки, , вы можете использовать ее в качестве руководства . Go в атрибуты уровня страницы и добавьте следующие CSS к встроенному файлу в разделе CSS:
.dm-16:before {
content: url(#APP_IMAGES#dm-16.jpg);
}
CSS выбирает класс из шага 3 и устанавливает Атрибут содержимого, используя значение из шага 2.
Когда вы запустите страницу, вы должны увидеть что-то вроде этого:
Вот некоторые заметки об использовании больших изображений ... Существует диапазон, который оборачивает диапазон с изображением и имеет класс с именем a-Menu-statusCol . Этот элемент имеет свой атрибут width, установленный на 32 пикселя. Это связано с тем, что его левый и правый отступы устанавливаются на 8 пикселей каждый (всего 16 пикселей), поэтому при добавлении изображения в 16 пикселей общая ширина становится 32 пикселя.
Допустим, вы хотите использовать изображение шириной 32 пикселя. Вам нужно взять отступ (16px), добавить ширину изображения (32px) и установить ширину промежутка до этой суммы. В моем примере это было 48 пикселей. Я добавил следующее CSS к тому же встроенному атрибуту на странице:
.a-Menu-content .a-Menu-statusCol {
width: 48px
}
После этого вы увидите, что изображение больше не совпадает с текстом. Это потому, что текст находится в элементе «a», высота строки которого установлена в соответствии с предыдущим размером изображения. Опять же, высота определяется диапазоном с именем a-Menu-statusCol . Он имеет верхний и нижний отступы по 10 пикселей каждый (всего 20 пикселей). Если вы добавите высоту изображения по умолчанию (16px), общая сумма составит 36px, то есть, как будет установлено значение line-height элемента 'a'. Если вы добавите изображение высотой 32 пикселя, вам нужно будет добавить к нему 20 пикселей, чтобы получить в общей сложности 52 пикселя. Я установил значение light light height для элементов 'a' со следующей CSS на той же странице:
.a-Menu .a-Menu-item {
line-height: 52px;
}
Как вы можете видеть, изображение теперь стало больше. Он не совпадает со значком под ним, так как я не добавил в этот список увеличенное изображение.
