Haron Kipkorir

Haron Kipkorir

Loki - Blazor Component Library [#1]

The Initial Code (Initial Commit)

Subscribe to my newsletter and never miss my upcoming articles

As a continuation to the previous article , I have decided to write this, to inform you about my progress so far. The whole idea behind me making Loki is to learn more about Blazor and all I have done so far, has been inspired by designs from CSS Layout.

Loki Button

This is actually like the third, if not the fifth feature I worked on, but I ended up deleting most of the code I had written earlier on. This is because I have no idea what I want this product to be. In the beginning, I wanted to work on the layout first, but it ended up being hard to come up with the CSS needed, so I decided to work on the small components first. Over time, I am hoping to create more small components would make it easy to make the bigger components eg., Layout and Navigation.

The Loki Button has 5 parameters so far. Class and Style used to take the custom styling a user might be interested to add to the button. It has an OnClick EventCallBack that is triggered when the button is clicked. It also takes a RenderFragment that will be rendered inside the button, and finally, it has a Disabled bool that is not working but it is intended to be used to disable the button.

Loki Avatar

I created this after the button. It has 4 parameters so far. Class and Style used to add custom style to the component. It also has an OnClick event and it takes a RenderFragment that is going to be rendered inside the avatar.

I plan to improve this component by adding the ability to take an image inside the avatar instead of just texts which currently is the intended way to the component to be used.

Summary

This basically covers my progress so far. I plan to add more features to the library. The pressing issue I currently have is to be able to have a color scheme, so it's easier to customize the colors of the components, but I am not going to work on it yet because the project still has a long way to go.

PS, the source code to the project can be found here .

 
Share this