itob/RBLNews
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

blazor ui css works

Browse Source
This commit is contained in:
iTob 2024-09-07 15:21:16 +02:00
parent 7ed00cf42d
commit c744b55de4
14 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
RBLNews.Maui/MauiProgram.cs
View File

@ -15,7 +15,7 @@ namespace RBLNews.Maui
}); });
builder.Services.AddMauiBlazorWebView(); builder.Services.AddMauiBlazorWebView();
builder.Services.AddAntDesign(); builder.Services.AddBlazorBootstrap();
#if DEBUG #if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools(); builder.Services.AddBlazorWebViewDeveloperTools();

1
RBLNews.Maui/RBLNews.Maui.csproj
View File

@ -58,6 +58,7 @@
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<PackageReference Include="Blazor.Bootstrap" Version="3.0.0" />
<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" /> <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" /> <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="$(MauiVersion)" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="$(MauiVersion)" />

15
RBLNews.Maui/wwwroot/index.html
View File

@ -5,7 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>RBLNews.Maui</title> <title>RBLNews.Maui</title>
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="_content/RBLNews.Shared/css/bootstrap/bootstrap.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/RBLNews.Shared/blazor.bootstrap.css" rel="stylesheet" />
<!--<link rel="stylesheet" href="_content/RBLNews.Shared/css/bootstrap/bootstrap.min.css" />-->
<link rel="stylesheet" href="_content/RBLNews.Shared/css/app.css" /> <link rel="stylesheet" href="_content/RBLNews.Shared/css/app.css" />
<link rel="stylesheet" href="RBLNews.Maui.styles.css" /> <link rel="stylesheet" href="RBLNews.Maui.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
@ -23,6 +28,14 @@
<a class="dismiss">🗙</a> <a class="dismiss">🗙</a>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add sortable.js reference if SortableList component is used in your application. -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_framework/blazor.webview.js" autostart="false"></script> <script src="_framework/blazor.webview.js" autostart="false"></script>
</body> </body>

8
RBLNews.Shared/Components/Pages/Counter.razor
View File

@ -14,3 +14,11 @@
currentCount++; currentCount++;
} }
} }
<Card Style="width:18rem;">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

4
RBLNews.Shared/Components/Pages/Home.razor
View File

@ -2,6 +2,4 @@
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
Welcome to your new app. Welcome to your new app.
<Button Type="primary">Hello World from ANT CSS!</Button>

1
RBLNews.Shared/RBLNews.Shared.csproj
View File

@ -13,6 +13,7 @@
<ItemGroup> <ItemGroup>
<PackageReference Include="AntDesign" Version="0.20.3" /> <PackageReference Include="AntDesign" Version="0.20.3" />
<PackageReference Include="Blazor.Bootstrap" Version="3.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" /> <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
</ItemGroup> </ItemGroup>

2
RBLNews.Shared/_Imports.razor
View File

@ -1,4 +1,4 @@
@* ANT CSS DESIGN IMPORT -------------------- *@ @* ANT CSS DESIGN IMPORT -------------------- *@
@using AntDesign @using BlazorBootstrap;
@using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web

3
RBLNews.Shared/wwwroot/css/app.css
View File

@ -1,4 +1,4 @@
html, body { /*html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
@ -84,3 +84,4 @@ h1:focus {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
} }
} }
*/

7
RBLNews.Shared/wwwroot/css/bootstrap/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
RBLNews.Shared/wwwroot/css/bootstrap/bootstrap.min.css.map
View File

File diff suppressed because one or more lines are too long

14
RBLNews.Web/Components/App.razor
View File

@ -5,7 +5,11 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="_content/RBLNews.Shared/css/bootstrap/bootstrap.min.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/RBLNews.Shared/blazor.bootstrap.css" rel="stylesheet" />
@* <link rel="stylesheet" href="_content/RBLNews.Shared/css/bootstrap/bootstrap.min.css" /> *@
<link rel="stylesheet" href="_content/RBLNews.Shared/css/app.css" /> <link rel="stylesheet" href="_content/RBLNews.Shared/css/app.css" />
<link rel="stylesheet" href="RBLNews.Web.styles.css" /> <link rel="stylesheet" href="RBLNews.Web.styles.css" />
<HeadOutlet @rendermode="InteractiveServer" /> <HeadOutlet @rendermode="InteractiveServer" />
@ -13,7 +17,13 @@
<body> <body>
<Routes @rendermode="InteractiveServer" /> <Routes @rendermode="InteractiveServer" />
<AntContainer @rendermode="RenderMode.InteractiveAuto" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add sortable.js reference if SortableList component is used in your application. -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_framework/blazor.web.js"></script> <script src="_framework/blazor.web.js"></script>
</body> </body>

2
RBLNews.Web/Components/_Imports.razor
View File

@ -3,7 +3,7 @@
@using RBLNews.Shared.Components @using RBLNews.Shared.Components
@* ANT CSS DESIGN IMPORT -------------------- *@ @* ANT CSS DESIGN IMPORT -------------------- *@
@using AntDesign @using BlazorBootstrap;
@* DEFAULT IMPORTS -------------------------- *@ @* DEFAULT IMPORTS -------------------------- *@
@using System.Net.Http @using System.Net.Http

2
RBLNews.Web/Program.cs
View File

@ -5,7 +5,7 @@ var builder = WebApplication.CreateBuilder(args);
// Add services to the container. // Add services to the container.
builder.Services.AddRazorComponents() builder.Services.AddRazorComponents()
.AddInteractiveServerComponents(); .AddInteractiveServerComponents();
builder.Services.AddAntDesign(); builder.Services.AddBlazorBootstrap();
var app = builder.Build(); var app = builder.Build();

6
RBLNews.Web/RBLNews.Web.csproj
View File

@ -1,4 +1,4 @@
<Project Sdk="Microsoft.NET.Sdk.Web"> <Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup> <PropertyGroup>
<TargetFramework>net8.0</TargetFramework> <TargetFramework>net8.0</TargetFramework>
@ -14,4 +14,8 @@
<Folder Include="wwwroot\" /> <Folder Include="wwwroot\" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<PackageReference Include="Blazor.Bootstrap" Version="3.0.0" />
</ItemGroup>
</Project> </Project>