Komentar Workspace

Komentar ruang kerja adalah elemen grafis yang dapat Anda masukkan teks. Biasanya digunakan untuk mendokumentasikan hal-hal tentang kode Anda, seperti komentar dalam bahasa pemrograman berbasis teks.

Komentar ruang kerja

Aktifkan komentar ruang kerja

Untuk mengaktifkan komentar ruang kerja di aplikasi, Anda perlu memberi pengguna beberapa cara untuk membuatnya. Salah satu cara untuk melakukannya adalah dengan menambahkan item menu konteks yang membuat komentar ruang kerja. Anda dapat mendaftarkan item menu konteks default untuk membuat, menghapus, dan menduplikasi komentar ruang kerja dengan kode berikut:

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

Anda juga dapat membuat opsi menu konteks Anda sendiri, atau menambahkan cara lain bagi pengguna untuk menambahkan komentar ruang kerja. Untuk mengetahui informasi selengkapnya tentang opsi menu konteks, lihat Menu konteks.

Sesuaikan komentar secara visual

Ada beberapa cara untuk menyesuaikan tampilan komentar ruang kerja. Tema ini menggunakan CSS, bukan tema. Anda dapat mengontrol sebagian besar warna dan ukuran berbagai bagian komentar, tetapi bukan cara posisinya.

Variabel CSS warna

Anda dapat menetapkan variabel css commentFillColour untuk mengubah warna latar belakang area teks. Anda dapat menetapkan variabel css commentBorderColour untuk mengubah warna panel atas komentar dan batas komentar.

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

Komentar ruang kerja dengan warna yang diubah

Class CSS

Ada beberapa class css berbeda yang ditetapkan ke berbagai elemen tampilan komentar, yang memungkinkan Anda memodifikasi gaya elemen.

Class CSS Gambar
blocklyComment, blocklyDraggable Komentar ruang kerja
blocklySelected, blocklyCommentHighlight Komentar yang dipilih Memilih komentar yang diciutkan
blocklyCollapsed Komentar ruang kerja yang diciutkan
blocklyCommentTopbar Panel atas komentar Workspace
blocklyFoldoutIcon Ikon lipat
blocklyCommentPreview, blocklyText Pratinjau komentar
blocklyDeleteIcon Ikon hapus
blocklyText Teks
blocklyResizeHandle Ikon ubah ukuran

Penggunaan CSS dasar

Pada sebagian besar kasus, Anda dapat menerapkan atribut khusus dengan class CSS yang sesuai:

.blocklyCommentTopbarBackground {
  height: 50px;
}

Komentar Workspace dengan bilah atas yang lebih tinggi

CSS untuk teks

Namun, untuk teks, Anda harus lebih spesifik guna mengganti CSS yang dihasilkan oleh perender.

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

Komentar Workspace dengan teks pratinjau berwarna biru

Komentar Workspace dengan teks input berwarna biru

CSS untuk sorotan yang dipilih

Dan untuk menyoroti komentar saat dipilih, objek yang harus diterapkan oleh CSS pada perubahan bergantung pada apakah komentar diciutkan atau tidak. Saat diciutkan, Anda menerapkan CSS ke blocklyCommentTopbarBackground, jika tidak, terapkan ke blocklyCommentHighlight.

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

Ikon

Class blocklyFoldoutIcon, blocklyDeleteIcon, dan blocklyResizeHandle semua diterapkan ke elemen <image>. Artinya, jika Anda ingin mengubah warna atau bentuk ikon, Anda dapat menyertakan gambar yang berbeda di folder media.

Nama image Gambar
foldout-arrow.svg Ikon lipat
delete-icon.svg Ikon hapus
resize-handle.svg Ikon ubah ukuran

Ikon hapus

Ikon hapus disembunyikan secara default. Jika ingin mengaktifkannya, Anda perlu menggunakan CSS agar terlihat:

.blocklyDeleteIcon {
  display: block;
}