控制角度 mfb 菜单的边距和图标

Controlling margins and icon for angulars mfb-menu

本文关键字:图标 菜单 mfb 控制      更新时间:2023-09-26

我是angularJs和Web应用程序开发的新手。只是试图理解角度的浮动按钮及其属性(http://nobitagit.github.io/ng-material-floating-button/(。这是相同的小[plunkr][1](http://plnkr.co/edit/4eFxqSg21U5ZR5H59rdK?p=preview(。我正在尝试修改 plunkr 以实现上述目标。

1.调整按钮垂直度的因素

2.添加自定义PNG而不是"ion-ios-star"的方法

为了控制dstance,我尝试更改边距,因为它从未成功,并且控制图标我仍然不知道。

请求一些指导

跟踪 - 1 个修改 mfb.css

  list-style: none;
  margin: 0;
  padding: 0; }
  .mfb-component__list > li {
    display: block;
    position: absolute;
    top: 0;
    right: 1px;
    padding: 30px 0; //changed padding from 0 - 60 does not give any effect
    margin: -10px 0; 
   // (From 0 to 60*) Yes it had effect on distance between main menu and first child element.
//However, none of the other available give margin in the  class is giving effect
}
  1. 每个<li>元素之间的垂直距离由以下 css 选择器处理。 .mfb-component__list > li这意味着选择作为.mfb-component__list类子级的所有<li>元素。您可以更改该选择器的填充和边距,以更改图标之间的垂直间距。

  2. 可以通过将.ion-ios_##类换成您自己的自定义字形图标或 css 类来删除 plunkr 中内置的字形图标。您可以在此处使用背景图像来设置自定义 png。或者您甚至可以在 HTML 中嵌入和图像。