I have the following data array:
public tools: Tool[] = [
{ image: './assets/img/OpenFolder.svg', title: 'Upload' },
{ image: './assets/img/Save.png', title: 'Save' },
{ image: './assets/img/Printer.png', title: 'Printing' },
{ image: './assets/img/Delete.png', title: 'Delete' },
{ image: './assets/img/Paste.svg', title: 'Paste' },
{ image: './assets/img/Copy.png', title: 'Copy' },
{ image: './assets/img/favicon.png', title: 'Rotate left' },
{ image: './assets/img/favicon.png', title: 'Rotate right' },
{ image: './assets/img/favicon.png', title: 'Flip vertical' },
{ image: './assets/img/favicon.png', title: 'Flip horizontal' },
{ image: './assets/img/favicon.png', title: 'Crop picture' },
{ image: './assets/img/favicon.png', title: 'Resize picture' },
{ image: './assets/img/favicon.png', title: 'Brightness' },
{ image: './assets/img/favicon.png', title: 'Color' },
{ image: './assets/img/favicon.png', title: 'Opacity' },
];
The HTML code:
<ul>
<li *ngFor="let tool of tools" title="{{ tool.title }}"><img src="{{ tool.image }}"></li>
</ul>
And SCSS code:
ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
Items display horizontally and inline when the screen is shrunk smaller than max-width
I'm hoping that when the screen shrinks to less than max-width, the newline items will be pushed into a pop-up window (only when the button is clicked will the window pop up)
Illustrating images:
Looking forward to hearing from everyone!
