FluentBootstrap icon indicating copy to clipboard operation
FluentBootstrap copied to clipboard

Make TextContent take an IHtmlString instead of a string

Open gulsharan opened this issue 9 years ago • 8 comments

Is it possible to have navbar dropdown label allow HTML instead of plain text? I need to add an icon to the left of the caret, sort of like user icon in the image below.

dropdown_with_icon

gulsharan avatar May 10 '16 21:05 gulsharan

Try passing in new HtmlString("<foo>...</foo>") where you would normally pass in the content. Does that help? If not, care to post an example so I can take a closer look?

daveaglick avatar May 10 '16 21:05 daveaglick

Sorry for posting an incomplete code earlier. I've updated the code below:

NavbarNav.DropDown() takes a string, so passing an HtmlString does not work. Here's the code I'm using.

@using(var navbar = Html.Bootstrap().Navbar().Begin())
{
    using(var nav = navbar.NavbarNav().Begin())
    {
        using(var dropdown = nav.DropDown("Text Label").Begin())
        {
            ...
        }
    }
}

gulsharan avatar May 10 '16 21:05 gulsharan

@daveaglick Did you get a chance to look at this?

gulsharan avatar May 12 '16 16:05 gulsharan

Haven't quite gotten to it yet. I was on the verge of shipping a new version of another OSS project so that took all my free cycles. I'll try to take a look in the next few days.

daveaglick avatar May 14 '16 16:05 daveaglick

No rush, I think I can work something out for now. Thanks for this awesome library!

gulsharan avatar May 19 '16 02:05 gulsharan

I finally had a chance to take a close look at this. Unfortunately, I don't think what you want can be achieved right now.

Most components are really flexible and you can use methods like .Content() or .AddChild() to insert HTML and other elements into them. With navbar dropdowns that also works, but it always inserts stuff inside the dropdown. That's because all the stuff that sets up the dropdown inside the navbar is generated before it starts processing children.

The text in the constructor gets inserted via a TextContent property that all components have. The navbar checks to see if this is set and then adds it inside all the stuff at the top of the dropdown. Right now, this TextContent property is just a string and it automatically gets escaped. To make something like what you have in mind work, we would probably to somehow indicate whether this property should be escaped when used (maybe by changing to an object and then allowing it to take IHtmlString or something). That would be a pretty major change since this property is used in lots of components.

Which brings us to: I just don't see having the time to tackle it at the moment. While I still fix bugs and answer questions about this project, it's currently in "maintenance mode" while I shift attention to other projects. I plan to revisit it at some point, but not right now. Sorry!

daveaglick avatar May 19 '16 21:05 daveaglick

I'll leave this issue open as a reminder to revisit later.

daveaglick avatar May 19 '16 21:05 daveaglick

@daveaglick Thanks for a detailed response. Not an issue, I understand you're quite busy. I'll play around with it in a fork. If I ever get it to work, I'll send a PR your way for you to review.

Once again, thanks for the awesomeness!

gulsharan avatar May 19 '16 21:05 gulsharan