From 0191e77f6c76a029bc3cb9de63b6cea8da4c02db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Wed, 28 Oct 2020 15:58:32 +0300 Subject: [PATCH] Complete the theming document. --- docs/en/UI/AspNetCore/Theming.md | 42 +++++++++++++++++++++++++ docs/en/images/breadcrumbs-example.png | Bin 0 -> 9794 bytes 2 files changed, 42 insertions(+) create mode 100644 docs/en/images/breadcrumbs-example.png 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 0000000000000000000000000000000000000000..17ae5f8ba5741e78e98cbf6c4ab2ff1caba42614 GIT binary patch literal 9794 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 Tc#;+z3M06#s;yG2gvI?Ic4{8J literal 0 HcmV?d00001