c# - 在下拉菜单中添加 Img？

Question

我正在使用 Radzen 组件在 blazorframework 中编写一个带有注册页面的 Web 应用程序。我需要用户提供带有国家代码的电话号码。要选择国家代码，我有一个带有国家缩写(“DE | US | AC”)的下拉菜单，我希望在它的左侧有适当的旗帜。有没有办法做到这一点。

Look at my Dropdown Menu

这是下拉列表的 HTML 部分

         <RadzenDropDown Data=@CountryCodes style="width:80px !important; top:9px;"
            AllowFiltering="true"
            FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
            FilterOperator="StringFilterOperator.StartsWith"
            TValue="string"
            Class="w-100"
            @bind-Value=@_value>
         <RadzenDropDown/>

我用 nuget“libPhonenumbers”填充下拉列表

    public HashSet<string> CountryCodes => PhoneNumberUtil.GetInstance().GetSupportedRegions();

Answer 1

这是一个使用 flag emojis 的解决方案.您需要一种方法来将国家/地区代码转换为标记表情符号。您还需要使用支持标志表情符号的字体，例如Noto Color Emoji制作旗帜 appear on windows .在下面的示例中，我使用了一个简单的 select 元素，但您可以轻松修改 RadzenDropDown。

<select @bind="_selectedCountryCode">
    <option disabled>Select country code</option>
    @foreach(var country in Countries)
    {
        <option value="@country.CountryCode">@country.FlagEmoji</option>
    }
</select>

<p>Selected country code: @_selectedCountryCode</p>

@code {
    private string _selectedCountryCode;
    private HashSet<string> CountryCodes = new HashSet<string> { "DE", "US", "AC" };

    private List<Country> Countries => CountryCodes
        .Select(x => new Country
        {
            CountryCode = x,
            FlagEmoji = IsoCountryCodeToFlagEmoji(x)
        })
        .ToList();

    private string IsoCountryCodeToFlagEmoji(string countryCode) =>
        string.Concat(countryCode.ToUpper().Select(x => char.ConvertFromUtf32(x + 0x1F1A5)));

    public class Country
    {
        public string CountryCode { get; set; }
        public string FlagEmoji { get; set; }      
    }
}

BlazorFiddle

How to convert country name to flag emoji article

RadzenDropDown 示例:

<RadzenDropDown Data="@Countries"
                style="width: 80px !important; top: 9px;"
                AllowFiltering="true"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                FilterOperator="StringFilterOperator.StartsWith"
                TValue="string"
                TextProperty="@nameof(Country.FlagEmoji)"
                ValueProperty="@nameof(Country.CountryCode)"
                Class="w-100"
                @bind-Value=@_selectedCountryCode>
</RadzenDropDown>