Tesserae - Image

Image

Description

A responsive image element with optional sizing, fit-mode and lazy-loading support. Use the fluent helpers to set fit behaviour (Cover, Contain), an explicit width / height, or a fallback src shown while the primary image loads.

Usage

image-sample.cs

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 img = Image("/assets/logo.png").Width(128.px()).Height(128.px());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(img);
        }
    }
}

API reference

class

Image

public class Image : ComponentBase<Image, HTMLImageElement>, ISpecialCaseStyling, IHasBackgroundColor

A responsive image element with optional sizing, fit-mode and lazy-loading support.

Namespace: Tesserae
Inheritance: ComponentBase<Image, HTMLImageElement> → Image
Implements: ISpecialCaseStyling, IHasBackgroundColor

Constructors

Name	Description
Image	Initializes a new instance of this class.

Constructor

Image

public Image(string source, string fallback = null)

Initializes a new instance of this class.

Properties

Name	Description
StylingContainer	Gets or sets the styling container.
PropagateToStackItemParent	Gets or sets the propagate to stack item parent.
Source	Gets or sets the source.
Cursor	Gets or sets the CSS cursor of the component.
Background	Gets or sets the CSS background of the component.

Property

Image.StylingContainer

public HTMLElement StylingContainer

Gets or sets the styling container.

Property

Image.PropagateToStackItemParent

public bool PropagateToStackItemParent { get; private set; }

Gets or sets the propagate to stack item parent.

Property

Image.Source

public string Source { get ; set ; }

Gets or sets the source.

Property

Image.Cursor

public string Cursor { get ; set ; }

Gets or sets the CSS cursor of the component.

Property

Image.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Methods

Name	Description
Render	Renders the component's root HTML element.
Position	Configures the component to position.
Contain	Configures the component to contain.
Cover	Configures the component to cover.
Fill	Configures the component to fill.
NoFit	Removes / disables the fit on the component.
ScaleDown	Configures the scale down on the component.
Circle	Configures the component to circle.

Method

Image.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

Image.Position

public Image Position(string objectPosition)

Configures the component to position.

Method

Image.Contain

public Image Contain()

Configures the component to contain.

Method

Image.Cover

public Image Cover()

Configures the component to cover.

Method

Image.Fill

public Image Fill()

Configures the component to fill.

Method

Image.NoFit

public Image NoFit()

Removes / disables the fit on the component.

Method

Image.ScaleDown

public Image ScaleDown()

Configures the scale down on the component.

Method

Image.Circle

Overload
Circle()	Configures the component to circle.
Circle(int)	Configures the component to circle.

Circle()

public Image Circle()

Configures the component to circle.

Circle(int)

public Image Circle(int pixels)

Configures the component to circle.

Parameters

pixels int

Image

Description

Usage

API reference

Constructors

Image

Properties

Image.StylingContainer

Image.PropagateToStackItemParent

Image.Source

Image.Cursor

Image.Background

Methods

Image.Render

Image.Position

Image.Contain

Image.Cover

Image.Fill

Image.NoFit

Image.ScaleDown

Image.Circle

Circle()

Circle(int)

Parameters

See also