What is this?

This adds a custom <RichText Text=""/> UI element which can be given text which will be parsed into custom UI panels. You can define as many custom panel types as you want and they can be as simple as adding asterisks for italics or as complex as URLs automatically becoming an embedded WebPanel.

How do I use it?

First you need to create your own razor panel that includes the [RichTextPanel] attribute. It can take either a single regex pattern as an argument, or the start and end strings which it will use to form a proper regex pattern.

@attribute [RichTextPanel("**", "**")]

<root>
</root>

<style>
    label {
        font-weight: 800;
    }
</style>

The text will be added to this panel as a child Label, so you can style it however you want from here, and even pre-include children in the root.

However, if you find yourself wanting more control than just styling the text, you can implement IRichTextPanel and it's ParseRichText() function.
Here's an example that allows you to do <i>item_resource_name<i> in RichText and have it display an item's icon and name

@attribute [RichTextPanel( @"<i>(.+?)</i>" )]
@implements IRichTextPanel

<root>
	@if ( Item is null ) return;
	<img [email protected] />
	<label>@Item.Name</label>
</root>

@code
{
	ItemResource Item;
	public void ParseRichText ( string text )
	{
		Item = ResourceLibrary.GetAll<ItemResource>().FirstOrDefault(x => x.ResourceName == text);
	}

	protected override int BuildHash () => Item.GetHashCode();
}

Then when you're ready to use the RichText element itself, you just do the following:

<RichText Text="**You have unlocked** the <i>wooden_sword</i>!" />

How do I get the examples from the picture???

You can find the example project here!

Report

What is this?

How do I use it?

How do I get the examples from the picture???

Package

Revision

Tags