diff --git a/docs/en/UI/AspNetCore/Theming.md b/docs/en/UI/AspNetCore/Theming.md index 1811213d6f..9f3534b565 100644 --- a/docs/en/UI/AspNetCore/Theming.md +++ b/docs/en/UI/AspNetCore/Theming.md @@ -363,6 +363,20 @@ In this way, the page can import styles and scripts to the layout. @await RenderSectionAsync("styles", required: false) ```` +#### Content Toolbar Section + +Another pre-defined section is the Content Toolbar section which can be used by the pages to add code just before the page content. The Basic Theme renders it as shown below: + +````html +
+
+ @RenderSection("content_toolbar", false) +
+
+```` + +The container div's id must be `AbpContentToolbar`. This section should come before the `RenderBody()`. + #### Widget Scripts The [Widget System](Widgets.md) allows to define reusable widgets with their own style/script files. All the layouts should render the widget style and scripts. @@ -390,6 +404,34 @@ ABP scripts (`ApplicationConfigurationScript` and `ServiceProxyScript`) should b ```` +#### Page Title, Selected Menu Item and Breadcrumbs + +`IPageLayout` service can be injected by any page to set the Page Title, the selected menu item name and the breadcrumb items. Then the theme can use this service to get these values and render on the UI. + +The Basic Theme doesn't implement this service, but the Lepton Theme implements: + +![breadcrumbs-example](../../images/breadcrumbs-example.png) + +#### 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. + +### Layout Classes + +The Standard Layouts (`Application`, `Account` and `Empty`) should add the following CSS classes to the `body` tag: + +* `abp-application-layout` for the `Application` layout. +* `abp-account-layout` for the `Account` layout. +* `abp-empty-layout` for the `Empty` layout. + +In this way, applications or modules can have selectors based on the current layout. + +### RTL + +To support Right-To-Left languages, the Layout should check the current culture and add `dir="rtl"` to the `html` tag and `rtl` CSS class the the `body` tag. + +You can check `CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft` to understand if the current language is a RTL language. + ### The NPM Package A theme should have a NPM package that depends on the [@abp/aspnetcore.mvc.ui.theme.shared](https://www.npmjs.com/package/@abp/aspnetcore.mvc.ui.theme.shared) package. In this way, it inherits all the Base Libraries. If the theme requires additional libraries, then it should define these dependencies too. diff --git a/docs/en/images/breadcrumbs-example.png b/docs/en/images/breadcrumbs-example.png new file mode 100644 index 0000000000..17ae5f8ba5 Binary files /dev/null and b/docs/en/images/breadcrumbs-example.png differ