Compartir a través de

Segmento de formato MarginPadding

  • Artículo

MarginPadding es un segmento de formato compuesto que contiene propiedades de relleno izquierdo, derecho, superior e inferior combinadas. Se usa para representar tipos de objeto numérico o entero de archivo capabilities.json.

Recorte de pantalla del segmento MarginPadding.

Ejemplo: implementación de MarginPadding

En este ejemplo, se muestra cómo crear un segmento de MarginPadding mediante las utilidades del modelo de formato.

Objeto de funcionalidades

Inserte el siguiente fragmento JSON en el archivo capabilities.json.

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "labels": {
      "properties": {
        "left": {
          "type": {
            "numeric": true
          }
        },
        "right": {
          "type": {
            "numeric": true
          }
        },
        "top": {
          "type": {
            "numeric": true
          }
        },
        "bottom": {
          "type": {
            "numeric": true
          }
        }
      }
    }
  }
}

Aplicar formato a la clase de modelo

Inserte el fragmento de código siguiente en el archivo de configuración.

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

class LabelsCardSetting extends formattingSettings.SimpleCard {
    name: string = "labels"; // same as capabilities object name
    displayName: string = "Labels";

    public left : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "left", // same as capabilities property name
        displayName: "Left",
        value: 50
    });

    public right : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "right", // same as capabilities property name
        displayName: "Right",
        value: 50
    });

    public top : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "top", // same as capabilities property name
        displayName: "Top",
        value: 50
    });

    public bottom : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "bottom", // same as capabilities property name
        displayName: "Bottom",
        value: 50
    });

    public marginPadding: formattingSettings.MarginPadding = new formattingSettings.MarginPadding({
        name: "margin", // must be unique within the same object
        displayName: "Margin",
        left: this.left,
        right: this.right,
        top: this.top,
        bottom: this.bottom
    });

    public slices: formattingSettings.Slice[] = [ this.marginPadding ];
}

export class VisualSettings extends formattingSettings.Model {
    public labels: LabelsCardSetting = new LabelsCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.labels];
}

Contenido relacionado