Welche Komponenten sollte ich verwenden, um einen solchen visuellen Effekt zu erzielen?

Question

Ich fand eine nice looking app von Kap Lab. Ich mag die Komponenten auf der linken Seite, vor allem den grauen Hintergrund mit abgerundeten Ecken. Es fühlt sich an wie ein solides Stück GUI, obwohl es aus vier verschiedenen Komponenten besteht. Ich habe versucht, VBox zu setzen, den Hintergrund grau, runde Ecken und andere Komponenten mit etwas weniger Breite auf die Oberseite zu setzen, aber es scheint nicht zu funktionieren. Die Ecken sind nicht gerundet und Ganze sieht ziemlich hässlich :)

Answer 1

Es sieht wie ein Panel mit einem Tab-Navigator darin aus. CSS für das Panel wie folgt aus:

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

I verwendet Flex 3 Style Explorer dass zu erzeugen. Sie könnten versuchen, damit herumzualbern, um die gewünschten Stile zu erhalten.

Answer 2

Wenn Sie das Feld mit dem Titel „LAYOUT“ bedeutet, dann muss es eine Panel-Komponente sein, die leicht angepasst werden können Stile mit so aussehen:

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

Answer 3

Top-Komponente ist nur eine VBox. Innen ist es, haben Sie zunächst ein TabNavigator dann ein Datagrid und die letzte Komponente ist auch eine VBox, die eine HBox mit einem einfachen Etikett und einem Akkordeon

Vbox

• TabNavigator
• Datagrid
enthält
• VBox
  • HBox
    • Etikett
  • Akkordeon