devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›Kendo UI R2 2020  – co nowego dla popularnych frameworków?

Kendo UI R2 2020  – co nowego dla popularnych frameworków?

By Bernadeta Zapała
14 maja 2020
195
2
Share:

Kendo UI jest kompletnym frameworkiem do tworzenia aplikacji w standardzie HTML5. Zawiera on wszystkie niezbędne składniki potrzebne do zbudowania nowoczesnych, interaktywnych i co najważniejsze – intuicyjnych aplikacji HTML5.

kendo-banner

Twórcy właśnie udostępnili wersję Kendo UI R2 2020. Wydanie zawiera kilka aktualizacji w bibliotekach Angular, jQuery, React i Vue.

Na początek — Angular

Wskazówki dotyczące formularza

Aplikacje potrzebują formularzy, a budowanie ich od podstaw jest trudne. Dlatego stworzono interfejs Kendo UI for Angular Form Guidelines. Jest to kompletny przewodnik do budowania formularzy w Angular. Do stworzenia takiego formularza używać można elementów HTML lub Kendo UI dla Angular.

Nowe komponenty — Stepper, Pager i wiele innych

Stepper jest komponentem, który pomoże rozbić każdy proces na małe kroki. Każdy krok jest w pełni kontrolowany pod względem zawartości. Sam komponent zawiera style dla przeszłych, bieżących, a także przyszłych kroków.

kendo drag&drop

Zewnętrzna strefa zrzutu

Następnym komponentem jest zewnętrzna strefa zrzutu. Dzięki niemu programiści mogą dodać obszar do którego użytkownicy będą mogli przeciągać i upuszczać pliki ze swojego systemu, w celu jego obsługi w aplikacji Angular. Dodatkowo komponent jest również oferowany jako dyrektywa, która dodaje funkcję przeciągnij i upuść do dowolnego komponentu, do którego została zastosowana.

W nowym wydaniu Kendo UI wprowadzony został interfejs Pager, który pozwala wszystkim programistom Angular na intuicyjny sposób przeglądania stron przez użytkowników końcowych.

kendo datepicker

Label

Komponent Label zapewnia dodatkowe funkcje, m.in. pozwala wyświetlać opcjonalnie etykiety. Z kolei nowe komponenty FormField, Hint i Error pomagają tworzyć formularze i łączyć poszczególne jego pola z grupami komponentów, np. z danymi wejściowymi czy etykietami. Oprócz tego komponent zawiera nowe wskazówki i etykiety błędów.

Funkcje w istniejących komponentach

Interfejs TreeList został oficjalnie wydany jako RTM. W związku z tym dodano wielu nowych funkcji, tj.:

  • Wybór (Selection)
  • Wirtualizacja (Virtualization)
  • Nawigacja za pomocą klawiatury (Keyboard Navigation)
  • Zgodność z ułatwieniami dostępu (Accessibility Compliance)

Do komponentu TreeView dodano przycisk „Load more”. Funkcja ta rozkłada konkretny poziom w TreeView i ładuje fragmenty danych w jednym węźle zamiast wszystkich danych jednocześnie. Dodanie tej funkcji ma na celu zwiększyć wydajność Kendo UI.

kendu - load more button

Przycisk “Load more”

Do interfejsu użytkownika Angular Grid dodano możliwość zachowania stanu rozwijania/zwijania wierszy szczegółów w siatce danych.

Komponenty jQuery Kendo UI z R2 2020

Przede wszystkim komponenty Query Kendo UI obsługują najnowszą wersję jQuery 3.5.1. Podobnie jak w przypadku dodatków do Angulara, dodanymi komponentami są formularze i Stepper.

kendu - stepper

Stepper

Nowością jest składnik Text Box — wcześniej dostępny jako prymitywy CSS. Poprzednio można go było dodawać do zwykłego elementu wejściowego HTML. Kolejnym nowym komponentem jest TileLayout. Składa się z kilku bloków konstrukcyjnych, zwanych kafelkami, które można skonfigurować w sposób podobny do siatki CSS. Użytkownik końcowy może przeciągać i upuszczać kafelki, aby spersonalizować swoje ustawienia.

Harmonogram — zmiany

Wirtualizacja jest kluczową funkcją do obsługi dużych zestawów danych w dowolnym komponencie. Program Kendo UI Scheduler ma teraz wbudowaną wirtualizację. Pomaga ona przewijać duże kolekcje wydarzeń w programie, w wyniku utrzymując płynność działania. Oprócz tej funkcji do harmonogramu dodano także obsługę iCal. Jest to popularny format danych dla systemów planowania i kalendarza. Dodanie obsługi formatu iCal umożliwi programistom, a także użytkownikom łatwiej importować i eksportować zdarzenia.

Kendu - calendar

Pole wyszukiwania znajdujące się w górnej części interfejsu

W interfejsie użytkownika, w jego górnej części, pojawiło się także pole wyszukiwania. Pozwala ono użytkownikom filtrować zdarzenia na podstawie dowolnego łańcucha dodanego do pola tekstowego.

Kendo UI dla React

W ramach ułatwienia tworzenia formularzy stworzono Wytyczne formularzy KendoReact. Jednym z nowych komponentów jest element ListView, który pozwala tworzyć przewijalną listę przedmiotów. Każdy z elementów listy może być odpowiednio dostosowany, można korzystać z kilku różnych układów (np. jako karty lub tradycyjna lista).

Nowe komponenty

Aby podkreślić postęp w aplikacji React wprowadzono dwa elementy — Progress Bar & Chunk Progress Bar. Pierwszy z nich zapewnia pasek, który pokazuje plan od początku do końca. Natomiast drugi z nich jest podzielony na bloki, które wypełniają się wraz ze wzrostem wartości.

Kendu - progress and chunk bar

Progress Bar i Chunk Progress Bar

Podobnie jak we wcześniejszych frameworkach dodano komponenty Stepper, Label, Hint i Error. Nowością jest tak zwany Range Slider. Jest to oparty na istniejącym suwaku komponent, ale zamiast oferowania jednej wartości umożliwia użytkownikom końcowym przeciąganie wokół uchwytów w celu zdefiniowania wartości minimalnej i maksymalnej.

Kendu - slider

Slider

Do istniejących komponentów dodano także nowe funkcje. Wraz z obsługą dużych zestawów danych i poprawą wydajności, KendoReact TreeList ma wbudowany komponent pager, który pomaga nawigować po stronach danych w większych kolekcjach. Oprócz tego w TreeList dodano funkcję przeciągania i upuszczania. Elementy można teraz przenosić z jednego poziomu hierarchii na następny, razem ze wszystkimi potencjalnymi węzłami potomnymi.

kendu - Drag&Drop

Drag&Drop

Za pomocą jednego przycisku można teraz eksportować zawartości TreeList do formatu PDF lub Excel. Wyeksportowaną treść można również dostosować, aby dodać dodatkowe informacje lub zmienić styl.

Vue

Zespół Kendo UI Vue rozpoczął przygotowania do najnowszej wersji Vue 3.0, która ostatnio weszła w wersję beta. Wśród nowych komponentów natywnych (zbudowanych od podstaw) znajduje się komponent kalendarza.

kendu - vue calendar

Kalendarz Vue

Zapewnia on intuicyjny interfejs do wybierania pojedynczej daty w widoku miesiąca. Jako element formularza dodano także komponenty DateInput i Date Picker. Pierwszy z nich pozwala użytkownikom wprowadzić ciąg daty, zachowując określony format. Natomiast drugi używa kalendarza podręcznego do wybierania daty zamiast konieczności ręcznego jej wpisywania.

Źródła:

  • https://www.telerik.com/blogs/whats-new-kendo-ui-r2-2020
  • https://www.telerik.com/blogs/whats-new-kendo-ui-angular-components-r2-2020
  • https://www.telerik.com/blogs/whats-new-kendo-ui-jquery-components-r2-2020
  • https://www.telerik.com/blogs/whats-new-kendoreact-r2-2020
  • https://www.telerik.com/blogs/whats-new-kendo-ui-vue-components-r2-2020
TagsAngularJqueryKendo UiReactVue

Share:

  • FrontendNarzędzia

    GitHub na urządzenia mobilne już dostępny

  • Narzędzia

    Container Registry – nowa obsługa kontenerów w GitHub

  • Systemy i przeglądarki

    Udostępnianie stron Google Chrome przez kod QR

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

  • 24 listopada 2020

    Tailwind CSS 2.0 z narzędziami kontroli tekstu

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT