Question

我想要这样的布局：

但是得到了这个：

我的按钮被标签栏剪切。我该怎么解决？
我尝试为所有标签添加“溢出：可见”，但这是行不通的。
我的模板：

public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string controller, string action, string area, string anchorTitle, object routeValues)
{
    var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);

    var routeValueDictionary = new RouteValueDictionary(routeValues);

    var url = urlHelper.Action(action, controller, routeValueDictionary);

    var anchor = new TagBuilder("a") {InnerHtml = HttpUtility.HtmlEncode(linkText.ToUpper())};
    anchor.MergeAttribute("href", url);
    anchor.Attributes.Add("title", anchorTitle);

    var listItem = new TagBuilder("li") {InnerHtml = anchor.ToString(TagRenderMode.Normal)};

    if (CheckForActiveItem(htmlHelper, controller, action, area))
    {
        listItem.Attributes.Add("class", "active");
    }

    return MvcHtmlString.Create(listItem.ToString(TagRenderMode.Normal));
}

private static bool CheckForActiveItem(HtmlHelper htmlHelper, string controller, string action, string area)
{
    if (!CheckIfTokenMatches(htmlHelper, area, "area"))
    {
        return false;
    }

    return CheckIfValueMatches(htmlHelper, controller, "controller") && CheckIfValueMatches(htmlHelper, action, "action");
}

private static bool CheckIfTokenMatches(HtmlHelper htmlHelper, string item, string dataToken)
{
    var routeData = (string)htmlHelper.ViewContext.RouteData.DataTokens[dataToken];

    if (dataToken == "action" && item == "Index" && string.IsNullOrEmpty(routeData)) return true;

    if (dataToken == "controller" && item == "Home" && string.IsNullOrEmpty(routeData)) return true;

    if (routeData == null) return string.IsNullOrEmpty(item);

    return routeData == item;
}

.place-button-wrapper{
    position: absolute;
    bottom: 20px;
}

Answer 1

我修复了仅在离子标签中添加“包含：无”的问题。

Answer 2

如果通过在ion-iab上添加“ contain：none”不起作用，则在ion-tab-bar上添加“ contain：none”。

ion-tabs { contain: none; }

OR

ion-tab-bar { contain: none }

Answer 3

这段代码对我有用（我知道，也许这不是最干净的解决方案，但我没有找到其他方法）

我创建了一个递归方法，在此方法中尝试获取所有选项卡按钮，如果没有，我使用setTimeout调用该方法（setTimeout是避免填充堆栈所必需的），并在找到所有按钮，我访问了每个人的影子根，然后更改了溢出值：

  setStyle() {
    const all = document.querySelectorAll('.tab-has-icon');

    if(all.length === 0) {
      setTimeout(() => {
        this.setStyle();
      }, 0);
      return;
    }

    all.forEach(el => {
      el.shadowRoot.querySelector('.button-native').setAttribute('style','overflow: inherit')
    });
  }

Answer 4

我已经创建了所有答案的组合：

// as mentioned about
ion-tabs { contain: none; }
ion-tab-bar { contain: none }

 // a wrapper for the position
.buttonWrapper {
  position: absolute;
  bottom: 20px;
}

// for the overflow
ion-tab-button::part(native){
   overflow: visible;
}

离子4标签栏溢出

4 个答案: