-
Notifications
You must be signed in to change notification settings - Fork 3.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Layout 布局 样式问题 #35
Comments
please provide more detail |
已更新 |
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() {
}
} |
I'm so sorry, the right code should be
|
@david1025 still works fine |
thanks, I will check my code |
related #74 |
@david1025 |
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. |
使用Layout 布局时,使用官方示例代码,
html代码:
ts代码:
当isCollapsed设置为false时,样式变成了如下情况 :
The text was updated successfully, but these errors were encountered: