Comments (3)
@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 selectedBitNavItem
when selected and set thefill property
inside the path of mysvg
(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 :
- By the way if the approach for the monopoly of the
Platform-specific icons
is the compulsion of the developers to use All-NativeBitplatform blazorUi Components
and icons (which i think its a fantastic component base forBlazor
Projects) 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.
@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.
@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 togetherItemTemplateRenderMode
parameter to customize all of the nav items. - you can use the
Template
property of the BitNavItem together with itsTemplateRenderMode
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)
- The `BitOtpInput` needs a feature to utilize the general Size enum of the BlazorUI
- The `BitOtpInput` component is missing Label parameters
- The `BitOtpInput` is missing the Immediate functionalities
- The `BitSnackBar` demo needs some improvements
- The `BitOtpInput` has some problems when the `OnFocusIn` or `OnFocusOut` events are used
- Some projects need to be updated for the new changes of the BlazorUI
- Release `v-8.11.0`
- Version `8.11.0`
- The `BitDropdown` component is missing the Immediate functionalities
- `BitToggleButton` demo `Controlled` sample needs to be renamed to `Binding`
- `BitCalendar` demo has some inconsistency and issues in titles and descriptions
- There's a typo issue in the `BitCheckbox` component demo page
- Project dependencies are outdated
- `BitColorPicker` demo has some inconsistency in titles
- Missing test for `OnClick` event of the `BitOverlay` component
- `BitDatePicker` demo has some inconsistency and issues in titles and descriptions
- Missing tests of the `BitSeparator` component
- `BitDateRangePicker` demo has some inconsistency and issues in titles and descriptions
- Add tests for `FullWidth`, `FullHeight`, and `Full` parameters in `BitStack`
- `BitFileUpload` demo has some issues
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bitplatform.