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 w 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żyj tych klas, aby w ten sam sposób ostylować wszystkie części tego samego typu, np. przypisać 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żyj tych klas, aby stylizować różne części tego samego typu na różne sposoby, np. przypisać każdej etykiecie inny kolor.

Domyślne klasy CSS

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 Element div, który zawiera jedną kategorię i jej podkategorie. blocklyToolboxCategoryContainer
wiersz div, który zawiera kategorię. blocklyToolboxCategory
rowcontentcontainer Element div zawierający etykietę i ikonę. blocklyTreeRowContentContainer
ikona span zawierający ikonę. blocklyToolboxCategoryIcon
etykieta 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 Dodany do ikony span, gdy otwarta jest kategoria z podkategoriami. blocklyToolboxCategoryIconOpen
closedicon Dodany 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. Możesz użyć domyślnej klasy etykiet, 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 domyślna klasa wierszy (blocklyToolboxCategory) jest uwzględniona w każdej definicji. 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. Jeśli potrzebujesz większej kontroli, użyj CSS.

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.