You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
20 lines
1.3 KiB
20 lines
1.3 KiB
4 years ago
|
<p>Tiles, Cards, Panels, and Sheets all seem to be similar containers with slightly different directional organization. There isn't any official terminology so I went with this being the kind of panel you'd find in Youtube's UI, especially in the comments section and related videos. I've added a couple buttons in the top right to demonstrate how that works, which also means this can function as a toast pattern too if you wanted.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>The key to this UI realizing that it's actually 3 columns, not 2 rows. The first column has the 48x48 image, then the title/content, then the buttons. Since the main tile component already uses a <b>flex-direction: row</b> the 48x48 image will automatically be on the left, and we only need to have CSS for the middle and right. You should also look at this little bit:</p>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code class="language-css">
|
||
|
|
tile middle {
|
||
|
|
/* ... */
|
||
|
|
flex-shrink: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
tile right {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<p>Setting <b>flex-shrink: 0</b> sets that column to not shrink (collapse) when it gets small. Without this the buttons would go vertical when the UI is shrunk down. I also found I had to put <b>flex-shrink: 3</b> on the middle component or it would expand as the amount of text increased. This forces it to shrink significantly when possible while keeping the buttons on the right solid.</p>
|