Как правильно задать угловой радиус списка MX и получить закругленные углы?

#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 имеют синтаксис «нижний регистр тире», поэтому таблица стилей выше должна быть в порядке.