Exemple #1
0
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "nav";
            output.TagMode = TagMode.StartTagAndEndTag;

            output.AddClass("s-breadcrumbs");
            output.Attributes.SetAttribute("aria-label", "breadcrumb");

            var ctx = new BreadcrumbsContext();

            context.Items.Add(nameof(BreadcrumbsTagHelper), ctx);

            await output.GetChildContentAsync();

            var svgIcon = await SvgTagHelper.RenderAsync(_config, DividerIcon, "s-breadcrumbs--divider");

            for (var i = 0; i < ctx.Crumbs.Count; i++)
            {
                var crumb = ctx.Crumbs[i];

                output.Content.AppendHtml("<div class=\"s-breadcrumbs--item\">")
                .AppendHtml(crumb);

                if (i != ctx.Crumbs.Count - 1)
                {
                    output.Content.AppendHtml(svgIcon);
                }

                output.Content.AppendHtml("</div>");
            }
        }
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "div";
            output.TagMode = TagMode.StartTagAndEndTag;

            output.AddClass("s-avatar");

            string sizeClass;

            switch (Size)
            {
            case AvatarSize.Small:
                sizeClass = "s-avatar__sm";
                break;

            case AvatarSize.Medium:
                sizeClass = "s-avatar__md";
                break;

            case AvatarSize.Large:
                sizeClass = "s-avatar__lg";
                break;

            case AvatarSize.XLarge:
                sizeClass = "s-avatar__xl";
                break;

            case AvatarSize.XXLarge:
                sizeClass = "s-avatar__xxl";
                break;

            default:
                sizeClass = null;
                break;
            }

            if (sizeClass != null)
            {
                output.AddClass(sizeClass);
            }

            if (!string.IsNullOrWhiteSpace(Image))
            {
                // override the styles entirely to avoid potential conflicts
                output.Attributes.SetAttribute("style", $"background-image: url('{Image}')");
            }

            if (Letter != default)
            {
                output.Content.AppendHtml(@"<div class=""s-avatar--letter"">" + Letter + "</div>");
            }

            if (!string.IsNullOrWhiteSpace(BadgeIcon))
            {
                var content = await SvgTagHelper.RenderAsync(_config, BadgeIcon, "native s-avatar--badge");

                output.Content.AppendHtml(content);
            }
        }
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "aside";
            output.TagMode = TagMode.StartTagAndEndTag;
            var uniqueId = "id_" + Guid.NewGuid().ToString("N");

            var ctx = new ModalContext {
                UniqueId = uniqueId
            };

            context.Items.Add(nameof(ModalTagHelper), ctx);

            await output.GetChildContentAsync();

            var clearSvg = await SvgTagHelper.RenderAsync(_config, "ClearSm", null);

            output.AddClass("s-modal");

            // set a11y attributes
            output.Attributes.SetAttribute("tabindex", -1);
            output.Attributes.SetAttribute("role", "dialog");
            output.Attributes.SetAttribute("aria-labelledby", uniqueId + "title");
            output.Attributes.SetAttribute("aria-describedby", uniqueId + "description");

            // set the visibility
            output.Attributes.SetAttribute("aria-hidden", Shown ? "false" : "true");

            output.Content.AppendHtml($@"
<div class=""s-modal--dialog"" role=""document"">
    <h1 class=""s-modal--header"" id=""{uniqueId}-title"">{Title}</h1>
    {ctx.Body}
    {ctx.Footer}
    <a href=""#"" class=""s-modal--close s-btn s-btn__muted"" aria-label=""Close"" data-action=""s-modal#hide"">{clearSvg}</a>
</div>
");
        }