Code Monkey home page Code Monkey logo

Comments (3)

STRstark avatar STRstark commented on September 13, 2024 1

@msynk Thanks for Responding,🙏

im sorry for using pictures for sharing some of my projects source code, i try using GitHub code sharing capability

well, i use the recommended ItemTemplate to add custom svg icons using if statements for every item in the navbar :

<BitNav 
    Items="navItems"
    DefaultSelectedItem="navItems[0]"
    OnItemClick="(BitNavItem item) => HandleNavItemClick(item)"
    Styles="@(new(){
                Item = "font-weight : 700;",
                ItemContainer = "width : 90%; margin-top : 10px; margin-bottom :10px; margin-left : 10px; margin-right : 10px; padding-top:10px; padding-bottom : 10px; border-radius : 15px;",
                SelectedItemContainer = "width : 90%; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25); background : linear-gradient(90deg, #D3347B 0%, #FCCE6C 100%); border-radius : 15px; border-right : 0px;border-left : 0px; ",
                SelectedItem = "color : var(--bit-clr-bg-pri);",
                Root= "padding-top:0px;",
                ItemIcon = "transform : scale(1.3); margin : 5px;", 
                ToggleButton = "color : transpaernt; direction:ltr;"
            })" 
    ReversedChevron = "true"
>
    <ItemTemplate Context="item">
        @if (item.Text == Localizer[nameof(AppStrings.MainMenu)].Value) // Mina menu icon
        {   
            if (Selected == item)
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-bg-pri)" />
                </svg>

            }
            else
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-pri)" />
                </svg>

            }

        }
        else if (item.Text == Localizer[nameof(AppStrings.PageDashBoard)].Value) // Dashboard icon
        {
            if (Selected == item)
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-bg-pri)" />
                </svg>
            }
            else
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-pri)" />
                </svg>
            }
        }
        @* ... *@

        <span>@item.Text</span>

    </ItemTemplate>
</BitNav>
  • and because i had different colors for the selected items icon i tried storing the selected BitNavItem when selected and set the fill property inside the path of my svg (that is why i am using another if statements inside of every other if statements)
private BitNavItem? Selected;
private async Task HandleNavItemClick(BitNavItem item)
{
   if (string.IsNullOrEmpty(item.Url)) return;
   Selected = item;

   await CloseMenu();
}

and the product of the code in the app looks something like this :

image

  • By the way if the approach for the monopoly of the Platform-specific icons is the compulsion of the developers to use All-Native Bitplatform blazorUi Components and icons (which i think its a fantastic component base for BlazorProjects) i recommend considering some changes to the icons:
    • adding some component variants like Outlined, Filled, etc
    • expanding the diversity of the icons and adding categories so every BlazorUi user would have a fantastic experience while using this great product :)

Thanks for helping me out i am currently building my app using BitPlatforms template : BoilerPlate which is an Art i could say 😁

from bitplatform.

msynk avatar msynk commented on September 13, 2024 1

@STRstark thanks for your feedback.
we already have plans to support external icons (through custom CSS classes or image URLs) but unfortunately, it is not our priority for now, since adding these features requires a lot of effort from our side which we don't have time for atm.

from bitplatform.

msynk avatar msynk commented on September 13, 2024

@STRstark Thanks for contacting us.

Unfortunately, bit BlazorUI components do not support custom icons. the only built-in icons that we support are from our own Icons package.
but to achieve what you explained in the issue, there are a few ways developed in the BitNav component:

  • you can use the ItemTemplate parameter together ItemTemplateRenderMode parameter to customize all of the nav items.
  • you can use the Template property of the BitNavItem together with its TemplateRenderMode property to customize each item individually.

check this example out to see how you can use these customizations in action:

https://blazorui.bitplatform.dev/components/nav#example4

Note: to share source code, it's NOT a good idea to use images. GitHub has great support for code sharing in an issue.

from bitplatform.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.