web-dev-qa-db-ja.com

Vaadinでサイドバーまたは垂直メニューを作成する

VaadinでVerticalMenuまたはSidebarを作成するにはどうすればよいですか？特定のコンポーネントはありますか、またはプログラムでCSSを使用する必要がありますか？

Vaadin Demo のようなものを作成したいと思います。

enter image description here

新しいValoテーマを使用しています。

csssassvaadinvaadin7vaadin-valo-theme
15
Rafa Romero

アプリケーションのレスポンシブな動作を作成するには、CSSを使用する必要があります。 Zigacが述べたように、Vaadinはいくつかのコンポーネント（ここでのメニューなど）のためにすでに記述されたいくつかのスタイルを持っていますが、最終的にはもっと適用したいと思います...

valoのテーマと応答性を備えた新しい ダッシュボードデモ をチェックしてください！これはコンポーネントのスタイリングのより包括的な例であり、Valoテーマデモと同じロジックを実装します。あなたはソースコードを見ることができます ここ

基本的には、CustomComponentとして men を作成し、CssLayoutとしてコンテンツ領域を作成します。メニューでコンポーネントをクリックするたびに、 MainView のコンテンツ領域の対応するビューが呼び出されます

たとえば、ビューの1つは DashboardView で、これはユーザーが最初に表示するビューです。レスポンシブコンポーネントを備えたレスポンシブVerticalLayoutです。

さまざまなビューのスタイリング手法（Sass）を表示できます here

ここにいくつかのコードシンペットがあります：

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 "dashboard-view"です

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);
    }
  }
...
10
Reda

その正確なデザインのために、CSSコーディングは必要ありません。すべてのスタイルは、コンパイルされたValoテーマで提供されます。コンポーネントとレイアウトに適切なスタイルを使用するだけです。

その正確な（Vaadin Demo）実装のGITリンク：

ValoThemeUI.Java -ページ上のバロメニューのレイアウト

ValoMenuLayout.Java -valo-menu内のコンポーネントのレイアウト

7
Zigac