So far developing the "Easy-Button" the expereince has been pretty smooth, after checking out some docs on lit element I was able to create a base button with different styles based on attributes provided. The style our group has gone for is a button that is intended to replicate the look of the easy button from staples. By default you get a red round circle with a silver border.
If you apply an attribute of buttonText you can set the text on the button, with the perspective attribute our button shifts to give more of a three dimensional look, the gradient attribute changes the base red color of the button to a light to darker red gradient, the link attribute sets the href link for the button click event, the disabled attribute changes the color of the button to a dark color and eliminates the hover pointer effect and disables any link provided. Finally we have also included @lrnwebcomponents/simple-icon/lib/simple-icon-lite.js" in our project to make adding icons to the button very easy.
At first when developing this button we didnt understand how to change the button styles and functionality based on provided attributes. Coming from other programming languages like C#, Java, and python we thought we would have to make use of the constructor but found it easiest to style our button ussing pure CSS. We also needed to figure out conditional rendering for attributes like icon and link, which we tried to do originally using regular if statements but after doing some research on the lit element docs found a much easier inline way of computing this.
in the future we want to add attributes for onclick functions, scaling of the button, and possibly adding sound effects for clicks.
Top comments (0)