Tesserae - Card

Card

Description

A card component with optional headers and footers

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Cards can contain different types of components. They can be used to show a list of items, a single item, or a mix of both.

API reference

class

Card

public sealed class Card : ComponentBase<Card, HTMLElement>, IHasBackgroundColor, IRoundedStyle

A bordered, shadowed surface used to group related content into a self-contained block.

Constructors

Constructor

Card

public Card(IComponent content, bool noAnimation = false)

Initializes a new instance of this class.

Properties

Property

Card.IsCompact

public bool IsCompact { get ; set ; }

Gets or set whenever the card is rendered in a compact form

Property

Card.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Methods

Method

Card.EnsureLayout

private void EnsureLayout()

Gets or set whenever the card is rendered in a compact form

Method

Card.OnClick

public override Card OnClick(ComponentEventHandler<Card, MouseEvent> onClick, bool clearPrevious = true)

Registers a callback invoked when the click event fires.

Method

Card.OnClick

public Card OnClick(Action action)

Registers a callback invoked when the click event fires.

Method

Card.SetTitle

public Card SetTitle(string title)

Sets the title of the component.

Method

Card.SetTitle

public Card SetTitle(IComponent title)

Sets the title of the component.

Method

Card.SetContent

public Card SetContent(IComponent content)

Sets the content of the component.

Method

Card.SetFooter

public Card SetFooter(IComponent footer)

Sets the footer of the component.

Method

Card.Compact

public Card Compact()

Renders the component in a compact form.

Method

Card.BackgroundColor

public Card BackgroundColor(string color)

Sets the background colour of the card.

Method

Card.Border

public Card Border(string color, UnitSize size = null)

Configures the component to border.

Method

Card.NoPadding

public Card NoPadding()

Removes / disables the padding on the component.

Method

Card.HoverColor

public Card HoverColor(bool enabled = true)

Enables or disables the hover colour overlay on the card.

Method

Card.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Card

card-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a basic card."));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Card with Header

card-header-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a card with a header."))
                .SetTitle(HStack().WS().AlignItemsCenter().Children(
                    TextBlock("Header").SemiBold(),
                    Tag("Sample Card").Primary().ML(8)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Card with Header and Footer

card-footer-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a card with a header and a footer."))
                .SetTitle("Header")
                .SetFooter(Button("Action").Primary());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Compact Card

card-compact-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a compact card.")).SetTitle("Header").Compact();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

card-hover-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This card has hover effect.")).HoverColor();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Custom Background

card-background-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This card has a custom background."))
                .BackgroundColor(Theme.Primary.Background);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Card

Description

API reference

Card

Constructors

Card

Properties

Card.IsCompact

Card.Background

Methods

Card.EnsureLayout

Card.OnClick

Card.OnClick

Card.SetTitle

Card.SetTitle

Card.SetContent

Card.SetFooter

Card.Compact

Card.BackgroundColor

Card.Border

Card.NoPadding

Card.HoverColor

Card.Render

Samples

Basic Card

Card with Header

Card with Header and Footer

Compact Card

Hover Card

Custom Background

See also

Referenced by