Open Closed

Customizing LeptonX Theme to Support RouterTabs in Blazor #9473


User avatar
0
thanhlg created

Check the docs before asking a question: https://blazorise.com/docs/extensions/routertabs, https://abp.io/docs/latest/ui-themes/lepton-x/blazor?UI=Blazor

Hi Support Team,

I'm working on customizing my Blazor app to use RouterTabs from Blazorise in the main content area. I want users to be able to open multiple tabs, instead of just switching between pages one at a time. The problem is, I'm not sure how to change only the content area without affecting other parts of the layout like the menu, sidebar, or toolbar...

How can I make the layout support RouterTabs in the content area, while keeping the rest of the layout the same? Are there any simple steps or tips for customizing just the content section in the LeptonX Theme? I've attached an image to show what I’m trying to achieve with RouterTabs.

Thanks a lot for your help! Looking forward to your advice.


5 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    To customize the LeptonX Theme in your ABP Blazor application to support Blazorise RouterTabs in the main content area (while keeping the sidebar, menu, and toolbar unchanged), follow these steps:

    1. Create a Custom Layout Component

      • Copy the default LeptonX layout component from your project or from the LeptonX theme source.
      • Place the copy in your own project (e.g., under /Themes/Custom/).
    2. Replace the Content Area with RouterTabs

      • In your custom layout, locate the section where the main content is rendered (usually with @Body or a similar placeholder).

      • Replace this with the Blazorise <RouterTabs> component, and configure it to manage your routes as tabs.

      • Example:

        @using Blazorise
        @using Blazorise.Router
        
        <RouterTabs>
            <TabPanel Title="Home" Url="/">
                <!-- Home content or component -->
            </TabPanel>
            <TabPanel Title="Privacy Policy" Url="/privacy-policy">
                <!-- Privacy Policy content or component -->
            </TabPanel>
            <!-- Add more TabPanels as needed -->
        </RouterTabs>
        
    3. Register and Use Your Custom Layout

      • Update your _Imports.razor or relevant routing configuration to use your custom layout for the pages you want to support tabbed navigation.
      • Example:
        @layout CustomLeptonXLayout
        
    4. Keep the Rest of the Layout Intact

      • Do not modify the sidebar, menu, or toolbar sections in your custom layout. Only replace the content area.
      • This ensures the look and feel of LeptonX is preserved except for the main content area.
    5. Optional: Make the Layout Replaceable

      • If you want to apply this layout globally, you can register it as the default layout in your Blazor app.

    Tips:

    This approach allows you to introduce tabbed navigation in the content area while keeping the rest of the LeptonX theme unchanged.

    Sources:

    • https://abp.io/docs/latest/ui-themes/lepton-x/blazor?UI=Blazor
    • https://blazorise.com/docs/extensions/routertabs

    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  • User Avatar
    0
    thanhlg created

    This answer doesn't solve my issue. Could someone provide more detailed support?

  • User Avatar
    0
    thanhlg created

    I managed to fix the issue on my own after waiting a long time without a detailed response. Could I please get a ticket refund for this? Thanks!

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Your ticket has been refunded.

    Thanks.

  • User Avatar
    0
    alper created
    Support Team Director

    could you tell us how did you solve your issue?

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on July 09, 2025, 06:20