Uwaga: Aby korzystać z tego bloku, musisz mieć włączone skrypty nagłówka/stopki w Wygląd > Kadence (jest to funkcja pro). Liczniki nie wyglądają na wiele na zapleczu, ale to dlatego, że zawartość i animacja są kontrolowane przez jQuery. Po wyświetleniu na interfejsie użytkownika będą one wyglądać zupełnie inaczej.


WAŻNE – Skopiuj kod z poniższego bloku Custom HTML do Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer na tej stronie, a następnie usuń blok Custom HTML. Ten kod ładuje biblioteki jQuery wymagane do działania liczników.

Każdy licznik jest sekcją wewnątrz sekcji w wierszu nadrzędnym. Jeśli chcesz mieć więcej niż 3 liczniki w rzędzie, dodaj kolejną kolumnę, a następnie skopiuj wewnętrzną sekcję (o nazwie Counter) do nowej sekcji wygenerowanej przez dodatkową kolumnę. Należy pamiętać, że im więcej kolumn, tym mniejsze będą liczniki, aby uwzględnić responsywność.

Edycja liczników

Każdy element wewnątrz liczników jest nazwany dla ułatwienia. Pierwsze 4 bloki tekstowe (zielone tło) służą do definiowania wartości. Bloki te nie są wyświetlane w interfejsie użytkownika, więc nie należy ich stylizować, wystarczy wprowadzić wartości i zapomnieć o nich:

Wartość: Liczba do zliczenia (ze 100)
Rozmiar: Wymiary licznika (szerokość i wysokość)
Grubość: Grubość zewnętrznej linii (animowany łuk postępu)
Dziesiętne: Liczba miejsc dziesiętnych do wyświetlenia

Bloki Circle i Result są dynamiczne i nie wymagają wprowadzania danych. Są one zablokowane tylko jako przewodnik przypominający, że nie trzeba wprowadzać żadnego tekstu. Nadal można je stylizować:
Okrąg: W ustawieniach bloku właściwość color definiuje kolor animowanego łuku. Właściwość background definiuje kolor pustej części łuku. Nie edytuj żadnych innych ustawień w tym bloku.
Wynik: Nie wprowadzaj żadnego tekstu w tym bloku, jest on dynamicznie wypełniany przez wartość w bloku Value. Użyj ustawień bloku, aby stylizować dane wyjściowe w normalny sposób. Jeśli używasz tekstu prefiksu/sufiksu, możesz dostosować odstęp w pionie, zmieniając wartość wysokości linii.

Bloki prefiksów/sufiksów:
Wszystkie bloki prefiksów i sufiksów wymagają wprowadzenia wartości (jeśli chcesz z nich korzystać). Jeśli nie zostanie wprowadzona żadna wartość, nie będą one wyświetlane w interfejsie użytkownika. Użyj ustawień bloku, aby stylizować dane wyjściowe w normalny sposób. Jeśli chcesz zwiększyć/zmniejszyć poziomą przestrzeń między prefiksem/sufiksem symbolu a liczbą wyjściową, edytuj ustawienia wyrównania Flex > Domyślna wartość odstępu między blokami poziomymi w sekcji Dane wyjściowe lub dodaj lewy/prawy margines do bloków prefiksu/sufiksu symbolu.

Prefiks: Wyświetla tekst nad animowanym numerem
Prefiks symbolu: Wyświetlany po lewej stronie animowanej liczby
Przyrostek symbolu: Wyświetlany po prawej stronie animowanej liczby
Sufiks: Wyświetlany pod animowaną liczbą

Sekcja Display kontroluje kolor wewnętrznego okręgu. Zmień wartość koloru tła sekcji Display , aby zmienić kolor wewnętrznego okręgu.

50.00

350

100

PHP

%

70.00

350

100

JS

%

40.00

350

100

React

%