How to create this type design in niotron

Discuss
1

Screenshot 2022-04-21 182701

Anyone can tell me how to this type design in niotron .

1 Like
2

Hello @Iron_man, Welcome to Niotron

3

Thanks @anon61431939 :smiley: :smiley: :smiley:
Can You Tell Me How To Create This Type Design In Nitron

4

@Iron_man use pop up menu component

5

@iaditya_nanda First look at the image and then say :expressionless: :expressionless: :expressionless:

6

I don’t think there is any other way

7

Its possible with image, But its not an good idea.

8

it is possible but I think it will not look exactly the same
First design this popup window like in the image on an arrangement. Use Cardview and put everything inside it. You have to design it yourself.

Use this extension =

  • Overlap (any overlap extension will work)

Follow this =

  • Use overlap extension and make that popup arrangement overlap on main screen (main screen means above which this popup will be shown)
  • Now whenever you click that button to open the popup window, first make that button’s background colour white.
  • Then use animation component to “FadeInUp” this popup window.
9

He talking about :point_down:

10

@Iron_man can you share full screen of the image?

11

that too is possible
this design is easy to make

  • first is cardview (mainCardView), which is the main arrangement and we will put everything inside it
  • then take 3 horizontal views
  • in each horizontal view take a cardview (iconCardView) and put a label (iconLabel) inside them, use material font and make those icons in those labels (iconLabel)
  • now drag one more label (nameLabel) in each horizontal view and but now put it outside the cardview (iconCardView) and fill the respective names as mentioned in the image.

Use space b/w different components to design it similar to the image

1 Like
12

Screenshot 2022-04-22 154701
Screenshot 2022-04-22 154701437Ă—510 57.8 KB

Round Option Make Not Icon or text

13

Not possible (I think) :slightly_smiling_face:

14

I don’t know if what I’m thinking is possible, although it may be a headache, but using the component overlay concept (RelativeView extension for example) and using some extension to round specific corners you could build something like this (attached image), I don’t know if make sense.

On the left side are the pieces separately, and on the right side the result putting everything together

Demo
Demo766Ă—375 13.1 KB

1 Like
15

I think it can be done if you use CSS and HTML in a webview instead of using card or something like this.