Installation

Installation video tutorial here 1) Install

Omu.BlazorAwesome

from nuget https://www.nuget.org/packages/Omu.BlazorAwesome 2) Open

Pages/_Host.cshtml

, or

wwwroot/index.html

for WASM, and add references to

BlazorAwe.js

jquery.js

(or

jquery.slim

), and

BlazorAwe.css

...
<link href="_content/Omu.BlazorAwesome/css/theme/mat/BlazorAwe.css" rel="stylesheet" />
...
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.js" integrity="sha512-docBEeq28CCaXCXN7cINkyQs0pRszdQsVBFWUd+pLNlEk3LDlSDDtN7i1H+nTB8tshJPQHS0yu0GW9YGFd/CRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>    
<script src="_content/Omu.BlazorAwesome/js/BlazorAwe.js"></script>
...
</body>

3) Add these using statements to

_Imports.razor

@using Omu.BlazorAwesome.Core
@using Omu.BlazorAwesome.Components
@using Omu.BlazorAwesome.Models
@using Omu.BlazorAwesome.Models.Utils

Optional

* Try an awesome component. In

Index.razor

add this code:

<OButton>hi</OButton>

Hit

Ctrl+F5

to run the app. * For EntityFramework (Blazor Server, with Microsoft.EntityFrameworkCore.SqlServer package added), copy from our UiServer project (on github)

EFAwesomeExtensions

, and add its namespace (in our demo it's

UiServer.Utils

) to

_Imports.razor

@using UiServer.Utils

Now you'll be able to use the

EFData

extension method in your code as shown in our Server demo (download demo here).

Example index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp2</title>
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="BlazorApp2.styles.css" rel="stylesheet" />
    <link href="_content/Omu.BlazorAwesome/css/theme/mat/BlazorAwe.css" rel="stylesheet" />

</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.js" integrity="sha512-docBEeq28CCaXCXN7cINkyQs0pRszdQsVBFWUd+pLNlEk3LDlSDDtN7i1H+nTB8tshJPQHS0yu0GW9YGFd/CRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="_content/Omu.BlazorAwesome/js/BlazorAwe.js"></script>

    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

Comments