Customize the prototype / tab bar of the E-Book app

What I tried this time.
★ An alternative to the tab bar at the bottom of the screen.
★ Page transition animation.
★ Elements that are displayed / hidden by device height.

6 Likes

this is really cool!.. you going to share css for this? :wink:

what is the css for full screen image in welcome screen? that looks great…
i know you probably wont tell code for that amazing button lol… looks like a lot of work

<div top:0px; left: 0%;  z-index:-1;" target="_blank">
<img src="image url" style="height: 55rem">
<pre><span><style>
[data-test="glide-app-bar"]
{display: none}
.jiuuwu svg 
{ display: none; }

The CSS on the TOP screen is the above description.

  • I think there are other ways.
  • The CSS class name may change due to specification changes.

how to apply that in rich text? with image URL and i can put tiles on top of that image

Please specify the image address in the “image url” part.

not working, image is not stretching to the top i still have a bottom tab bar

Investigate the cause.
Please wait for a little while.

1 Like

and i can’t put elements on top that image, is there a way to send that image to the background?

BTW, you are a magician! i love your sample of E-Book… it is sick!

1 Like
<div style="position: fixed; 
top:0px; left: 0%;  z-index:-1;" target="_blank">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/9Iaue2czbsl7ssKsKXOS.jpg" style="height: 46em; ">
<pre><span><style>
.jiuuwu svg {
display: none;
}
[data-test="glide-app-bar"]
{display: none}

★ Please try this.
★ The code you sent will generate a background image.
★ Regular components can be placed on top.
★ If you move a tab other than the main tab to the side menu on the tab edit screen, the bottom tab will not be displayed.

1 Like

. .

still bottom bar is there, but this is a great improvement!
ありがとうございました @hisashi.fujita !

1 Like

now only thing i need is to change images to smaller sizes than Glide is offering, and i can make full screen view like a real website! lol
is there a css for that?

<div style="position: fixed; top:0px; left: 0%; z-index:-1;" target="_blank">
<img class="back_image" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/9Iaue2czbsl7ssKsKXOS.jpg">
    <pre><span><style>
    .back_image{
    width: max(400px, 100vw);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}

You may be able to use this CSS.
Depending on how it is used, it may not work well.

1 Like

can I apply this to the images from glide dynamically

and if there is a chance to take out the bottom tab bar…

It can be applied dynamically using the glide table template function.
★ Write the URL of the image in the G spreadsheet.
★ Write CSS on the glide table template.
★ Associate the image URL of the G spreadsheet with the image URL part of CSS.

1 Like

あなたは最高です、そして私は本当にあなたの助けに感謝します

<pre><span><style>
/*Hide svg at the top——————————————*/
.jiuuwu svg { display: none; }
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:none; }
/*Hide svg at the bottom——————————————*/
.sc-cOigif.fALvAp svg { display: none; }

★ You can hide the upper and lower basic items with the above CSS.
★ Please use partially if necessary.
★ It is necessary to prepare a transition to another tab with a floating button etc.

1 Like

thank you!

is there a way to attach dynamic text to floating button?