Circle in Ion-tab

Ionic Framework ionic-v3
#1

Hi ! :slight_smile:
Is it possible to add a circle in a ion tab to have this layout please ? Image1

#2

https://jsfiddle.net/ThinkingStiff/WPh22/

You can put any circle div and use ‘position: absolute’ to put it on any ionic component of your choice.

width: 150px;
height: 150px;
background: red;
border-radius: 50%;

will give you a red circle.

and add:

position: absolute;
top: 50px (how far it is from the top)
left: 50px (how far it is from the left)

to control the circle’s position.
The circle must be within the same HTML file as your ion-tab…

#3

Yens but when I try to do that within ion tab the circle didn’t appear :frowning:

#4

In my opinion, it’s best to create your own tab using HTML5, CSS3, Angular 5 rather than using ion-tab for this purpose.

See how you can create your own tab using Anuglar 5 ngIf directive:

then you get an html5 tab menu which you can add any additional html5 component with custom CSS3 styles…

#5

Thank you I will try that but is it better to use ionic component than custom ?

#6

It depends… if the original ionic component doesn’t work, you’re free to create your custom component.

#7

I try but I didn’t sucess. Do you have a complete example please ?

#8