Add elm-ui Border.shadow to Highlight Any Element
Now that our dropdown is almost finished lets just drop some shadow in the options selector to make it more visually clear that its over any other element in our page. This is an attribute that we can control the offset, size, blur, and color.
We will want to do this to our viewCard as well. We will also make the viewCard function more flexible by adding additional Html attributes from the outside to make each card have a different height. That way any time you want to override default attributes, you can pass in a new style.
Flavio Corpa: [0:00] Our dropdown now is looking quite good, but it lacks a couple details. We're going to add a border shadow to make it more clear that these options are above the card. For doing that, we go here to the list attributes for the dropdown and say border.shadow. We need an offset of and 4, a size, which is a Float of .1, a blur of 6. Finally, the color is going to be lightgray.
[0:27] If we open our dropdown, we see that we have a beautiful box shadow. You'll see that the state for the dropdown is shared because in reality it's just one dropdown which is being repeated in the four cards. Don't worry about that. We will deal with a different state for each dropdown and the different selections in a future lesson.
[0:44] We want to also have a box shadow but only for the first card, the Overall card. How are we going to do it? First, we're going to copy this. If we go to our card definition, we're going to need to pass another argument to our viewCard function, which is going to be the attributes.
[1:02] This is going to be a list of attributes of message type. Here, in our row function, we're going to extend it with whatever we received in the attributes argument.
[1:14] Of course, our compiler is going to complain about that we are not passing that extra list of arguments to our cards, so let's do them now. For the first viewed card, we are going to paste now the styles for the shadow, and we're going to adjust it a little bit and say that the offset is 3 and blur is going to be 5.
[1:32] You see now that the Overall card is getting a little clunky. What we are going to do is have a separate binding for it to make it more clean. We're going to benefit from these arguments, and we want to make category1 smaller than the rest, 200. We're going to say that the rest of the cards are going to have a height of 300.
[1:53] What you see now, this strategy gives us more power over each of the cards, and all of them can be different now and have different styling and attributes.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!