Work with elm-ui Input Components

Flavio Corpa
InstructorFlavio Corpa

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 2 years ago

Now that we have our cards more or less looking good lets add a button and style it as well so that it serves as a starting point for our dropdown component, this lesson will also help us to learn how to use the Element.Input module from elm-ui.

Instructor: [0:00] Now that our cards are looking good, we're going to start creating the compare dropdown to the right. For that, we need to scroll top again, and import one last thing, import Element.Input as Input.

[0:14] Now we're going to create our own element, and we're going to use Input doc button, which takes a list of things, a label with an element, textCompare, and a property onPress that we're going to set to nothing.

[0:31] The input module of Elm-UI is where we'll define the input texts, the buttons, the checkbox, etc. For now, we're just going to sign our own button, but later on, we'll use input.label and also input.checkbox.

[0:44] Now we're going to say that we want alignTop, alignRight, and we want the element to be focused to have to have a B frame background color, which is going to be rgb555 25 45 91. The font color is going to be white that we had it before.

[1:03] Now we're going to go ahead to our cart and add it after our text code here. Nice. This will serve as a starting point for our dropdown that we're about to build.

marc martino
marc martino
~ 2 years ago

the given snippet for the button has an extra set of brackets- it should be

btn =
    Input.button
        [ alignTop
        , alignRight
        , focused
            [ Background.color (rgb255 25 45 91)
            , Font.color white
            ]
        ]
        { label = el [] (text "COMPARE")
        , onPress = Nothing
        }
Lucas Minter
Lucas Minter
~ 2 years ago

You are correct! I fixed this issue in the transcripts.