Какие компоненты я должен использовать для достижения такого визуального эффекта?

Question

Я нашел симпатичное приложение от Kap Lab. Мне нравятся компоненты слева, особенно серый фон с закругленными углами. Это похоже на один цельный графический интерфейс, несмотря на то, что оно состоит из четырех разных компонентов. Я попытался поместить VBox, сделать его фон серым, закруглить углы и поместить сверху другие компоненты с чуть меньшей шириной, но, похоже, это не сработало. Углы не закруглены и все выглядит довольно некрасиво:)

Answer 1

Похоже на панель с навигатором вкладок внутри. CSS для панели вот так:

Panel {
   borderStyle: solid;
   borderColor: #d2d2d2;
   borderThickness: 1;
   roundedBottomCorners: true;
   backgroundColor: #e1e1e1;
   dropShadowEnabled: false;
}

Я использовал Flex 3 Style Explorer для генерации этого. Вы можете попробовать возиться с ним, чтобы получить стили, которые вы хотите.

Answer 2

Верхний компонент - это просто VBox. Внутри него сначала есть TabNavigator, затем DataGrid, и последний компонент также является VBox, который содержит Hbox с простой меткой и аккордеоном

Vbox

• TabNavigator
• DataGrid
• VBox
  • HBOX
    • Метка
  • Аккордеон

Answer 3

Если вы имеете в виду поле с заголовком «LAYOUT», то это должен быть компонент Panel, который можно легко настроить с помощью стилей, чтобы он выглядел следующим образом:

<mx:Style>
    .panelTitle
    {
        font-weight: bold;
        color: #ffffff;
    }
</mx:Style>
<mx:Panel x="300" title="LAYOUT" headerHeight="20" backgroundColor="#CCCCCC" titleStyleName="panelTitle"
        headerColors="[#333333, #333333]" highlightAlphas="[0, 0]"
        borderThicknessLeft="3" borderThicknessRight="3" borderThicknessBottom="3" borderThicknessTop="3">
    <mx:VBox height="300" width="200" backgroundColor="#FFFFFF" />
</mx:Panel>