Can I hide Tab Icon?

Ask for Help
1

Searched and haven’t found here in community…

Can I hide (remove) Tab Icon and leave its label only?

1 Like
2

You should be able to do this with CSS but not sure what the class would be. Inspect the element and take a look.

3

image
image777×546 88.5 KB

<pre><span><style>
.tbs-inner svg {
display: none;
}

This will do.

3 Likes
4

Спасибо!)

5

Doing this is possible with css but it would hide all the icons for all the tabs, sadly.

<pre><span><style>
[class="sc-jffIyK zNKGZ"] {
visibility: hidden
}
6

@ThinhDinh - in your attached app screen - could you please discover for me how is that possible to put an image over the caption and under hamburger menu sign? Thanks

7

It’s a combination of two CSS codes.

This to hide the “top” part of the screen.

<div><div>
<style>
[data-test="glide-app-bar"] >* {
backdrop-filter: blur(0px);
background:transparent;
-webkit-backdrop-filter: blur(0px);
}
#app-root div[opacity='1'] {
  color: transparent; 
}
.jiuuwu svg {
display: none;
}
.gpkkHC svg {
display: none;
}
.gpkkHC {
position: unset;
}

This for the image. Use it in a template column, change {I} to the image link.

<p>
<a style="position: absolute; width:100%; top: -105px; right: 0%; z-index:-2; opacity: 1" target="_blank" rel="noopener"></a>
</p>
<a style="position: absolute; width:100%; top: -105px; right: 0%; z-index:-2; opacity: 1" target="_blank" rel="noopener">
<div style="background: linear-gradient(to top, #282828 25%, #787878 75%); margin: 0%; padding-bottom:500px;"></div>
</a>
<p>
<a style="position: absolute; width: auto; top: -105px; right: 0%; z-index:-1; opacity: 0.5;" target="_blank" rel="noopener">
  <img style="object-fit: cover;" height="500" src="{I}">
   </a></p><center>
3 Likes
8

Is there a resolution for this yet? On a given tab I want to hide the icons of some of the other tabs, but not all. For example, I have single use tabs that are part of an on-boarding workflow that I control with custom buttons. Once complete I want to be able to show tab icons that are relevant for regular use. In another app I added these tabs to the menu, but it’s not intuitive…

Edit: Is it practical to add image icons with actions (navigate to tab) to the bottom of the screen in place of the hidden icons?

9

I imagine you can use this and have an empty image on tabs where you don’t want an icon.

2 Likes
10

Wow these are great! Thanks, I’m going to try them out.

1 Like