#css #apache-flex #flex3
#css #apache-flex #flex3
Вопрос:
У меня есть mx.components.Компонент списка с кучей пользовательских стилей:
<mx:Style>
.dropDownListStyle
{
border-style: solid;
corner-radius: 4;
}
</mx:Style>
Я создаю список в виде:
_dropDown = new List();
...
_dropDown.styleName = "dropDownListStyle";
Затем список добавляется в виде всплывающего окна с помощью PopUpManager:
PopUpManager.addPopUp( _dropDown, this );
Проблема в том, что углы вновь созданного всплывающего окна не закруглены. Я обнаружил, что для получения эффекта необходим стиль границы, но добавление этого свойства не помогло. Я создаю проект с помощью Flex 4.1, но список и его родительский элемент являются компонентами MX, и их перенос в Spark требует большой работы.
Есть идеи, как я могу получить закругленные углы? Заранее спасибо!
Ответ №1:
У компонентов списка (ни mx, ни spark) не определен стиль углового радиуса. вам следует рассмотреть возможность переопределения компонента list, реализации этого стиля или гораздо более простого способа: поместить ваш список без каких-либо границ в контейнер, который может устанавливать его угловой радиус и открывать этот компонент:
/*Box, Canvas, Group...*/
.dropDownListHolderStyle {
corner-radius: 4;
background-color: #FFFFFF;
border-color: #FFFFFF;
border-style: solid;
border-weight: 1;
padding-bottom: 2;
padding-top: 2;
padding-left: 2;
padding-right: 2;
}
/*List*/
.dropDownListStyle {
background-color: #FFFFFF;
}
и компонент:
<s:VGroup id='_dropDownPopup' styleName='dropDownListHolderStyle' [...]>
<s:List id='_dropDown' styleName='dropDownListStyle' [...] />
</s:VGroup>
[…]
PopUpManager.addPopUp( _dropDownPopup, this );
Ответ №2:
Я использовал свойство стиля cornerRadius, а не corner-radius, возможно, вы неправильно написали его? Но я сделал только Spark, поэтому это может не сработать в вашем контексте.
Комментарии:
1. AFAIK, свойства CSS в mx: Style имеют синтаксис «нижний регистр тире», поэтому таблица стилей выше должна быть в порядке.