قدرت الکترون برگرفته از فناوری وب است و هر آنچه که در آنجا امکان پذیر باشد، در اینجا نیز امکان پذیر است و خصوصیت برنامه‌های دسکتاپ را نیز داراست. الکترون به دلیل بارگذاری فایل‌های html، به شما اجازه می‌دهد تا از ابزارهایی چون بوت استرپ و فریمورک‌ها و کیت‌های مشابهی چون جی‌کوئری و انگیولار، امبر Ember و ... در آن استفاده کنید. ولی با این حال، الکترون نوپا سعی دارد کیت‌های اختصاصی خودش را هم داشته باشد، که در این مقاله به آن‌ها اشاره می‌کنیم.
یکی از این کیت‌ها، فوتون نام دارد. فوتون شامل یک سری css ,sass، فونت و قالب‌های html است که به شما اجازه می‌دهد تا یک برنامه با ظاهری شبیه به برنامه‌های مک را داشته باشید. کامپوننت‌های فوتون شامل tab ها، لیست‌ها، منوی کناری، دکمه‌های معمولی یا جعبه ابزاری و کنترل‌های فرم‌ها می‌شود. با این حال اگر هم دوست ندارید که از این کامپوننت‌ها استفاده کنید، می‌توانید از layout ‌های آن استفاده کند که پنجره‌ی شما را تقسیم بندی می‌کنند.
برای استفاده از فوتون لازم است آن را دانلود کرده و فایل‌های آن را در پروژه‌ی خود کپی کنید. دایرکتوری dist آن شامل یک مثال می‌شود که می‌توانید آن را به داخل دایرکتوری پروژه خود کپی کنید؛ یا خود این دایرکتوری را به عنوان دایرکتوری پروژه تعیین کنید. بعد از آن، فایل‌های موجود در دایرکتوری template را به داخل دایرکتوری والد، یعنی dist انتقال دهید و داخل فایل html، مسیر فایل css را تصحیح نمایید. فقط می‌ماند که الکترون را بر روی این محل نصب کنید، یا اینکه الکترون نصب شده‌ی به صورت عمومی (Global) را در اختیار آن قرار دهید.
بعد از آن ممکن است با خطا مواجه شوید و وقتی فایل اصلی را که در اینجا نام آن app.js است، باز کنید، خطوط زیر را می‌بینید:
این نوع استفاده از ماژول‌های داخلی، متعلق به نسخه‌های اولیه است و در نسخه‌های اخیر پشتیبانی نمی‌شود. پس بهتر است این خطوط را به صورت‌هایی که قبلا گفته‌ایم تغییر دهید.
سپس برنامه را اجرا کنید تا رابط جدید کاربری را ببینید.
فقط یک مشکلی هست و آن هم این است که باید فریم یا پنجره‌ای را که خود الکترون تولید می‌کند، حذف کنیم برای حذف آن می‌توانید از خصوصیت frame در شیء Browser Window استفاده کنید:
در نسخه‌های 10 به بعد مک، از آنجاکه این خصوصیت، نه تنها فریم کرومیوم را حذف میکند، بلکه قابلیت‌هایی چون تغییر اندازه و ... را از آن نیز می‌گیرد، برای همین خصوصیت titleBarStyle را که به دو شکل هم می‌تواند نوشته شود، مورد استفاده قرار می‌دهیم.
حالا اگر برنامه را مجددا اجرا کنید، می‌بینید که قاب‌های دور آن حذف شده‌اند، ولی با چند ثانیه کار کردن متوجه این ایراد می‌شوید که پنجره قابل درگ کردن و جابجایی نمی‌باشد. برای حل آن باید از css کمک بگیریم:
دستور بالا را به هر المانی انتساب دهید، آن المان و فرزندانش قابل درگ خواهند بود، ولی اگر المانی را با این خصوصیت تنظیم کردید، ولی قصد دارید که یکی یا چند عدد از المان‌های فرزند این خاصیت را نداشته باشند، این دستور را به آنان انتساب دهید:
از آنجاکه در این رابط کاربری، نوار عنوان تگ مشخصی دارد:
با اضافه کردن این دستور css می‌توانید به آن قابلیت درگ را بدهید:
حالا مجددا برنامه را تست کنید تا نتیجه کار را ببینید.
همانطور که می‌بینید با کمترین زحمت، به چنین رابط کاربری رسیدید. تصویر زیر متعلق به برنامه‌ای است که در دو قسمت قبلی (+ + ) ساختیم و حالا با استفاده از این پکیج، ظاهر آن را تغییر داده‌ایم:

Electron UI Kit
دومین رابط کاربری که معرفی میکنیم در واقع یک کیت از یک سری کامپوننت است که بسیار شبیه به برنامه‌های دسکتاپ طراحی شده و شامل لیست‌ها، گریدها، کنترل‌ها و ... است که در دو فایل استایل، برای ویندوز و مک، مجزا شده‌اند.

Maverix
یک استایل تحت وب به نام Maverix است که البته در مورد برنامه‌های دسکتاپ و الکترون حرفی نزده و خود را فریمورکی برای استفاده در برنامه‌های تحت وب معرفی کرده است. ولی از آنجا که کنترل‌های موجود آن بر اساس سیستم عامل مک ایجاد شده‌اند، به راحتی می‌توانند خود را بجای برنامه‌های دسکتاپ جا بزنند. می‌توانید دموی آن را نیز ببینید.

پروژه ای که درحال حاضر نیاز به کپتچا داره بک اند صرفا یک  API مستقل هست و فرانت اند از بوت استرپ و jquery استفاده نمیشه به همین جهت بخاطر کپتچا نمیتونیم اضافه کنیم چنین وابستگی هایی رو. در ضمن به دلیل داشتن یکسری محدودیت‌ها کوکی هم استفاده نمیتونم کنم. 

با این شرایط میخواستم بدونم امکانش هست از این کتابخانه استفاده کنم ؟

اغلب برای تولید یک کامپوننت خوب و بدرد بخور از چند نا تکنولوژی با هم استفاده میکنند . html + css + javascript + .... 

ضمنا در سایت دسته بندی برای موضوعات وجود داره اما دسته بندی بر اساس تکنولوژی نه ! اگر میخواهید در یک زمینه خاص از ابتدا تجربه کسب کنید و بقیه تکنولوژی‌ها رو نمیدونید من کتاب آموزشی و سایتهای آموزشی دیگه رو پیشنهاد میکنم نه این سایت رو . 

بهر حال من فکر میکنم این سایت میتونه برای طراحان سایت جالبی باشه .

کامپوننتی که کار پردازش نتیجه API را انجام میدهد باید خروجی خود را بصورت یک EventCallBack به والد خود برای ذخیره ارسال کند، از این جهت متدها استاتیک نیستند. آیا از روش غیر استاتیک که معرفی کردید برای این سناریو میشود استفاده کرد یا روش دیگری وجود دارد؟ 

ممنون.

یک نکته‌ی تکمیلی: استفاده از فقط یک فضای نام برای کل پروژه‌ی کتابخانه‌ای

فرض کنید که یک کتابخانه از کامپوننت‌های Blazor را با پوشه‌بندی‌های مختلفی ایجاد کرده‌اید. هر کدام از این پوشه‌ها به صورت خودکار به همراه فضای نام متناظر با نام آن پوشه هم خواهند بود. برای مثال اگر در پوشه‌ی C:\Prog\BlazorLib\Folder1 کامپوننت Component1.razor قرار گیرد، فضای نام پیش‌فرض آن BlazorLib.Folder1 خواهد بود. این مساله توزیع و استفاده‌ی از کامپوننت‌های پوشه‌بندی شده را برای استفاده کنندگان ثالث مشکل می‌کند؛ چون باید به ازای هر پوشه، یک using را تعریف کنند. برای استفاده از تنها یک فضای نام در کل پروژه می‌توان از روش

در ابتدای تمام فایل‌های razor. استفاده کرد. این تنظیم، فضای نام پیش‌فرض پوشه‌ها را بازنویسی می‌کند.

<EditForm Model="NewPerson" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    
    <div class="form-group">
        <label for="firstname">First Name</label>
        <InputText @bind-Value="NewPerson.FirstName" class="form-control" id="firstname" />
        <ValidationMessage For="NewPerson.FirstName" />
    </div>

 protected abstract bool TryParseValueFromString(string value, out T result, out string validationErrorMessage);

@inherits InputBase<string>
<input type="password" @bind="@CurrentValue" class="@CssClass" />

@code {
    protected override bool TryParseValueFromString(string value, out string result, 
        out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

<EditForm Model="userInfo" OnValidSubmit="CreateUser">
    <DataAnnotationsValidator />

    <InputPassword class="form-control" @bind-Value="@userInfo.Password" />

@page "/route/{parameter:datetime}"

@page "/time/{param:datetime}"
<h3>Time</h3>
<p>@Param</p>
@code {
    [Parameter]
    public DateTime Param { get; set; }
}

window.getTitle = () => {
   return document.title;
};

@page "/"
@inject IJSRuntime jsRuntime
<h2>Page Title: @Title</h2>
<button class="btn btn-primary" @onclick="@GetTitle">Get Title</button>
@code {
public string Title = "";
    
    public async void GetTitle()
    {
            Title = await jsRuntime.InvokeAsync<string>("getTitle");
     }
}

@inject IJSRuntime jsRuntime

<button @onclick="NavigateToNewTab">New Tab Navigation</button>
@code {
public async Task NavigateToNewTab()
    {
        string url = "/counter";
        await jsRuntime.InvokeAsync<object>("open", url, "_blank");
    }
}

export function showPrompt(message) {
  return prompt(message, "Type name");
}

export function showAlert(message) {
  return prompt(message, "Hello");
}

@page "/js-isolation"

@inject IJSRuntime jSRuntime

<button class="btn btn-primary" @onclick="Prompt">Prompt</button>
<button class="btn btn-primary" @onclick="ShowAlert">Alert</button>


@code
{
    private IJSObjectReference module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            module = await jSRuntime.InvokeAsync<IJSObjectReference>("import", "./MyMdl.Js");
        }
    }

    private async Task Prompt()
    {
        var result = await module.InvokeAsync<string>("showPrompt", "What's your name?");
    }

    private async Task ShowAlert()
    {
        await module.InvokeVoidAsync("showAlert", "Hello!");
    }
}

namespace ProjectName.Folder1.Folder2
{
    public class Login
    {

    }
}

namespace ProjectName.Folder1.Folder2
{
    public partial class Login
    {

    }
}

namespace ProjectName.Folder1.Folder2
{
    public partial class Login
    {
        [Inject]
        public NavigationManager NavigationManager { set; get; }

        // ...
    }
}

namespace ProjectName.Folder1.Folder2
{
    public partial class Login : ComponentBase
    {
        [Inject]
        public NavigationManager NavigationManager { set; get; }

        // ...
    }
}