Layout 布局 样式问题

[ng-zorro]

Layout 布局 样式问题

[vthinkxie]

please provide more detail

[david1025]

已更新

[vthinkxie]

This code works fine in my browser, please check if there is other css affect this style

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nz-root>
      <nz-layout>
        <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" nzCollapseChange="onCollapseChange" >
          <div class="logo"></div>
          <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
            <li nz-submenu>
              <span title><i class="anticon anticon-user"></i><span class="nav-text">菜单</span></span>
              <ul>
                <li nz-menu-item>Tom</li>
                <li nz-menu-item>Bill</li>
                <li nz-menu-item>Alex</li>
              </ul>
            </li>
            <li nz-submenu>
              <span title><i class="anticon anticon-team"></i><span class="nav-text">菜单</span></span>
              <ul>
                <li nz-menu-item>Team 1</li>
                <li nz-menu-item>Team 2</li>
              </ul>
            </li>
            <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
          </ul>
        </nz-sider>
        <nz-layout>
          <nz-header style="background: #fff; padding:0;"></nz-header>
          <nz-content style="margin:0 16px;">
            <nz-breadcrumb style="margin:12px 0;">
              <nz-breadcrumb-item>User</nz-breadcrumb-item>
              <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
            </nz-breadcrumb>
            <div style="padding:24px; background: #fff; min-height: 360px;">
              Bill is a cat.
            </div>
          </nz-content>
          <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
        </nz-layout>
      </nz-layout>
    </nz-root>
  `,
  styles  : [
      `:host ::ng-deep .logo {
      height: 32px;
      background: #333;
      border-radius: 6px;
      margin: 16px;
    }

    :host ::ng-deep .ant-layout-sider-collapsed .nav-text {
      display: none;
    }

    :host ::ng-deep .ant-layout-sider-collapsed .ant-menu-submenu-title:after {
      display: none;
    }

    :host ::ng-deep .ant-layout-sider-collapsed .anticon {
      font-size: 16px;
      margin-left: 8px;
    }
    `
  ]
})
export class AppComponent implements OnInit {
  isCollapsed = false;

  constructor() {
  }

  ngOnInit() {
  }
}

[david1025]

I'm so sorry, the right code should be

export class AppComponent implements OnInit {

  isCollapsed = true;

  constructor() {
  }

  ngOnInit() {
  }
}

[vthinkxie]

@david1025 still works fine

[david1025]

thanks, I will check my code

[vthinkxie]

related #74

[vthinkxie]

@david1025
bug confirm , sorry for misunderstand your code. we will try to fix it next version.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.