Topeka是一个Google开发的Web应用程序的演示，它展示了如何使用Google Material Design规范构建应用程序。Topeka作为一个npm包，通过npm可以方便地使用这个示例程序。
安装topeka
使用npm可以很方便地安装topeka，只需要在终端运行以下命令即可：
npm install --save topeka
这条命令将在现有目录中创建一个名为“Topeka”的子目录，并将必要的文件包含在内。
引入依赖项
使用Topeka示例应用程序需要几个依赖项。这些依赖可以在HTML文件的头部使用以下代码引入：
-- -------------------- ---- ------- ---- ------ ----- --- ----- ------------------------------------------------------------ ---------------- ---------------- ---- ----- --- --- ----- ---------------- ----------------------------------------------------------------------------- ---- ------ -------- ----- --- --- ----- -------------------------------------------------------------- ---------------- ---------------- ---- ------ --- --- ----- ---------------------------- ---------------- -- ---- -------- --- ------- ----------------------------------- ------- -----------------------------------
配置应用程序
在HTML文件中的任何地方，任何地方都可以编写HTML，只需要包含正确的类名即可。这意味着网页应用程序可以与任何Web框架一起使用。
在 body 中添加以下代码：
-- -------------------- ---- -------
---- ------------------ ---------- ------------- --------------------------
------- ---------------------------
---- -------------------------------
----- ------------------------------- ----------
---- --------------------------------
---- --------------------- -------------------------------
-- -------- --------------------------------------
-- -------- --------------------------------------
-- -------- ------------------------------------ ------
-- -------- ------------------------------------
------
------
---------
----- ----------------------------
---- ----------------- -------- ----------------------
-------- ------------------- -------- --------------- -------- --------------- ---------------------- -----------------------------
-------- ---------------------- ---------------------
------- ---------------------------------- -----------------
-------------
-------- -------------------------------- -----------------------------
-------- --------------- -------------------------
-------- ------------------ -------- --------------- -------------------------
----------- --------------- ----------- -------------------------
-------------
-------- ------------------------ ---------------- -------- --------------- -----------------------------
-------- -------------- -----------
-------- ----------------------------
------- ----------------------------------
------- ----------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- --------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- ---------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- ---------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- ------------------------------------ ------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------------
-------------
-------------
-------------
-------------
-------------
-------------
----- ---------------------------
------
-------
------启动 Topeka 应用程序
使用以下JavaScript代码中的任何一种，您可以启动topeka应用程序。
-- -------------------- ---- -------
--------
-- -------------
--- --- - --- ---------
-- --------
-------------------------------------- -------- ------ -
---------------
---
---------示例代码
以下是topeka示例的完整示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------
---- ------ ----- ---
----- ------------------------------------------------------------ ---------------- ----------------
---- ----- --- ---
----- ---------------- -----------------------------------------------------------------------------
---- ------ -------- ----- --- ---
----- -------------------------------------------------------------- ---------------- ----------------
---- ------ --- ---
----- ---------------------------- ---------------- --
---- -------- ---
------- -----------------------------------
------- -----------------------------------
-------
------
---- ------------------ ---------- ------------- --------------------------
------- ---------------------------
---- -------------------------------
----- ------------------------------- ----------
---- --------------------------------
---- --------------------- -------------------------------
-- -------- --------------------------------------
-- -------- --------------------------------------
-- -------- ------------------------------------ ------
-- -------- ------------------------------------
------
------
---------
----- ----------------------------
---- ----------------- -------- ----------------------
-------- ------------------- -------- --------------- -------- --------------- ---------------------- -----------------------------
-------- ---------------------- ---------------------
------- ---------------------------------- -----------------
-------------
-------- -------------------------------- -----------------------------
-------- --------------- -------------------------
-------- ------------------ -------- --------------- -------------------------
----------- --------------- ----------- -------------------------
-------------
-------- ------------------------ ---------------- -------- --------------- -----------------------------
-------- -------------- -----------
-------- ----------------------------
------- ----------------------------------
------- ----------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- --------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- ---------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- ---------------------------------------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------- ------------------------------------ ------- ---------------------------------------- ----------------------- ------------- ------------- ----- ------- ----- ---------- --------------- ----- --------------- ------------------------------
------------
-------------
-------------
-------------
-------------
-------------
-------------
----- ---------------------------
------
-------
------
--------
-- -------------
--- --- - --- ---------
-- --------
-------------------------------------- -------- ------ -
---------------
---
---------
-------
-------结论
Topeka是一个非常有用的演示程序，以展示Google Material Design规范构建网页应用程序。通过npm包提供了方便的使用方式，同时通过示例代码可以快速入门使用。开发者们可以通过这些学习和实践，提升自己的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae62b5cbfe1ea0610e24