onsen-uiRozpoczęcie pracy z onsen-ui


Uwagi

Ta sekcja zawiera przegląd tego, czym jest onsen-ui i dlaczego deweloper może chcieć z niego korzystać.

Powinien również wymieniać wszelkie duże tematy w ramach onsen-ui i zawierać linki do powiązanych tematów. Ponieważ Dokumentacja dla programu onsen-ui jest nowa, może być konieczne utworzenie początkowych wersji tych pokrewnych tematów.

Wprowadzenie

Interfejs użytkownika Onsen to platforma typu open source, która pomaga tworzyć aplikacje hybrydowe o natywnej wydajności. Można go używać wraz z kilkoma dobrze znanymi strukturami JavaScript, takimi jak AngularJS (1 i 2), ReactJS i jQuery.

Ładowanie OnsenUI do projektu jest tak proste, jak pisanie standardowych tagów HTML w pliku index.html:

<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <!-- load Onsen structure CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
        <!-- load Onsen theme CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
        <!-- load Onsen main Javascript file -->
        <script src="lib/onsen/js/onsenui.js"></script>
        <script>
          ons.ready(function() {
            // Init code here
          });
        </script>
      </head>
      <body>
        <ons-navigator>
          <ons-page>
            Hello World!
          </ons-page>
        </ons-navigator>
      </body>
    </html>
 

Funkcja ons.ready jest główną funkcją, która może bezpiecznie powiedzieć nam, kiedy inicjalizacja Onsen UI jest zakończona. Następnie możesz użyć dowolnego ze składników OnsenUI.