I want to display an alert box with a list inside of it.
I don’t want to use an ActionSheet as I want the box to sit in the middle of the screen.
I know you can display radio buttons and checkboxes within an alert box but I want to display clickable list items.
Does anyone know of an easy way to achieve this?
Maybe an alert is not the best case here. Since alerts are more for short, immediate messages, not full scrolling lists like that. A modal would be a better option.
Thanks for the quick reply. The list would contain only about 4-5 items.
I am trying to make a feature similar to the popup that appears when you hold down on a message on the Viber mobile app.
Ideally, If I could display a popover in the middle of the screen that would solve my problem.
I did consider a modal but it isn’t suitable for this scenario.
Hope this will help, create a string out of a list similar to this,
this.mylist = "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"
this.mylist = "<p>Item 1<br>Item 2<br>Item 3</p>"
then pass this string to the message attribute in the Alert,
If I could display a popover in the middle of the screen that would solve my problem.
I think the best way to accomplish your design is indeed to use a popover component. In the template of your popover you could place any html you like.
Attention: due to a bug in the current beta 11 you must put the popover’s template inline to your popover page in order to have it displayed centered.
Yes this is perfect.
Including the template inline displays it properly in the middle of the screen.
Thanks very much!