Primitives

Role

  • A primitive is the smallest rendering element we have in Dana,
  • A primitive is agnostic to the rendering technology,
  • A primitive is NOT responsible to get its data,
  • A primitive is used by a view

Declaration Example

import $TextPrimitive from "@TextPrimitive";
import $Theme from "@Theme";

export default $TextPrimitive.declare("LabelAtomPrimitive", {
    statics: /** @lends LabelAtomPrimitive */ {
        MAX_LINES: 1
    },

    properties: /** @lends LabelAtomPrimitive.prototype */ {
        size: $Theme.SIZE_H5_7,
        family: $Theme.FONT_REGULAR,
        color: $Theme.COLOR_LIGHT,
        maxLines: ({statics}) => statics.MAX_LINES,
        ellipsis: true,
        align: "left"
    }
});

Existing primitives

There is a short list of existing primitives :

  • RectanglePrimitive: Allow to display a simple rectangle will fill color and border
  • TextPrimitive: Allow to display a simple text on one or multiple lines
  • ImagePrimitive: Allow to display a simple image without any resize
  • ContainImagePrimitive: Inherits from ImagePrimitive but apply a contain resize
  • CoverImagePrimitive: Inherits from ImagePrimitive but apply a cover resize
  • SpritePrimitive: Allow to display sprites that can be animated

Caution

Regarding image primitive, it is highly recommended to use ImagePrimitive that loads an image in the correct size. Contain and Cover logic has cost that will depends on renderers. Prefer to use ImagePrimitive and only if your case is specific, use CoverImagePrimitive or ContainImagePrimitive