SharpUI

SharpUI is a lightweight RCL package. There are fully responsive practical components you can use to develop your blazor web applications. You can use the framework in both Server-Side and Web Assembly versions of powerful Blazor! Since the package is in first releases, already there is No complete website for documentation but it is under development and it will be launched as soon as possible. Available components: Alert, AutoComplete, BackToTop, Button, Common, ConfirmationModal, Datepicker, Drop, Fab, File, HorizontalTable, Input, Modal, Spinner, Stepper, Step, Tabs, Tab

1.0.10

NuGet

Version published: 5 years ago

Maintainers: 1

Created: 5 years ago

Source

To use the framework you should do the following steps: 1-After installation you should create a class named Theme and implement ITheme interface for that class. For Example: public sealed class Theme : ITheme { public string FontFamily => "Arial, Helvetica, sans-serif"; public string PrimaryColor => "#2196f3"; public string PrimaryDarkColor => "#0d69b3"; public string SecondaryColor => "#4ae54a"; public string SecondaryDarkColor => "#15cc15"; public string SuccessColor => "#4ae54a"; public string SuccessDarkColor => "#15cc15"; public string ErrorColor => "#f44336"; public string ErrorDarkColor => "#f44336"; public string TextColor => "#4e4e4e"; public string TextSecondaryColor => "#465280"; public string TextHintColor => "#c0cad5"; public string TextHeaderColor => "#2c4162"; public string PrimaryBorderColor => "#c0cad5"; public string SecondaryBorderColor => "#e1e1e1"; public string ThirdBgColor => "rgb(244, 246, 248)"; public string PrimaryBgColor => "white"; public string SecondaryBgColor => "rgb(252, 252, 252)"; public string[] Shadows => new[] { "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)", "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)", "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)", "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)", }; public int SpacingLength => 8;

        public string Spacing(double i)
        {
            return $"{SpacingLength * i}px";
        }

        public string Spacing(double i, double j)
        {
            return $"{SpacingLength * i}px {SpacingLength * j}px";
        }

        public string Spacing(double i, double j, double m, double n)
        {
            return $"{SpacingLength * i}px {SpacingLength * j}px {SpacingLength * m}px {SpacingLength * n}px";
        }
    }

2-Add a singleton service in startup class. services.AddSingleton<ITheme, Theme>();

3-Add the following line to _Imports.razor. @using SharpUI 4-Inside the App.razor file wrap content using the Styles tag from the SharpUI namespace.

Sorry, there's nothing at this address.

5-Add the following script tag to bottom of _Host.cshtml file.

6-If you would like to use extra functionality on Theme you can initialize ThemeHelper in Startup class constructor. ThemeHelper.Init(new Theme());

Congratulations. You're ready to go!!!.

Written By Farshad Goodarzi.

Keywords

FAQs

What is sharpui?

Is sharpui well maintained?

Package last updated on 06 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install