Wygląd kategorii

Blockly udostępnia domyślny interfejs kategorii, a wraz z nim podstawowe opcje stylizacji. Jeśli chcesz dowiedzieć się więcej o zaawansowanym stylowaniu i konfigurowaniu interfejsu, zapoznaj się z ćwiczeniami z programowania dotyczącymi dostosowywania przybornika Blockly i prezentacją z 2021 r. na temat interfejsów API przybornika.

Skrzynka z narzędziami podzielona na 6 kategorii. Kategoria Zmienne jest otwarta i zawiera bloki pobierania i ustawiania zmiennych. Kolor bloków jest zgodny z kolorem pionowego paska po lewej stronie nazwy kategorii Zmienne.

Usługa porównywania cen kategorii

Za pomocą CSS możesz określać styl przyborników kategorii. Wpis dla każdej kategorii jest podzielony na kilka części, takich jak ikona, etykieta i wiersz zawierający ikonę i etykietę. Każdą część możesz ostylować osobno.

Domyślnie wszystkie części tego samego typu (np. wszystkie etykiety) mają przypisaną tę samą klasę CSS. Użyj tej klasy, jeśli chcesz zastosować ten sam styl do wszystkich części tego samego typu. Możesz na przykład chcieć, aby wszystkie etykiety miały ten sam kolor.

Możesz też przypisać do każdej części własną klasę CSS. Użyj tej metody, jeśli chcesz inaczej sformatować poszczególne części. Na przykład chcesz, aby każda etykieta miała własny kolor.

W tabeli poniżej znajdziesz typy, opisy i domyślne klasy CSS poszczególnych elementów przybornika kategorii. Jeśli masz problem z wyobrażeniem sobie tego, otwórz narzędzia dla programistów w przeglądarce i sprawdź przybornik.

Rodzaj części Opis Domyślna klasa CSS
treść div, która zawiera wszystkie kategorie. blocklyToolboxCategoryGroup
kontener div, który zawiera jedną kategorię i jej podkategorie. blocklyToolboxCategoryContainer
wiersz div, który zawiera kategorię. blocklyToolboxCategory
rowcontentcontainer Element div, który zawiera etykietę i ikonę. blocklyTreeRowContentContainer
ikona span zawierający ikonę. blocklyToolboxCategoryIcon
etykieta span, który zawiera etykietę. blocklyToolboxCategoryLabel
wybrano Dodawane do „wiersza” div po wybraniu kategorii. blocklyToolboxSelected
openicon Dodany do ikony span, gdy otwarta jest kategoria z podkategoriami. blocklyToolboxCategoryIconOpen
closedicon Dodany do ikony span, gdy kategoria z podkategoriami jest zamknięta. blocklyToolboxCategoryIconClosed

Załóżmy na przykład, że chcesz, aby wszystkie etykiety były białe, ale wiersz każdej kategorii miał własny kolor tła. Aby to zrobić, musisz mieć niestandardowe klasy CSS dla każdego wiersza. Możesz użyć domyślnej klasy etykiet.

Skrzynka z narzędziami podzielona na 2 kategorie. Etykiety kategorii są białe, ale mają różne kolory tła.

Najpierw przypisz niestandardowe klasy CSS w pliku JSON lub XML, który definiuje Twoje kategorie:

JSON

Ustaw niestandardowe klasy CSS za pomocą właściwości cssConfig.

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "yourRow"
  },
  "contents": [...],
},

XML

Ustaw niestandardowe klasy CSS za pomocą atrybutu, którego nazwa jest typem części z dodanym prefiksem css-.

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="yourRow">
  ...
</category>

W pliku CSS użyj klas niestandardowych, aby przypisać kolory wierszy, a klasy domyślnej, aby przypisać kolor etykiety:

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

Motywy

Motywy umożliwiają jednoczesne określenie wszystkich kolorów obszaru roboczego, w tym kolorów kategorii.

Aby z nich korzystać, musisz powiązać kategorię z określonym stylem kategorii:

JSON

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Kolory

Możesz też podać kolor bezpośrednio, ale nie jest to zalecane. Kolor to ciąg znaków reprezentujący liczbę (0–360) określającą odcień. Zwróć uwagę na pisownię brytyjską.

JSON

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

Pamiętaj, że obsługujemy też lokalizowane odniesienia do kolorów.