diff --git a/docs/en/UI/AspNetCore/Branding.md b/docs/en/UI/AspNetCore/Branding.md new file mode 100644 index 0000000000..b262c13d46 --- /dev/null +++ b/docs/en/UI/AspNetCore/Branding.md @@ -0,0 +1,3 @@ +# ASP.NET Core MVC / Razor Pages: Branding + +TODO \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/Breadcrumbs.md b/docs/en/UI/AspNetCore/Breadcrumbs.md deleted file mode 100644 index 6147f71236..0000000000 --- a/docs/en/UI/AspNetCore/Breadcrumbs.md +++ /dev/null @@ -1,3 +0,0 @@ -# Breadcrumbs - -TODO \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/Layout-Hooks.md b/docs/en/UI/AspNetCore/Layout-Hooks.md index 7039749142..168454a7c2 100644 --- a/docs/en/UI/AspNetCore/Layout-Hooks.md +++ b/docs/en/UI/AspNetCore/Layout-Hooks.md @@ -1,4 +1,4 @@ -# ASP.NET Core MVC / Razor Pages Layout Hooks +# ASP.NET Core MVC / Razor Pages: Layout Hooks ABP Framework theming system places the page layout into the [theme](Theming.md) NuGet packages. That means the final application doesn't include a `Layout.cshtml`, so you can't directly change the layout code to customize it. diff --git a/docs/en/UI/AspNetCore/Navigation-Menu.md b/docs/en/UI/AspNetCore/Navigation-Menu.md index ddbfbbd857..13a6e1678c 100644 --- a/docs/en/UI/AspNetCore/Navigation-Menu.md +++ b/docs/en/UI/AspNetCore/Navigation-Menu.md @@ -83,7 +83,7 @@ Here, a few notes on the menu contributors; There are more options of a menu item (the constructor of the `ApplicationMenuItem` class). Here, the list of all available options; -* `name` (`string`, required): The unique name of the menu item. +* `name` (`string`, required): The **unique name** of the menu item. * `displayName` (`string`, required): Display name/text of the menu item. You can [localize](../../Localization.md) this as shown before. * `url` (`string`): The URL of the menu item. * `icon` (`string`): An icon name. Free [Font Awesome](https://fontawesome.com/) icon classes are supported out of the box. Example: `fa fa-book`. You can use any CSS font icon class as long as you include the necessary CSS files to your application. diff --git a/docs/en/UI/AspNetCore/Page-Header.md b/docs/en/UI/AspNetCore/Page-Header.md new file mode 100644 index 0000000000..f6ec3074de --- /dev/null +++ b/docs/en/UI/AspNetCore/Page-Header.md @@ -0,0 +1,58 @@ +# ASP.NET Core MVC / Razor Pages: Page Header + +`IPageLayout` service can be used to set the page title, selected menu item and the breadcrumb items for a page. It's the [theme](Theming.md)'s responsibility to render these on the page. + +## IPageLayout + +`IPageLayout` can be injected in any page/view to set the page header properties. + +### Page Title + +Page Title can be set as shown in the example below: + +````csharp +@inject IPageLayout PageLayout +@{ + PageLayout.Content.Title = "Book List"; +} +```` + +* The Page Title is set to the HTML `title` tag (in addition to the [brand/application name](Branding.md)). +* The theme may render the Page Title before the Page Content (not implemented by the Basic Theme). + +### Breadcrumb + +> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.** + +Breadcrumb items can be added to the `PageLayout.Content.BreadCrumb`. + +**Example: Add Language Management to the breadcrumb items.** + +```` +PageLayout.Content.BreadCrumb.Add("Language Management"); +```` + +The theme then renders the breadcrumb. An example render result can be: + +![breadcrumbs-example](../../images/breadcrumbs-example.png) + +* The Home icon is rendered by default. Set `PageLayout.Content.BreadCrumb.ShowHome` to `false` to hide it. +* Current Page name (got from the `PageLayout.Content.Title`) is added as the last by default. Set `PageLayout.Content.BreadCrumb.ShowCurrent` to `false` to hide it. + +Any item that you add is inserted between Home and Current Page items. You can add as many item as you need. `BreadCrumb.Add(...)` method gets three parameters: + +* `text`: The text to show for the breadcrumb item. +* `url` (optional): A URL to navigate to, if the user clicks to the breadcrumb item. +* `icon` (optional): An icon class (like `fas fa-user-tie` for Font-Awesome) to show with the `text`. + +### The Selected Menu Item + +> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the selected menu item since it is not applicable to the top menu which is the only option for the Basic Theme for now.** + +You can set the Menu Item name related to this page: + +````csharp +PageLayout.Content.MenuItemName = "BookStore.Books"; +```` + +Menu item name should match a unique menu item name defined using the [Navigation / Menu](Navigation-Menu.md) system. In this case, it is expected from the theme to make the menu item "active" in the main menu. \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/Theming.md b/docs/en/UI/AspNetCore/Theming.md index 69e6b33769..8c680973b8 100644 --- a/docs/en/UI/AspNetCore/Theming.md +++ b/docs/en/UI/AspNetCore/Theming.md @@ -406,6 +406,8 @@ The Basic Theme doesn't implement this service, but the Lepton Theme implements: ![breadcrumbs-example](../../images/breadcrumbs-example.png) +See the [Page Header](Page-Header.md) document for more. + #### Tenant Switch The Account Layout should allow the user to switch the current tenant if the application is multi-tenant and the tenant was resolved from the cookies. See the [Basic Theme Account Layout](https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Layouts/Account.cshtml) as an example implementation. diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 978d40a5b5..536c5d9a03 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -452,6 +452,10 @@ "text": "Toolbars", "path": "UI/AspNetCore/Toolbars.md" }, + { + "text": "Page Header", + "path": "UI/AspNetCore/Page-Header.md" + }, { "text": "Layout Hooks", "path": "UI/AspNetCore/Layout-Hooks.md"