# LomiriShape QML Type

Rounded rectangle containing a source image blended over a background color. More...

Import Statement: | import Lomiri.Components 1.3

- List of all members, including inherited members
- Obsolete members

## Properties

- aspect : enumeration
- backgroundColor : color
- backgroundMode : enumeration
- radius : string
- relativeRadius : real
- secondaryBackgroundColor : color
- source : variant
- sourceFillMode : enumeration
- sourceHorizontalAlignment : enumeration
- sourceHorizontalWrapMode : enumeration
- sourceOpacity : real
- sourceScale : vector2d
- sourceTranslation : vector2d
- sourceVerticalAlignment : enumeration
- sourceVerticalWrapMode : enumeration

## Detailed Description

The LomiriShape is a rounded rectangle (based on a squircle) containing an optional source image blended over a background color (solid or linear gradient). Different properties allow to change the look of the shape.

Examples:

    import Lomiri.Components 1.2

    LomiriShape {
        backgroundColor: "green"
    }

    import Lomiri.Components 1.2

    LomiriShape {
        source: Image {
            source: "lomiri.png"
        }
    }

## Property Documentation

sourceHorizontalWrapMode : enumeration
sourceVerticalWrapMode : enumeration

When the sourceFillMode is set to `LomiriShape.Pad` or `LomiriShape.PreserveAspectFit` or when the sourceScale and/or sourceTranslation properties are changed, the source texture might not cover the entire LomiriShape area. This property defines how the source texture wraps outside of its content area. The default value is `LomiriShape.Transparent`.

Ensure `LomiriShape.Repeat` is used only when necessary (in case of an `Image` or `AnimatedImage` source) as it requires the underlying texture to be extracted from its atlas. That slows down the rendering speed since it prevents the QtQuick renderer to batch the LomiriShape with others.

Note: Some OpenGL ES 2 implementations do not support `LomiriShape.Repeat` with non-power-of-two sized source textures.

Note: Setting this disables support for the deprecated image property.

- LomiriShape.Transparent - the source is clamped to transparent
- LomiriShape.Repeat - the source is repeated indefinitely

This QML property was introduced in Lomiri.Components 1.2.

aspect : enumeration

This property defines the graphical style of the LomiriShape. The default value is `LomiriShape.DropShadow`.

Note: Setting this disables support for the deprecated borderSource property. Use the LomiriShapeOverlay item in order to provide the inset "pressed" aspect previously supported by that property.

- LomiriShape.Flat - no effects applied
- LomiriShape.Inset - inner shadow slightly moved downwards and bevelled bottom
- LomiriShape.DropShadow - outer non-blurred shadow slightly moved downwards

backgroundColor : color

This property defines the background color. The default value is transparent black.

Note: Setting this disables support for the deprecated color and gradientColor properties.

This property was introduced in Lomiri.Components 1.2.

backgroundMode : enumeration

This property defines the background rendering mode. The default value is `LomiriShape.SolidColor`.

Note: Setting this disables support for the deprecated color and gradientColor properties.

- LomiriShape.SolidColor - the color is backgroundColor
- LomiriShape.VerticalGradient - the color is a vertical gradient from backgroundColor to secondaryBackgroundColor.

This property was introduced in Lomiri.Components 1.2.

radius : string

This property defines the corner radius. Three fixed values are supported: `"small"`, `"medium"` and `"large"`. The default value is `"small"`.

Note: Setting a non-zero relativeRadius value disables this property temporarily.

relativeRadius : real

This property defines a radius relative to the size of the LomiriShape. It is specified as a number between 0.0 (0%) and 0.75 (75%) corresponding to the proportion of the radius with regards to the smallest side (divided by 2 since a side has 2 angles). The default value is 0.0.

Note: Setting a non-zero value takes over the radius property.

This property was introduced in Lomiri.Components 1.3.

secondaryBackgroundColor : color

This property defines the secondary background color. It is used when backgroundMode is set to `LomiriShape.VerticalGradient`. The default value is transparent black.

Note: Setting this disables support for the deprecated color and gradientColor properties.

This property was introduced in Lomiri.Components 1.2.

source : variant

This property sets the source provider of a texture rendered in the LomiriShape. Supported types are `Image`, `AnimatedImage` (to render a GIF image for instance) and `ShaderEffectSource` (to embed a UI previously rendered with QML). It is blended over the background color. The default value is `null`.

It can be set either with an inlined `Image`:

    Item {
        LomiriShape {
            source: Image { source: "lomiri.png" }
        }
    }

or with an `Image` `id`:

    Item {
        Image {
            id: img
            visible: false
            source: "lomiri.png"
        }
        LomiriShape {
            source: img
        }
    }

Note that in this case, the `Image` is stored in the scene tree as any other items. So setting it as not visible might be needed.

The sampling filter is set through the given Item's `smooth` property. Set it to `false` for nearest-neighbor filtering or to `true` for bilinear filtering.

The fill modes and alignments set on the `Image` and `AnimatedImage` are not monitored, use the appropriate LomiriShape properties instead (sourceFillMode, sourceHorizontalAlignment and sourceVerticalAlignment).

Note: Setting this disables support for the deprecated image property.

This property was introduced in Lomiri.Components 1.2.

sourceFillMode : enumeration

This properties defines how the source texture fills the LomiriShape. The modes are the same as the ones used by `Image`, minus the tiling which is exposed through wrapping properties (sourceHorizontalWrapMode and sourceVerticalWrapMode). The default value is `LomiriShape.Stretch`.

Note: Setting this disables support for the deprecated image property.

- LomiriShape.Stretch - the source is scaled non-uniformly to fit
- LomiriShape.PreserveAspectFit - the source is scaled uniformly to fit without cropping
- LomiriShape.PreserveAspectCrop - the source is scaled uniformly to fit with cropping
- LomiriShape.Pad - the source is not scaled

This property was introduced in Lomiri.Components 1.2.

sourceHorizontalAlignment : enumeration

This property defines how the source texture is horizontally aligned inside the LomiriShape area. The default value is `LomiriShape.AlignLeft`.

Note: Setting this disables support for the deprecated image property.

- LomiriShape.AlignLeft - the source is aligned to the left
- LomiriShape.AlignHCenter - the source is aligned to the horizontal center
- LomiriShape.AlignRight - the source is aligned to the right

This property was introduced in Lomiri.Components 1.2.

sourceOpacity : real

This property holds the opacity of the source texture. Opacity is specified as a number between 0.0 (fully transparent) and 1.0 (fully opaque). The default value is 1.0.

Note: Setting this disables support for the deprecated image property.

This property was introduced in Lomiri.Components 1.2.

sourceScale : vector2d

This property defines the two-component vector used to scale the source texture. The texture is scaled at the alignment point defined by sourceHorizontalAlignment and sourceVerticalAlignment. The default value is `Qt.vector2d(1.0,1.0)`.

That can be used to change the size of the source texture, to flip it horizontally and/or vertically, to achieve pulsing animations, etc.

Here is a code sample showing how to apply an horizontal flip:

    LomiriShape {
        source: Image { source: "lomiri.png" }
        sourceScale: Qt.vector2d(-1.0, 1.0)
    }

Note: Setting this disables support for the deprecated image property.

This property was introduced in Lomiri.Components 1.2.

sourceTranslation : vector2d

This property defines the two-component vector in normalized item coordinates used to translate the source texture. The default value is `Qt.vector2d(0.0,0.0)`.

That can be used to put the source texture at a precise position, to create infinite scrolling animations (using the `LomiriShape.Repeat` wrap mode), etc.

Note: Setting this disables support for the deprecated image property.

This property was introduced in Lomiri.Components 1.2.

sourceVerticalAlignment : enumeration

This property defines how the source texture is vertically aligned inside the LomiriShape area. The default value is `LomiriShape.AlignTop`.

Note: Setting this disables support for the deprecated image property.

- LomiriShape.AlignTop - the source is aligned to the top
- LomiriShape.AlignVCenter - the source is aligned to the vertical center
- LomiriShape.AlignBottom - the source is aligned to the bottom

This property was introduced in Lomiri.Components 1.2.