Browse Source

Update documentations according to #13665

pull/13707/head
Enis Necipoglu 4 years ago
parent
commit
975ea53ac1
  1. 8
      docs/en/UI/AspNetCore/Page-Header.md
  2. 2
      docs/en/UI/Blazor/Page-Header.md
  3. 4
      docs/en/UI/Blazor/Page-Layout.md
  4. 6
      docs/en/UI/Blazor/Toolbars.md
  5. BIN
      docs/en/images/breadcrumbs-example.png
  6. BIN
      docs/en/images/leptonx-selected-menu-item-example.gif
  7. BIN
      docs/en/images/leptonxlite-toolbar-main-example.png
  8. BIN
      docs/en/images/leptonxlite-toolbar-mainmobile-example.png

8
docs/en/UI/AspNetCore/Page-Header.md

@ -23,6 +23,8 @@ Page Title can be set as shown in the example below:
### Breadcrumb
> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.**
>
> The [LeptonX Lite Theme](../../Themes/LeptonXLite/AspNetCore.md) supports breadcrumbs.
Breadcrumb items can be added to the `PageLayout.Content.BreadCrumb`.
@ -48,11 +50,13 @@ Any item that you add is inserted between Home and Current Page items. You can a
### 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.**
>
> The [LeptonX Lite Theme](../../Themes/LeptonXLite/AspNetCore.md) supports selected menu item.
You can set the Menu Item name related to this page:
````csharp
```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.

2
docs/en/UI/Blazor/Page-Header.md

@ -16,6 +16,8 @@ Once you add the `PageHeader` component to your page, you can control the relate
## Breadcrumb
> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.**
>
> The [LeptonX Lite Theme](../../Themes/LeptonXLite/Blazor.md) supports breadcrumbs.
Breadcrumbs can be added using the `BreadcrumbItems` property.

4
docs/en/UI/Blazor/Page-Layout.md

@ -42,6 +42,10 @@ Menu item name can be set on runtime too.
}
```
![leptonx selected menu item](../../images/leptonx-selected-menu-item-example.gif)
> Be aware, The [Basic Theme](../Blazor/Basic-Theme.md) currently doesn't support the selected menu item since it is not applicable to the top menu.
## BreadCrumbs

6
docs/en/UI/Blazor/Toolbars.md

@ -8,6 +8,12 @@ There is only one **standard toolbar** named "Main" (defined as a constant: `Sta
In the screenshot above, there are two items added to the main toolbar: Language switch component & user menu. You can add your own items here.
Also, LeptonXLite has 2 different toolbars for desktop and mobile views which defined as constant: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
| LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
| :---: | :---: |
| ![leptonx](../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../images/leptonxlite-toolbar-mainmobile-example.png) |
## Example: Add a Notification Icon
In this example, we will add a **notification (bell) icon** to the left of the language switch item. A item in the toolbar should be a **Razor Component**. So, first, create a new razor component in your project (the location of the component doesn't matter):

BIN
docs/en/images/breadcrumbs-example.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
docs/en/images/leptonx-selected-menu-item-example.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

BIN
docs/en/images/leptonxlite-toolbar-main-example.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
docs/en/images/leptonxlite-toolbar-mainmobile-example.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Loading…
Cancel
Save