वाडिन

Question

में साइडबार या वर्टिकल मेनू बनाएं मैं वर्टिकलमेनू या वाडिन में साइडबार कैसे बना सकता हूं? क्या कोई विशिष्ट घटक है या क्या मैं प्रोग्रामेटिक रूप से और सीएसएस का उपयोग कर रहा हूं?

मैं Vaadin Demo की तरह कुछ बनाने के लिए करना चाहते हैं:

मैं नए Valo थीम उपयोग कर रहा हूँ।

Answer 1

अच्छी तरह से एक बनाने के लिए सक्षम होने के लिए आपके आवेदन के लिए उत्तरदायी व्यवहार आपको सीएसएस का उपयोग करना होगा। ज़िगैक की तरह वैदिन ने कुछ घटकों के लिए पहले से ही कुछ शैलियों को लिखा है (जैसे हमारे मेनू) लेकिन आप अधिक अंततः आवेदन करना चाहते हैं ...

वालो थीम और प्रतिक्रिया के साथ नया Dashboard demo देखें! यह स्टाइलिंग घटकों का एक और व्यापक उदाहरण है और वैलो थीम डेमो के समान तर्क लागू करता है। आप स्रोत कोड here

मूल रूप से यह क्या करता है menu कस्टमकंपोनेंट के रूप में और एक CssLayout के रूप में एक सामग्री क्षेत्र बना सकता है। जब भी कोई घटक मेनू में क्लिक किया जाता है यह MainView

उदाहरण के लिए की सामग्री के क्षेत्र में इसी दृश्य कॉल करेंगे दृश्यों में से एक DashboardView पहली बार देखने उपयोगकर्ता देखता है, जो है। यह उत्तरदायी verticalLayout पर उत्तरदायी compnents के साथ है।

आप अलग-अलग दृश्यों here

यहाँ कुछ कोड sinppets हैं के लिए स्टाइल तकनीक (सास) में देख सकते हैं:

MainView.java

public class MainView extends HorizontalLayout { 

public MainView() { 
    //This is the root of teh application it 
    //extends a HorizontalLayout 
    setSizeFull(); 
    addStyleName("mainview"); 

    //here we add the Menu component 
    addComponent(new DashboardMenu()); 

    //add the content area and style 
    ComponentContainer content = new CssLayout(); 
    content.addStyleName("view-content"); 
    content.setSizeFull(); 
    addComponent(content); 

    setExpandRatio(content, 1.0f); 

    new DashboardNavigator(content); 
} 
} 

DashboardMenu.java

public DashboardMenu() { 
    addStyleName("valo-menu"); 
    setSizeUndefined(); 
    DashboardEventBus.register(this); 

    //add components to the menu (buttons, images..etc) 
    setCompositionRoot(buildContent()); 
} 

DashboardView.java

public DashboardView() { 
    addStyleName(ValoTheme.PANEL_BORDERLESS); 
    setSizeFull(); 
    DashboardEventBus.register(this); 

    root = new VerticalLayout(); 
    root.setSizeFull(); 
    root.setMargin(true); 
    root.addStyleName("dashboard-view"); 
    setContent(root); 

    //this allows you to use responsive styles 
    //on the root element 
    Responsive.makeResponsive(root); 

    //build your dashboard view 
    root.addComponent(buildHeader()); 

    root.addComponent(buildSparklines()); 

    Component content = buildContent(); 
    root.addComponent(content); 

    //set the content area position on screen 
    root.setExpandRatio(content, 1); 
... 

और यहाँ शैली पत्रक में styleName "डैशबोर्ड व्यू" है

dashboardview.scss

@mixin dashboard-dashboard-view { 

.dashboard-view.dashboard-view { 
//Styles for all devices 
padding: $view-padding; 
overflow: visible; 

.sparks { 
    @include valo-panel-style; 
    margin-bottom: round($view-padding/3); 

    //styles for a tablet 
    @include width-range($max: 680px) { 
    .spark { 
     width: 50%; 
    } 
    .spark:nth-child(2n+1) { 
     border-left: none; 
    } 
    .spark:nth-child(n+3) { 
     border-top: valo-border($strength: 0.3); 
    } 
    } 
... 

Answer 2

उस सटीक डिज़ाइन के लिए आपको कोई सीएसएस कोडिंग की आवश्यकता नहीं है, सभी शैलियों को संकलित वालो थीम के साथ प्रदान किया जाता है। आपको बस अपने घटकों और लेआउट पर उचित शैलियों का उपयोग करना होगा।

कि सटीक (Vaadin डेमो) लागू करने के लिए GIT लिंक:

ValoThemeUI.java - नये नोट्स पेज

ValoMenuLayout.java पर valo-मेनू - valo-मेनू के अंदर नये नोट्स घटकों