You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

SharpUI

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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
nugetNuGet
Version published
Maintainers
1
Created
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

blazor

FAQs

Package last updated on 06 Oct 2020

Did you know?

Socket

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

Related posts