add more info
This commit is contained in:
James Yeung
Родитель
a1d0adce4b
Коммит
49fd97b3d6
|
|
@ -7,10 +7,9 @@
|
|||
<title>AntDesign ReuseTabs</title>
|
||||
<base href="/demo-reuse-tabs/" />
|
||||
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
|
||||
<link href="css/app.css" rel="stylesheet" />
|
||||
<link href="AntDesign.TabView.styles.css" rel="stylesheet" />
|
||||
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
|
||||
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -187,6 +186,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
73
README.md
73
README.md
|
|
@ -11,6 +11,7 @@ https://antblazor.com/demo-reuse-tabs/
|
|||
|
||||
|
||||
# How to use
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Follow the installation steps of AntDesign and install the AntDeisgn dependencies.
|
||||
|
|
@ -21,40 +22,62 @@ Follow the installation steps of AntDesign and install the AntDeisgn dependencie
|
|||
|
||||
2. Modify the `App.razor` file, replace the `RouteView` with `ReuseTabsRouteView`.
|
||||
|
||||
```diff
|
||||
<Router AppAssembly="@typeof(Program).Assembly">
|
||||
<Found Context="routeData">
|
||||
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
+ <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
</Found>
|
||||
...
|
||||
</Router>
|
||||
```diff
|
||||
<Router AppAssembly="@typeof(Program).Assembly">
|
||||
<Found Context="routeData">
|
||||
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
|
||||
+ <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof (MainLayout)" />
|
||||
</Found>
|
||||
...
|
||||
</Router>
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
3. Then modify the `MainLayout.razor` file, add the `ReuseTabs` component. Note that @Body is not required at this case.
|
||||
|
||||
```diff
|
||||
@inherits LayoutComponentBase
|
||||
```diff
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
- <div class="top-row px-4">
|
||||
- <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
|
||||
- </div>
|
||||
- <div class="content px-4">
|
||||
- @Body
|
||||
- </div>
|
||||
+ <AntDesign.ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
- <div class="top-row px-4">
|
||||
- <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
|
||||
- </div>
|
||||
- <div class="content px-4">
|
||||
- @Body
|
||||
- </div>
|
||||
+ <AntDesign.ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" />
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```
|
||||
## Customize tab title
|
||||
|
||||
- If it's just text, you can use the `ReuseTabsPageTitle` attribute.
|
||||
|
||||
```diff
|
||||
@page "/counter"
|
||||
+ @attribute [ReuseTabsPageTitle("Counter")]
|
||||
```
|
||||
|
||||
- If you want to use a template, then implement the IReuseTabsPage interface and implement the method
|
||||
|
||||
```diff
|
||||
@page "/"
|
||||
+ @implements IReuseTabsPage
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
@code{
|
||||
+ public RenderFragment GetPageTitle() =>
|
||||
+ @<div>
|
||||
+ <Icon Type="home"/> Home
|
||||
+ </div>
|
||||
+ ;
|
||||
}
|
||||
```
|
||||
|
|
@ -7,10 +7,9 @@
|
|||
<title>AntDesign ReuseTabs</title>
|
||||
<base href="/" />
|
||||
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
|
||||
<link href="css/app.css" rel="stylesheet" />
|
||||
<link href="AntDesign.TabView.styles.css" rel="stylesheet" />
|
||||
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
|
||||
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -187,6 +186,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче