สลับชิ้นการจัดรูปแบบของสลับ

ToggleSwitch เป็นชิ้นการจัดรูปแบบอย่างง่ายที่ใช้เพื่อแสดง ชนิดออบเจ็กต์ bool จากไฟล์ capabilities.json

ตัวอย่าง: สลับการใช้งานสลับ

ในตัวอย่างนี้ เราจะแสดงวิธีการสร้าง ToggleSwitch ชิ้นโดยใช้ยูทิลิตี้แบบจําลองการจัดรูปแบบ

วัตถุ Capabilities

แทรกส่วนย่อย JSON ต่อไปนี้ลงในไฟล์ capabilities.json

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "labels": {
      "properties": {
        "show": {
          "type": {
            "bool": true
          }
        }
      }
    }
  }
}

การจัดรูปแบบคลาสแบบจําลอง

แทรกส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์การตั้งค่า

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

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

    public showLabels: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show", // same as capabilities property name
        displayName: "Show",
        value: true
    });
    
    public slices: formattingSettings.Slice[] = [ this.showLabels ];
}

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

ตัวเลือกเพิ่มเติม

สลับชิ้นสลับยังสามารถใช้เป็นตัวสลับการ์ดระดับบนสุดได้

หากต้องการทําให้ ToggleSwitch ระดับบนสุดลบส่วน แบ่งส่วน และเพิ่มบรรทัดต่อไปนี้ไปยังระดับการตั้งค่าการ์ด:

topLevelSlice: formattingSettings.ToggleSwitch = this.showLabels;

ไฟล์การตั้งค่าการจัดรูปแบบสุดท้ายของคุณควรตรงกับตัวอย่างนี้:

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

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

    public showLabels: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show", // same as capabilities property name
        displayName: "Show",
        value: true
    });
    
    topLevelSlice: formattingSettings.ToggleSwitch = this.showLabels;
    public slices: formattingSettings.Slice[] = [];
}

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

เนื้อหาที่เกี่ยวข้อง

• บานหน้าต่างการจัดรูปแบบ
• ยูทิลิตี้แบบจําลองการจัดรูปแบบ