ant-design-blazor
/
demo-reuse-tabs
зеркало из https://github.com/ant-design-blazor/demo-reuse-tabs.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

add more info

This commit is contained in:
James Yeung 2021-07-06 13:10:34 +08:00
Родитель a1d0adce4b
Коммит 49fd97b3d6
3 изменённых файлов: 52 добавлений и 29 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
.github/gh-pages/index.html поставляемый
Просмотреть файл

@ -7,10 +7,9 @@
<title>AntDesign ReuseTabs</title> <title>AntDesign ReuseTabs</title>
<base href="/demo-reuse-tabs/" /> <base href="/demo-reuse-tabs/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <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="css/app.css" rel="stylesheet" />
<link href="AntDesign.TabView.styles.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> </head>
<body> <body>
@ -187,6 +186,7 @@
</div> </div>
</div> </div>
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script> <script src="_framework/blazor.webassembly.js"></script>
</body> </body>

73
README.md
Просмотреть файл

@ -11,6 +11,7 @@ https://antblazor.com/demo-reuse-tabs/
![demo](./assets/reuse-tabs-demo1.gif) ![demo](./assets/reuse-tabs-demo1.gif)
# How to use # How to use
## Prerequisites ## Prerequisites
Follow the installation steps of AntDesign and install the AntDeisgn dependencies. 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`. 2. Modify the `App.razor` file, replace the `RouteView` with `ReuseTabsRouteView`.
```diff ```diff
<Router AppAssembly="@typeof(Program).Assembly"> <Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData"> <Found Context="routeData">
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> - <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+ <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> + <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof (MainLayout)" />
</Found> </Found>
... ...
</Router> </Router>
``` ```
3. Then modify the `MainLayout.razor` file, add the `ReuseTabs` component. Note that @Body is not required at this case. 3. Then modify the `MainLayout.razor` file, add the `ReuseTabs` component. Note that @Body is not required at this case.
```diff ```diff
@inherits LayoutComponentBase @inherits LayoutComponentBase
<div class="page"> <div class="page">
<div class="sidebar"> <div class="sidebar">
<NavMenu /> <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>
<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>
+ ;
}
```

4
src/AntDesign.TabView/wwwroot/index.html
Просмотреть файл

@ -7,10 +7,9 @@
<title>AntDesign ReuseTabs</title> <title>AntDesign ReuseTabs</title>
<base href="/" /> <base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <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="css/app.css" rel="stylesheet" />
<link href="AntDesign.TabView.styles.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> </head>
<body> <body>
@ -187,6 +186,7 @@
</div> </div>
</div> </div>
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script> <script src="_framework/blazor.webassembly.js"></script>
</body> </body>