Skip to content

Commit a799357

Browse files
ArgoZhangArgoZhang
authored
doc(Readme): update component readme doc (#695)
* chore: 增加 readme 文件链接 * chore: 更新组件 readme
1 parent acf4460 commit a799357

2 files changed

Lines changed: 51 additions & 72 deletions

File tree

‎BootstrapBlazor.Extensions.slnx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
<File Path=".gitignore" />
99
<File Path="exclusion.dic" />
1010
</Folder>
11+
<Folder Name="/docs/">
12+
<File Path="README.md" />
13+
<File Path="README.zh-CN.md" />
14+
</Folder>
1115
<Folder Name="/props/">
1216
<File Path="Directory.Build.props" />
1317
</Folder>
@@ -98,7 +102,6 @@
98102
<Project Path="src/middleware/BootstrapBlazor.Middleware/BootstrapBlazor.Middleware.csproj" />
99103
</Folder>
100104
<Folder Name="/src/props/">
101-
<File Path="src/.gitignore" />
102105
<File Path="src/Directory.Build.props" />
103106
<File Path="src/Directory.Build.targets" />
104107
<File Path="src/Frameworks.props" />

‎src/readme.md‎

Lines changed: 47 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -16,103 +16,79 @@
1616
- Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
1717
- Supports Progressive Web Applications (PWA).
1818
- Build with C#, a multi-paradigm static language for an efficient development experience.
19-
- .NET Standard 2.1 based, with direct reference to the rich .NET ecosystem.
20-
- Supports NET5. (Server-Side, WASM)
19+
- .NET 6.0, with direct reference to the rich .NET ecosystem.
2120
- Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.
2221

2322
## Online Examples
24-
[![website](https://img.shields.io/badge/China-https://www.blazor.zone-success.svg?color=red&logo=buzzfeed&logoColor=green)](https://www.blazor.zone)
23+
[![website](https://img.shields.io/badge/China-https://www.blazor.zone-success.svg?logo=buzzfeed&logoColor=green)](https://www.blazor.zone)
2524

2625
## Installation Guide
2726

2827
- Install .net core sdk [Official website](https://dotnet.microsoft.com/download)
29-
- Install Visual Studio 2019 lastest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)
28+
- Install Visual Studio lastest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)
3029

3130
```shell
3231
git clone https://github.com/dotnetcore/BootstrapBlazor.git
3332
cd BootstrapBlazor/src/BootstrapBlazor.Server
3433
dotnet run
3534
```
3635

37-
## Create a new project from the dotnet new template
36+
## Quick Installation Guide
3837

39-
1. Install the template
40-
41-
`dotnet new install Bootstrap.Blazor.Templates::*`
42-
43-
2. Create the Boilerplate project with the template
44-
45-
`dotnet new bbapp`
46-
47-
## Install Bootstrap Blazor Project Template
48-
49-
1. Download Project Template
50-
51-
Microsoft Market [link](https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate)
52-
53-
2. Double Click **BootstrapBlazor.UITemplate.vsix**
54-
55-
## Import Bootstrap Blazor into an existing project
56-
57-
1. Go to the project folder of the application and install the Nuget package reference
58-
59-
`dotnet add package BootstrapBlazor`
38+
### Install Package
39+
```
40+
dotnet add package BootstrapBlazor
41+
```
6042

61-
2. **Add** the `stylesheet` `javascripts` file to your main index file - `Pages/_Host.cshtml (Server)` or `wwwroot/index.html (WebAssembly)`
43+
### Add the following to `_Imports.razor`
44+
```
45+
@using BootstrapBlazor.Components
46+
```
6247

63-
**HTML**
48+
### Add the following to the `MainLayout.razor`
49+
```html
50+
<BootstrapBlazorRoot>
51+
@Body
52+
</BootstrapBlazorRoot>
53+
```
6454

55+
### Add the following to your HTML head section
56+
it's either **index.html** or **_Layout.cshtml/_Host.cshtml/App.razor** depending on whether you're running WebAssembly or Server
57+
```html
58+
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />
6559
```
66-
<!DOCTYPE html>
67-
<html lang="en">
68-
<head>
69-
. . .
70-
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
71-
</head>
72-
<body>
73-
. . .
74-
<script src="_framework/blazor.server.js"></script>
75-
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
76-
</body>
77-
</html>
60+
61+
### Add the following script at the end of the body
62+
```html
63+
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
7864
```
7965

80-
3. Open the `~/Startup.cs` file in the and register the `Bootstrap Blazor` service:
66+
### Add the following to the relevant sections of `Program.cs`
67+
```csharp
68+
builder.Services.AddBootstrapBlazor();
69+
```
8170

82-
**C#**
71+
## Usage
72+
```razor
73+
<Display Value="@_text"></Display>
74+
<Button Text="Button" OnClick="@ClickButton"></Button>
8375
84-
```
85-
namespace BootstrapBlazorAppName
86-
{
87-
public class Startup
76+
@code {
77+
private string? _text;
78+
private void ClickButton(MouseEventArgs e)
8879
{
89-
public void ConfigureServices(IServiceCollection services)
90-
{
91-
//more code may be present here
92-
services.AddBootstrapBlazor();
93-
}
94-
95-
//more code may be present here
80+
_text = DateTime.Now.ToString();
9681
}
9782
}
9883
```
9984

100-
## Visual Studio Integration
101-
102-
To create a new `Bootstrap Blazor` UI for Blazor application, use the Create New Project Wizard. The wizard detects all installed versions of `Bootstrap Blazor` for Blazor and lists them in the Version combobox—this enables you to start your project with the desired version. You can also get the latest version to make sure you are up to date.
103-
104-
1. Get the Wizard
105-
106-
To use the Create New Project Wizard, install the `Bootstrap Blazor` UI for Blazor Visual Studio Extensions. You can get it from the:
107-
108-
- Visual Studio Marketplace (for Windows)
109-
110-
2. Start the Wizard
111-
112-
To start the wizard, use either of the following approaches
113-
114-
### Using the Project menu:
85+
## Install CLI Template
86+
1. Install the template
87+
```
88+
dotnet new install Bootstrap.Blazor.Templates::*
89+
```
11590

116-
- Click File > New > Project.
117-
- Find and click the C# Blazor Application option (you can use the search, or filter by Blazor templates).
118-
- Follow the wizard.
91+
2. Create the Boilerplate project with the template
92+
```
93+
dotnet new bbapp
94+
```

0 commit comments

Comments
 (0)