Wygląd kategorii

Blockly udostępnia domyślny interfejs kategorii, a wraz z nim kilka podstawowych opcji 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ą na temat interfejsów API przybornika z 2021 roku.

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.

Przybornik kategorii składa się z wielu elementów HTML, z których każdy modeluje inną część przybornika. Na przykład każda kategoria ma własny element div i osobne elementy span dla ikony i etykiety. (Pełną listę znajdziesz w tabeli poniżej).

Blockly przypisuje domyślną klasę CSS do wszystkich części tego samego typu. Na przykład przypisuje wartość blocklyToolboxCategoryLabel do wszystkich etykiet span. Używaj tych klas, aby w ten sam sposób stylizować wszystkie części tego samego typu, np. przypisywać ten sam kolor do wszystkich etykiet. Blockly używa tych klas w domyślnym CSS dla przyborników kategorii.

Opcjonalnie możesz przypisać niestandardowe klasy CSS do poszczególnych części. Możesz na przykład przypisać różne klasy CSS do każdej etykietyspan. Używaj tych klas, aby nadawać różnym częściom tego samego typu różne style, np. przypisywać do każdej etykiety inny kolor.

Domyślne klasy CSS

W tabeli poniżej znajdziesz typy, opisy i domyślne klasy CSS poszczególnych części 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 Element span, który zawiera etykietę. blocklyToolboxCategoryLabel

CSS służy też do oznaczania stanu niektórych części przybornika.

Stan Opis Domyślna klasa CSS
wybrano Dodawane do „wiersza” div po wybraniu kategorii. blocklyToolboxSelected
openicon Dodawany do ikony span, gdy otwarta jest kategoria z podkategoriami. blocklyToolboxCategoryIconOpen
closedicon Dodawany do ikony span, gdy kategoria z podkategoriami jest zamknięta. blocklyToolboxCategoryIconClosed

Niestandardowe klasy CSS

Aby przypisać niestandardowe klasy CSS, użyj właściwości cssConfig w definicjach narzędzi JSON lub atrybutów css- w definicjach narzędzi XML. Użyj typu części, aby zidentyfikować część, do której chcesz przypisać klasy.

Załóżmy na przykład, że chcesz, aby wszystkie etykiety były białe, ale każda kategoria miała własny kolor tła. W przypadku etykiet możesz użyć domyślnej klasy, ale musisz dodać klasy niestandardowe dla wiersza każdej kategorii.

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

Poniższe definicje kategorii przypisują niestandardowe klasy CSS do wiersza każdej kategorii. Zwróć uwagę, że w każdej definicji uwzględniona jest domyślna klasa wierszy (blocklyToolboxCategory). Dzieje się tak, ponieważ Blockly zastępuje atrybut class wiersza podczas przypisywania klas. Jeśli nie uwzględnisz domyślnej klasy, nie otrzymasz domyślnego arkusza CSS dla tej klasy.

JSON

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

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "blocklyToolboxCategory myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "blocklyToolboxCategory 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="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory 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.