開始
本指南提供了開始使用Kendo UI for Angular buttons所需的信息——它包括可用的安裝方法、所需的依賴項、運行項目的代碼,以及指向其他資源的鏈接。
Buttons包是Kendo UI for Angular的一部分,這是一個專業級的UI庫,包含?100多個?組件,用于構建現代且功能豐富的?應用程序。
完成本指南后,您將能夠獲得如下示例所示的最終結果。
查看源代碼:
設置Angular項目
在開始安裝任何Kendo UI for Angular控件之前,請確保你有一個正在運行的Angular項目。不管你想要使用哪個Kendo UI for Angular包,完成組件安裝的先決條件都是一樣的,在安裝Angular項目的章節中有詳細描述。
安裝組件
你可以選擇使用以下兩種方式來安裝Kendo UI for Angular包和你想要應用的樣式:
用Angular CLI快速設置
快速設置提供了一種通過ng-add命令在中自動添加包的方法,它適合于節省時間和精力,因為可以在一個步驟中執行一組單獨需要的命令。
要添加Kendo UI for Angular Buttons包,運行以下命令:
ng add @progress/kendo-angular-buttons
因此,ng-add命令將執行如下操作:
- 將@progress/kendo-angular-buttons包作為一個依賴項添加到packagjson文件中。
- 在當前應用模塊中導入ButtonsModule。
- 在angular.json文件中注冊Kendo UI Default theme。
- 將所有需要的 peer dependencies添加到packag .json文件中。
-
觸發npm install來安裝主題和所有被添加的同級包。
手工設置
手動設置提供了更大的可見性和對Angular應用中安裝的文件和引用的更好控制。您可以通過為每個步驟運行單獨的命令來安裝所需的對等依賴項和KendoUI主題,并在或特性模塊中導入所需的組件模塊。
1.運行以下命令安裝Buttons包及其依賴項:
2.如果應用程序中需要所有按鈕組件,請使用ButtonsModule一次性導入所有按鈕,否則只能通過添加單獨的模塊來導入特定的組件。
Buttons包為其組件導出以下單個模塊:
- 要添加所有的Buttons組件,請在根應用程序或特性模塊中導入ButtonsModule。
- 要添加單獨的Buttons組件,只需導入根應用程序或特性模塊中需要的模塊。
3.下一步是通過安裝一個可用的Kendo UI主題-,或來樣式化組件。
3.1使用主題之前,先通過NPM安裝它的包。
- 默認主題
npm install --save @progress/kendo-theme-default
- 引導主題
npm install --save @progress/kendo-theme-bootstrap
- 材料主題
npm install --save @progress/kendo-theme-material
3.2主題包安裝完成后,在工程中引用,您可以通過以下方式之一在項目中包含KendoU I主題:
- 通過使用。
- 通過使用。
- 通過從編譯主題。
使用組件
成功安裝Buttons包并導入所需模塊后,在app.component.html中添加所需組件的相應標簽。例如,如果需要Button組件,則添加以下代碼:
<button kendoButton>My Button</button>
通過在根文件夾中運行以下命令來構建并提供應用程序。
ng serve
將瀏覽器指向//localhost:4200,查看頁面上的Kendo UI for Angular Button組件。
激活許可證密鑰
截至2020年12月,使用任何來自Kendo UI for Angular庫的UI組件都需要一個商業許可密鑰或一個有效的試用許可密鑰,如果您的應用程序不包含Kendo UI許可文件,請激活許可密鑰。
依賴關系
下表列出了每個包中每個Buttons依賴項提供的特定功能: