Question

我的Website我试图锁定＆lt; {3}} Mat-Toolbar＆gt;到屏幕的顶部，然后直接在我想要锁定＆lt; Mat-Tabs＆gt;

我遇到的问题是：固定在CSS中的位置根本没有锁定它，当我实际去网站并检查元素时它放入＆lt; div>

我应该如何锁定这两个元素到顶部，我该如何绕过这个自动创建的Div？我有一个类似于此的先前问题，但我使用固定和绝对定位解决了这个问题，这不适用于这个较新版本的Angular / Angular Material。

Answer 1

您的意思是粘性工具栏吗？

只需在工具栏中添加一个类并使其变为粘性：

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}

注意： IE 11上不支持position: sticky。有关position: sticky的浏览器支持的详细信息，请查看此caniuse页。

Answer 2

您可以通过使用:: ng-deep：

设置样式来实现

::ng-deep .mat-toolbar{
  z-index: 998;
  position: fixed
}
::ng-deep .mat-tab-group{
  margin-top:55px !important;
}

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
      background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
    position: relative !important;
    margin-top:55px;
}

DEMO

Answer 3

即使我的项目也遇到了同样的问题。在<mat-sidenav-container>中声明工具栏时，要使其固定是非常困难的。

之所以如此困难，是因为<mat-sidenav-container>和<mat-toolbar>都使用transform: translate3d(0,0,0)。

因此，最好的处理方法是从<mat-toolbar>中删除<mat-sidenav-container>并为工具栏编写一个外部CSS。

mat-toolbar {
    height: 64px;
    position: fixed;
    z-index: 100;
    width: 100%  !important;
}

此解决方案对我有用。

Answer 4

这对我有用：

<强> app.component.html

        <plugin>
            <artifactId>maven-surefire-plugin</artifactId>
            <version>2.5</version>
            <configuration>
                <forkMode>always</forkMode>
                <systemPropertyVariables>
                    <log4j.configuration>file:src/test/resources/log4j-silent.properties</log4j.configuration>
                </systemPropertyVariables>
            </configuration>
        </plugin>

<强>的style.css

    <div class="app-container">
        <mat-sidenav-container>

            <mat-sidenav mode="over">
                <div>item 1</div>
                <div>item 2</div>
                <div>item 3</div>
            </mat-sidenav>

            <mat-toolbar>
                <i class="material-icons hamburger-menu">menu</i>
                <span>item A</span>
                <span>item B</span>
            </mat-toolbar>

            <div class="app-body">
                <router-outlet></router-outlet>
            </div>

        </mat-sidenav-container>
    <div>

Answer 5

这是解决方案的孩子。

1）转到工具栏组件，并将其添加到其css / scss文件中：

add_action('wp_enqueue_scripts', 'theme_scripts');
function theme_scripts() {
    wp_enqueue_script('theme-navbar', get_stylesheet_directory_uri().'/scripts/navbar.js', array('jquery), $ver = false, $in_footer = true );
}

2）现在进入包含顶部栏和路由器出口（默认为app.component）的根应用程序，然后在其css / scss文件中键入以下内容：

get_stylesheet_directory_uri() //points to the directory in your active theme where stylesheet is located so the path will be something like '/wp-content/themes/YOURTHEME'

花了我几个小时，但终于找到了解决方案。

Answer 6

overlayimage = np.copy(image)

# https://scikit-image.org/docs/dev/auto_examples/edges/plot_circular_elliptical_hough_transform.html

hough_radii = np.arange(30, 60, 2)
hough_res = hough_circle(edges, hough_radii)

# Select the most prominent X circles
x=1
accums, cx, cy, radii = hough_circle_peaks(hough_res, hough_radii,
                                           total_num_peaks=x)
# Draw them
fig, ax = plt.subplots(ncols=1, nrows=1, figsize=(10, 4))
#image = color.gray2rgb(image)
for center_y, center_x, radius in zip(cy, cx, radii):
    circy, circx = circle_perimeter(center_y, center_x, radius)
    overlayimage[circy, circx] = 255

print(radii)
ax.imshow(overlayimage,cmap='gray')
plt.show()

只需将这行添加到我的styles.css中，我的问题就解决了！ ^ _ ^

Angular Material 2 - 如何将mat-toolbar和mat-tabs锁定到顶部

6 个答案: