精华内容
下载资源
问答
  • angular ui组件库
    2021-09-07 09:57:00

    本文主要介绍如何安装和开始使用Kendo UI for Angular

    • 首先完成安装步骤。
    • 然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。
    • 最后,您将学习如何为Kendo UI for Angular激活许可。

    Kendo UI for Angular最新版工具下载

    使用DropDownList过滤网格

    最后,让我们添加一些组件交互。Grid有一个内置的过滤UI,但我们将要使用DropDownList按产品类别过滤Grid,为此需要添加一个valueChange处理程序:

    1. 在src/app/app.component.ts中添加handleFilterChange方法:

    export class AppComponent {
    
    // ...
    
    public handleFilterChange(item: {
    text: string;
    value: number | null;
    }): void {
    this.filterTerm = item.value;
    this.skip = 0;
    this.loadGridItems();
    }
    }
    

    2. 在src/app/app.component.html中绑定DropDownList的(valueChange)事件:

    <kendo-dropdownlist [data]="dropDownItems" textField='text' valueField="value" [defaultItem]="defaultItem" (valueChange)="handleFilterChange($event)">
    </kendo-dropdownlist>
    

    应用程序源代码

    您的 Kendo UI Angular 入门应用程序已完成!

    完整的源代码可在kendo-angular-quickstart-cli GitHub 存储库中找到。

    激活许可证密钥

    Kendo UI for Angular是一个专业开发的库,在商业许可下分发。从 2020 年 12 月开始,Kendo UI for Angular需要商业许可证密钥或有效的试用许可证密钥。更多产品授权信息,欢迎咨询“在线客服”了解!

    Kendo UI for Angular | 下载试用

    Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。


    了解最新Kendo UI最新资讯,请关注Telerik中文网!

    更多相关内容
  • 基于Ant Design的企业级Angular UI组件库。 English | :sparkles: 产品特点 用于Angular应用程序的企业级UI设计系统。 开箱即用的60多种优质Angular组件。 用具有可预测的静态类型的TypeScript编写。 整套开发...
  • Angular UI组件库 npm i ng-mazdik-lib --save 款式 在angular.json中添加全局样式 " styles " : [ " src/styles.css " , " node_modules/ng-mazdik-lib/styles/bundled.css " ], 样品表 带有CRUD操作的Angular的...
  • 然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。 最后,您将学习如何为Kendo UI for Angular激活许可。 Kendo UI for Angular最新版工具下载 设置Angular项目 ...

    本文主要介绍如何安装和开始使用Kendo UI for Angular

    • 首先完成安装步骤。
    • 然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。
    • 最后,您将学习如何为Kendo UI for Angular激活许可。

    Kendo UI for Angular最新版工具下载

    设置Angular项目

    最新的Kendo UI for Angular包面向当前Angular长期支持版本,直到最新的官方Angular版本。

    1. 开始使用Angular最简单方法是使用 Angular CLI 工具,要搭建项目结构,请按照该工具的安装说明进行操作:

    npm install -g @angular/cli
    ng new kendo-angular-app

    ng new命令将提示您进行新Angular应用程序的一些设置,使用这些:

    • 实施更严格的类型检查和捆绑预算? - No
    • 添加Angular路由?Yes
    • 样式表格式? - CSS

    2. 新应用生成后,将src/app/app.component.html的内容替换为:

    <h1>Hello Kendo UI for Angular!</h1>

    3. 然后,在浏览器中构建并打开Angular应用程序:

    cd kendo-angular-app
    ng serve -o

    接下来,我们将向应用程序添加一些数据,然后将其绑定到一个DropDownList和一个网格中。

    添加数据

    通过向应用程序添加一些数据来准备使用专业的数据驱动UI组件,为简单起见,将使用静态本地 JSON 数据和可以修改来使用远程数据的服务,创建以下三个文件并从 GitHub 中的链接文件复制粘贴它们的内容:

    添加下拉列表

    Kendo UI for Angular是通过多个NPM包分发的,范围为@progress。向应用程序添加一个 Kendo UI Angular DropDownList,并将其绑定到一个对象数组。

    1. 使用ng add命令时,DropDowns包安装需要一个步骤:

    ng add @progress/kendo-angular-dropdowns

    ng add命令还会自动安装默认Kendo UI主题。

    2. 打开src/app/app.component.ts并从data.categories导入类别:

    import { categories } from "./data.categories";

    3. 在同一个文件中,声明将在DropDownList声明中使用的变量,defaultItem确定最初选择的项目:

    export class AppComponent {
    public dropDownItems = categories;
    public defaultItem = { text: "Filter by Category", value: null };
    }

    4. 最后,打开src/app/app.component.html并添加DropDownList标记:

    <p>
    <kendo-dropdownlist [data]="dropDownItems" [defaultItem]="defaultItem" textField="text" valueField="value" >
    </kendo-dropdownlist>
    </p>

    DropDownList 现在应该可以在您的示例页面上运行了。

    添加网格

    继续添加一个Kendo UI for Angular网格。

    1. 首先,安装Grid npm包和所有依赖项:

    ng add @progress/kendo-angular-grid

    2. 在src/app/app.component.ts中导入必要的类型和数据服务:

    import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";
    import { SortDescriptor } from "@progress/kendo-data-query";
    import { ProductService } from "./product.service";
    import { Observable } from "rxjs";

    3. 在组件声明中添加ProductService作为提供程序:

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ProductService]
    })

    4. 添加将用于对 Grid 进行分页和排序的 AppComponent 类成员:

    export class AppComponent {
    
    // ...
    
    public gridItems: Observable<GridDataResult>;
    public pageSize: number = 10;
    public skip: number = 0;
    public sortDescriptor: SortDescriptor[] = [];
    public filterTerm: number = null;
    
    constructor(private service: ProductService) {
    this.loadGridItems();
    }
    
    public pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadGridItems();
    }
    
    private loadGridItems(): void {
    this.gridItems = this.service.getProducts(
    this.skip,
    this.pageSize,
    this.sortDescriptor,
    this.filterTerm
    );
    }
    
    public handleSortChange(descriptor: SortDescriptor[]): void {
    this.sortDescriptor = descriptor;
    this.loadGridItems();
    }
    
    }

    5. 最后,在 src/app/app.component.html 中添加 Grid 标记,在浏览器中重建并检查 Grid:

    <kendo-grid [data]="gridItems | async" [pageSize]="pageSize" [skip]="skip" [pageable]="true"
    (pageChange)="pageChange($event)" [sortable]="true" [sort]="sortDescriptor" (sortChange)="handleSortChange($event)"
    [height]="400">
    <kendo-grid-column field="ProductID" title="ID" width="50">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name">
    </kendo-grid-column>
    <kendo-grid-column field="Category.CategoryName" title="Category">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="140" filter="boolean">
    <ng-template kendoGridCellTemplate let-dataItem>
    <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
    </ng-template>
    </kendo-grid-column>
    </kendo-grid>

    我们应用程序中的 Grid 实例可以排序和分页,它使用单元格模板中的 UnitPrice 列和复选框的数字格式来显示布尔值 Discontinued 字段。

    Kendo UI for Angular | 下载试用

    Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。


    了解最新Kendo UI最新资讯,请关注Telerik中文网!

    展开全文
  • Syncfusion Angular UI组件库(Essential JS 2) Syncfusion Angular UI组件库是从头开始构建的,它轻巧,响应Swift,模块化且易于触摸。 它提供了每个应用程序都将需要的50多个UI组件。 这是一种商业产品,需要付费...
  • Aquila是由安联全球数字工厂(GDF)提供的开源组件库。 我们在内部将这个库与Allianz品牌结合使用。 在这里,我们提供了一个白色标签变体,作为开放式保险平台的一部分。 我们目前仍在设置一些内容 :construction: ...
  • Kendo UI for Angular是专业级的Angular UI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angular UI组件,而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript...

    Kendo UI for Angular R2 2021最新版下载

    Kendo UI for Angular是专业级的Angular UI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angular UI组件,而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript开发Angular应用程序,Kendo UI for Angular都能为Angular项目提供专业的、企业级UI组件。

    新组件:Angular BottomNavigation

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:添加一系列新组件

    Angular BottomNavigation 组件充当任何 Web 应用程序的直观导航元素。 最常见于移动应用程序、响应式 Web 应用程序或渐进式 Web 应用程序 (PWA) 中,BottomNavigation 组件显示在屏幕底部,为用户突出显示导航选项。

    可以自定义单个项目以仅显示文本、图标或两者的组合,当然还可以进行额外的 CSS 或 Sass 自定义以适合您可能需要的任何设计。 该组件可以与 Angular Router 集成,使 Angular BottomNavigation 成为任何 Angular 应用程序的直观导航组件。

    新组件:Angular MultiSelectTree

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:添加一系列新组件

    继续为 Angular DropDowns 包添加越来越多的场景化趋势,在 R2 2021 中引入了 Angular MultiSelectTree 组件。 该组件的核心是在 MultiSelect 下拉列表中结合了 TreeView 的层次结构,这意味着用户可以从包含 TreeView 的下拉列表中选择多个值。

    这类似于之前版本中引入的 Angular DropDownTree,但最大的不同在于 MultiSelect 操作,选定的值将显示为文本或标记,只需将光标放在组件的输入元素内即可添加、修改或删除。

    新组件:Angular Circular Gauge

     

    新的 Angular Circular Gauge 组件采用已经流行的 Angular Arc Gauge 组件,并创建了一个新的数据可视化,它覆盖了一个完整的圆而不是任意的弧。 这包括对中心标签、刻度等的支持,以确保这个新的数据可视化组件可以适合您投入的任何设计。

    新组件:Angular Skeleton

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:添加一系列新组件

    通过全新的Kendo UI for Angular Skeleton组件,开发人员可以通过创建代表即将加载的内容占位符元素和形状来提高其应用程序的感知性能。 这让用户感觉以很少甚至没有成本的方式加载东西,因为这只是 HTML 和 CSS 的任何将要显示的形状。

    对于这个初始版本,我们涵盖了一些形状,如线条、矩形和圆形,为 Angular 开发人员创建自己的加载元素奠定了坚实的基础。


    了解最新Kendo UI最新资讯,请关注Telerik中文网!

    展开全文
  • Kendo UI for Angular是专业级的Angular UI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angular UI组件,而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript...

     

    Kendo UI for Angular R2 2021最新版下载

    Kendo UI for Angular是专业级的Angular UI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angular UI组件,而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript开发Angular应用程序,Kendo UI for Angular都能为Angular项目提供专业的、企业级UI组件。

    Angular Grid:固定列和固定行

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:扩展现有组件功能

    虽然 Angular Grid 在之前的版本中已经能固定列了,但在在 R2 2021 中,技术团队扩展此功能来创建固定的列和行,对于那些不熟悉的用户来说,固定是指可以在某个时候固定但在用户交互后可以变成常规列或行的项目。

    对于列,固定意味着该列在滚动时将保留在左侧或右侧(如果有其他固定的列可以放置在任何位置)。如果您以另一种方式滚动,该列将解锁并放回其原始位置。

    对于行,将行固定到Grid 当前视图的顶部或底部,允许行在用户继续滚动时停留在某个区域,但一旦用户滚动它最终将成为普通行 回到原来的位置。

    在 R2 2021 中,Kendo UI for Angular Data Grid支持固定列和固定行,让您可以利用此功能进行水平或垂直滚动。

    Angular Grid:持久分组

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:扩展现有组件功能

    在 R2 2021 中,通过在数据操作(分页、排序、过滤等)期间保留组的展开或折叠状态,继续提供更多开箱即用的选项来保留 Angular Grid 的状态。 虽然这以前可以通过手动跟踪组的状态来实现,但现在可以通过简单的配置选项由 Angular 数据表本身进行跟踪。

    Angular Grid:改进的可访问性

    在 R2 2021 中所做的另一项努力是深入研究 Angular Data Grid 的可访问性合规性,由于可访问性合规性是Kendo UI for Angular首要任务之一,我们希望在这方面继续改进,以便使用Angular UI 组件的每个人都能对他们的可访问性要求充满信心。

    具体来说,我们发现在使用过滤菜单、过滤行、列菜单以及复选框列时,可以为此版本添加改进,这包括在过滤器菜单和列菜单中添加对键盘导航的额外支持。除此之外,我们还处理了一些关于可访问性问题的错误报告,以全面改进可访问性。

    Angular Editor:支持ProseMirror插件

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:扩展现有组件功能

    新版本持续为Kendo UI for Angular Editor添加工具和功能,由于Kendo UI for Angular Editor是基于ProseMirror,在 R2 2021 中添加了将任何 ProseMirror 插件集成到Kendo UI for Angular Editor的功能。

    Angular Calendar:多日期选择

    Angular UI组件库Kendo UI for Angular R2 2021新版亮点:扩展现有组件功能

    在 R2 2021 中,Angular Calendar 现在支持选择多个日期的各种模式。 这可以在一个范围内完成,也可以通过在Kendo UI for Angular Calendar界面中选择单个单独的日期来完成。


    了解最新Kendo UI最新资讯,请关注Telerik中文网!

     

    展开全文
  • 到达可重用的UI组件 该项目是使用版本6.0.8生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate ...
  • 本机Angular UI组件和设计框架 npm i np-ui-lib 组件清单: 输入文本 文字区 日期选择器 时间选择器 颜色选择器 转变 落下 自动完成 标签 号码盒 上传文件 滑杆 选框 单选按钮 富文本 菜单栏 面板菜单栏 面包屑 ...
  • 几款流行的angular组件库

    万次阅读 2018-05-15 17:51:17
    material2https://github.com/angular/material2NGX Bootstrap https://github.com/valor-software/ngx-bootstrap 3. PrimeNG https://github.com/primefaces/primeng 4. NG Bootstrap ht...
  • 大河UI •• • Taiga UI是完全可摇动的Angular UI ... 我们将CSS自定义属性用于所有样式,并提供简单的方法来自定义所有UI组件 :hammer_and_wrench: 设计精良。 我们不怕最大程度地使用DI。 我们所有的组件都使用OnP
  • Angular UI开关组件 描述 这是一个简单的iOS 7样式开关组件。 现场 也有 受到启发。 安装 npm: npm install ngx-ui-switch --save 纱线: yarn add ngx-ui-switch 某些功能在以前的版本中不可用: CSS样式 ...
  • ,PrimeNG 是一个极为完善的开源 Angular UI 组件库,原生小部件丰富,内置 80 多个易于使用的组件,可满足所有 UI 需求,在最近已超过 700 万次下载。PrimeNG 7.1.0 改进了树/树表的过滤、行编辑、增强虚拟滚动,在...
  • angular ui组件Learn how to use Angular Material in this full course for beginners from Codevolution. 本课程为Codevolution的初学者学习如何使用Angular Material。 Angular Material provides a set of ...
  • PrimeNG 7.1.3 已发布,PrimeNG 是一个极为完善的开源 Angular UI 组件库,原生小部件丰富,内置 80 多个易于使用的组件,可满足所有 UI 需求。 新版更新内容如下: 新功能和增强: 表格的状态存储和事件恢复#...
  • design.md,vue.md,react.md,angular.md,i18n.md,theme.md,getting-started.md,event.md,jsconfig.json,demos,slider,index.js,index.vdt,index.styl,index,index.js,index.vdt,table,index.js,index.vdt,store.js,...
  • 它提供了一组UI组件,可帮助更快地构建单页应用程序。 它还为您提供了简单的抽象,可帮助您更轻松地构建新组件。安装乐高您可以从npm安装它。 npm install lego-ui-kit --saveLego需要安装Angular CDK。 您可以...
  • TrulyUI是一个Angular框架,它是使用世界上最先进的技术为基于Web组件的桌面应用程序专门开发的。 TrulyUI基于由全球社区维护的Angular。 顺便说一下,我们相信Angular是最有前途的Web框架。 我们开发了TrulyUI想法...
  • Syncfusion Angular文档 这是技术产品文档的GitHub存储。此文档发布到 捐款欢迎! 我们欢迎以改进Angular Components用户指南文档。 您对此的贡献将不胜感激。
  • 类似于上图的情况,背景的样式位于组件自定义的ui-inputtext类中,此时可以直接通过 /deep/ui-inputtext{background:#000} 进行修改 2.想要修改的样式位于element.style中 比如说上图,我想要修改top属性,如果还是...
  • 英文原文 |https://blog.bitsrc.io/9-bootstrap-ui-component-libraries-for-2018-cf...
  • @ angular-material-extensions / link-preview-Angular开源UI库,用于预览由ngx-linkifyjs和Material Design提供支持的Web链接 多链接预览 由开发人员构建并为开发人员 :red_heart_selector: 您有什么问题或建议...
  • 摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸、灵活、至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计...Ng组件库:ng-devui(欢迎Star) 官方交流:添加DevUI小助手(devui-of
  • Kendo UI for Angular图表提供了一组配置选项,使您能够指定其操作。 Kendo UI for Angular最新版工具下载 该图表使您能够: 使用配置组件; 使用内联选项; 通过 Angular 结构指令构建配置组件 配置组件 ...
  • Nebular 是一个可定制的 Angular UI ,包含 40 多个 UI 组件、四个视觉主题以及身份验证和安全模块。 这个 Angular 框架在著名的 AngularConnect 2018 上得到认可,可以专注于漂亮的设计,使它们适应您的品牌。 ...
  • 7个最佳 Angular UI框架

    千次阅读 2022-03-24 15:26:24
    这些 Angular UI 组件库提供的组件可以自动化你的杂务,执行典型的重复操作,并为你节省大量的编写时间。  1.NG-BootStrap  NG Bootstrap 提供带有高级输入组件的 Angular 小部件,我们使用 Bootstrap 4 CSS ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,721
精华内容 7,088
关键字:

angular ui组件库