Tema

Tema adalah cara untuk menyesuaikan tampilan dan nuansa Blockly. Anda dapat menyesuaikan warna blok, warna kategori, dan komponen tertentu melalui class Themes. Jika Anda ingin menyesuaikan komponen tambahan, kami menyediakan nama tema sebagai class di div injeksi. Hal ini memungkinkan pengguna mengubah tampilan komponen yang tidak didukung melalui CSS. Sasaran utama kami dalam membuat tema adalah memberdayakan developer untuk membuat pengalaman Blockly yang lebih mudah diakses.

Properti Tema

Tema adalah objek dengan beberapa properti: tema dasar yang akan diperluas, objek gaya untuk blok, kategori, komponen, dan font, serta apakah akan menggunakan topi untuk blok awal atau tidak.

Gaya Blok

Gaya blok terdiri dari empat bidang:

  • colourPrimary (wajib) - Warna latar belakang blok.
  • colourSecondary (opsional) - Warna latar belakang jika blok adalah blok bayangan.
  • colourTertiary (opsional) - Warna batas atau sorotan blok.
  • hat (opsional) - Menambahkan topi ke blok, jika nilainya ditetapkan ke cap. Pelajari topi lebih lanjut.

Blok dengan panah yang mengarah ke warna primer, sekunder, dan tersier

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Tema akan menyertakan pemetaan nama gaya blok ke objek gaya blok:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Gaya Kategori

Gaya kategori hanya memiliki properti warna.

  • Warna (wajib) - Warna kategori di toolbox. Biasanya warna ini harus sama dengan colourPrimary pada sebagian besar blok dalam kategori tersebut. Hal ini memudahkan pengguna untuk mengetahui blok mana yang termasuk dalam kategori tertentu.

Screenshot toolbox dengan warna kategori yang berbeda

const mathCategory = {
   'colour':'290'
}

Tema akan menyertakan pemetaan nama kategori ke objek gaya kategori:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Gaya Komponen

Tema dapat menetapkan warna atau nilai komponen di bawah:

  • workspaceBackgroundColour: Warna latar belakang ruang kerja
  • toolboxBackgroundColour: Warna latar belakang toolbox
  • toolboxForegroundColour: Warna teks kategori Toolbox
  • flyoutBackgroundColour: Warna latar belakang flyout
  • flyoutForegroundColour: Warna teks label flyout
  • flyoutOpacity: Opasitas flyout
  • scrollbarColour: Warna scrollbar
  • scrollbarOpacity: Opasitas scroll bar
  • insertionMarkerColour: Warna penanda penyisipan (Tidak menerima nama warna)
  • insertionMarkerOpacity: Opasitas penanda penyisipan
  • markerColour: Warna penanda yang ditampilkan dalam mode navigasi keyboard
  • cursorColour: Warna kursor yang ditampilkan dalam mode navigasi keyboard

Sebagian besar komponen lainnya dapat diubah dengan menggunakan nama tema di CSS Anda. Namun, jika ada komponen yang ingin Anda ubah yang belum menjadi bagian dari daftar ini dan tidak dapat diubah menggunakan CSS, ajukan masalah dengan informasi selengkapnya.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Gaya Font

Gaya font adalah objek yang menyimpan jenis, ketebalan, dan ukuran font.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Start Hats

Jika Anda menetapkan startHats: true langsung di objek tema, topi akan ditambahkan ke semua blok tanpa koneksi sebelumnya atau output. Jika Anda menginginkan kontrol lebih besar atas blok mana yang mendapatkan topi, Anda dapat menggunakan properti gaya blok.

Tema Kustom

Untuk menambahkan tema ke aplikasi Blockly, Anda harus melakukan hal berikut:

  1. Membuat tema
  2. Menambahkan nama gaya
  3. Menetapkan tema di ruang kerja

Membuat Tema

Tema dapat dibuat menggunakan konstruktor atau dengan menggunakan defineTheme. Penggunaan defineTheme memudahkan untuk memperluas tema yang sudah ada dan menetapkan semua nilai dengan satu objek. Tema memiliki nama, dan merupakan objek dengan gaya blok, gaya kategori, dan properti lainnya seperti yang dibahas di atas.

Tema juga dapat memiliki tema dasar, yang akan memberikan nilai default untuk nilai apa pun yang tidak ditentukan dalam tema kustom.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Berikut adalah contoh penggunaan defineTheme.

Menambahkan Nama Gaya

Setelah membuat tema, kita perlu menambahkan nama gaya ke definisi blok dan kategori.

Kategori

Cara Anda menentukan toolbox menentukan cara Anda menambahkan nama gaya. Lihat halaman toolbox untuk mengetahui informasi selengkapnya.

Blok

Cara Anda menentukan blok menentukan cara Anda menambahkan nama gaya. Anda dapat menemukan informasi lebih lanjut tentang definisi blok di halaman pemblokiran kustom. Anda akan menetapkan salah satu gaya blok yang Anda tentukan dalam properti blockStyles tema ke blok Anda.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Menetapkan Tema

Anda juga perlu memberi tahu Blockly tema mana yang akan digunakan. Dengan menentukan beberapa tema yang menggunakan gaya blok dan nama kategori yang sama, Anda dapat memungkinkan pengguna memilih tema yang paling cocok bagi mereka, dan mengubahnya secara dinamis tanpa harus mengubah definisi blok itu sendiri.

Tema awal

Cara terbaik untuk menetapkan tema awal adalah dengan menyertakan options.theme dalam panggilan injeksi Anda. Anda dapat menyediakan tema dalam JSON atau JavaScript.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

Informasi selengkapnya tentang opsi dapat ditemukan di halaman konfigurasi kami. Jika tidak ada tema yang disediakan, tema tersebut akan ditetapkan secara default ke Tema Klasik.

Tema dinamis

Jika ingin mengubah tema secara dinamis (misalnya, jika mengizinkan pengguna memilih tema dari menu dropdown), Anda dapat memanggil yourWorkspace.setTheme(theme).

Membuat Skrip Gaya Blok

Blockly menyediakan skrip yang akan mengambil peta rona atau nilai heksadesimal dan akan menghitung warna sekunder dan tersier untuknya. Skrip dapat ditemukan di folder scripts/themes.

Tema bawaan

Blockly menyediakan sejumlah tema untuk aksesibilitas, khususnya jenis kekurangan penglihatan warna tertentu:

Kami juga memiliki: