CODEWITHSUNDEEP
apache-flexuser-interface
alonzo
alonzo

Reputation: 95

Which components should I use to achieve such a visual effect?

I found a nice looking app made by Kap Lab. I like the components on the left, especially the grey background with rounded corners. It feels like one solid piece of GUI, despite it's made of four different components. I tried to put VBox, make its background grey, round corners and put other components with sligtly less width on the top of it, but it doesn't seem to work. The corners are not rounded and whole thing looks rather ugly :)

Upvotes: 0

Views: 170

Answers (3)

Florian F
Florian F

Reputation: 8875

Top component is just a VBox. Inside it, you first have a TabNavigator then a DataGrid and the last component is also a VBox which contains a Hbox with a simple Label and an Accordion

Vbox

  • TabNavigator
  • DataGrid
  • VBox
    • Hbox
      • Label
    • Accordion

Upvotes: 0

CookieOfFortune
CookieOfFortune

Reputation: 14004

It looks like a panel with a tab navigator inside it. CSS for the panel like this:

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

I used Flex 3 Style Explorer to generate that. You could try messing around with it to get the styles you want.

Upvotes: 1

Hrundik
Hrundik

Reputation: 1838

If you mean the box titled "LAYOUT", then it must be a Panel component, which can be easily customized using styles to look that way:

<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>

Upvotes: 0

Related Questions