Angular实现一个Collapse折叠面板组件

于 2021-06-17 10:43:47 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： angular 文章标签： angular html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30156795/article/details/117981283
版权
本文介绍了如何在Angular中创建一个折叠面板组件。组件由头部和内容两部分组成，点击头部实现内容的展开和收缩效果，同时动画效果通过CSS3过渡实现。详细讲述了HTML结构、SCSS样式以及 TypeScript 代码的实现细节。
摘要由CSDN通过智能技术生成

简单分析

折叠面板由头部和内容组成，点击头部的时候，内容有一个展开和收缩的效果，如下图
效果图

实现过程

collapse.component.html

没什么说的直接上代码。

结构很简单，分成头部和面板内容两个部分，使用<ng-content>把面板内容投射到组件内部，expanded变量控制组件的展开/收缩状态。

点击头部的时候切换expanded的值，显示不同的箭头图标，切换class

<div class="collapse-wrapper" [class.collapsed]="!expanded">
  <div class="collapse-header" (click)="expanded=!expanded">
    <span>{
  {header}}</span>
    <ion-icon name
最低0.47元/天 解锁文章
MMMMQI
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
collapse组件样式 react_antd源码分析之——折叠面板（collapse）
weixin_35801916的博客
01-26 1801
目录一、antd中的collapse代码目录1、组件结构图(♦♦♦重要)2、源码节选：antd/components/collapse/collapse.tsx3、源码节选：antd/components/collapse/CollapsePanel.tsx二、RcCollapse代码目录1、组件内部属性结构及方法调用关系图(♦♦♦重要)2、组件应用的设计模式(♦♦♦重要)3、源码节选：rc-co...
Angular实现双向折叠列表组件的示例代码
08-28
Angular 实现双向折叠列表组件的示例代码 本篇文章主要介绍了 Angular 实现双向折叠列表组件的示例代码，分为左右两组，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 知识点 1：页面结构和状态分析 在...
AngularUI之collapse
小新正在敲代码
11-07 585
本月完成
8102 年，如何实现带动画的折叠面板
weixin_30507269的博客
05-10 299
作为一个经常写后端代码的程序员，偶尔写写前端代码也是勉强可以应付的。最近在重构某网站的时候，需要重新实现一个折叠面板。因为用了 Angular 这样酷炫的前端框架，我相信，就算没有 jQuery 这样的工具，手撸一个折叠面板应该没啥问题。就当我按照自己的直觉写完第一版代码之后，简单的运行了一下，我就发现事情好像并没有那么简单。 如果你愿意动手尝试的话，可以把下面的代码复制到 这里，在线预览效果 /...
angular 折叠框
weixin_33877885的博客
04-03 642
需求开发需要用到折叠框，实在不想去写一个完美的组件，只想用最简单的方法达到我想要的效果，于是就有了下面的效果： 1 默认显示打开更多文件，内容隐藏 2 内容显示，title显示为折叠 代码如下： <!DOCTYPE html> <html ng-app="MyModule"> <head> <meta charset...
ng2搭建系统-Accordion可折叠的面板
Irmhy
03-09 1040
2017/03./09其实吧 作为一个小渣子 并不太懂 大神们 为何 每次都要追求 某一种实现效果啊~~ 膜拜 T T 今天 是来记录一下 关于这个accordion折叠面板首先 需要在ng2工程中创建一个accordion-menu组件 创建指令为：ng g c accordion-menu 其次 需要把这个组件引用到你所要添加的父层模块中，我这里的父模块就直接指向根模块app.mod
基于angular6.0实现的一个组件懒加载功能示例
08-27
在上述示例中，`iwe7-lazy-load` 是一个第三方库，它扩展了Angular的懒加载功能，提供了更方便的方式来管理和实现组件级别的懒加载。以下是对关键步骤的详细说明： 1. **安装依赖**：首先，你需要通过`npm`或`yarn`...
Angular+ionic实现折叠展开效果的示例代码
10-15
总结一下，Angular+Ionic实现折叠/展开效果的关键在于利用Angular的数据绑定、条件指令和事件处理，结合Ionic的组件，如`<ion-item>`和`<ion-icon>`。通过这种方式，我们可以创建动态的交互式UI，使用户能够轻松地...
利用Ionic2 + angular4实现一个地区选择组件
08-29
在本文中，我们将探讨如何利用Ionic2和Angular4框架实现一个自定义的地区选择组件。Ionic是一个流行的混合移动应用开发框架，它允许开发者使用前端技术（如HTML、CSS和JavaScript，特别是Angular）来构建跨平台的...
Angular+ionic实现折叠展开效果
weixin_44794123的博客
07-28 834
1，html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isShow=!isShow">
Angular 动态添加 Tab 标签（通过路由实现）
02-24
通过使用路由来实现 Angular 动态添加 Tab 标签的效果。
AngularJs的UI组件ui-Bootstrap分享（二）——Collapse
weixin_34324081的博客
04-23 68
原文地址：http://www.cnblogs.com/pilixiami/p/5597837.html Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head...
angular-"详细信息"-页面折叠状态
神zhi殇的博客
04-15 575
想象： angular项目的页面，没有正常展示，而是展示“详细信息”的一个折叠，必须点开这个折叠才会正常显示页面！ eg： 图片后续补上！ 代码如下： <details class="ng-star-inserted" open> <div class="my-app"> // 这里面才是我正常的组件的html内容！ </div> </details...
浅谈Angular文字折叠展开组件的原理分析
xuehu837769474的博客
04-27 1082
自己写了个Angular的文字折叠组件，这种组件其实很多地方都能用到效果如下 展开后的效果 折叠后的效果 先放全部代码，使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可 .directive('textfold', function() { return { restrict:...
html树形菜单展开与收起,javascript – AngularJS中的子菜单(展开/折叠树)
weixin_36207513的博客
05-31 383
您可以使用以下代码在AngularJS上创建展开/折叠子菜单.我为你附上了JSFiddle的例子.{{item.name}}---{{subItem.name}}你的JS控制器：function MyCtrl($scope) {$scope.showChilds = function(item){item.active = !item.active;};$scope.items = [{name:...
AngularJS折叠菜单选中状态
知行合一
06-08 1433
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&amp;gt; &amp;lt;meta name=&am
angular实现多个div的展开和折叠
weixin_30906185的博客
09-22 728
代码： <body ng-app="app"> <ul ng-controller="myCtrl" style="list-style:none;"> <li ng-repeat="li in list track by $index" style="margin:5px;"> <di...
使用angular-ui-bootstrap的collapse的时候，缓动动画无法播放的问题
大连 云鹏
05-24 424
在使用ui-bootstrap的时候，试用了collapse这个组件，但是发现缓动动画一直无法播放 直接解决问题，可翻至最后，想进行分析调试，可看中间过程。 翻看源码，ui-bootstrap的源码最上就是uibCollapse的源码（我是用的版本是1.0,与之前的0.x版本源码有很大出入） 在源码中，坚挺了uibCollapse的值，当值发生变化，则会分别调用expand()或...
工作笔记之折叠面板
小新正在敲代码
10-11 956
需求分析：这次的任务主要是做右侧栏的Sort板块，主要的的需求可以分为以下几个小点： 1. 点击Sort右边的+号来展开面板 2. 点击面板中的Name这样的链接后，主框中会进行数据排序后再展示。技术难点分析： 利用angular ui来实现Sort面板的折叠效果，需要用到ui-collapse功能。可以通过https://angular-ui.github.io/bootstrap 页面查
写一个angular的动态组件
最新发布
03-31
以下是一个Angular的动态组件示例，该组件可以根据输入的组件类型动态创建并显示组件： app.component.ts ``` import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; import { DynamicComponent } from './dynamic.component'; @Component({ selector: 'app-root', template: ` <div #container></div> <button (click)="createComponent('dynamic')">Create Dynamic Component</button> `, }) export class AppComponent { @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef; constructor(private resolver: ComponentFactoryResolver) {} createComponent(type: string) { // 根据组件类型获取组件工厂 const factory = this.resolver.resolveComponentFactory(DynamicComponent); // 创建组件实例 const componentRef = this.container.createComponent(factory); // 设置组件属性 componentRef.instance.type = type; } } ``` dynamic.component.ts ``` import { Component, Input } from '@angular/core'; @Component({ selector: 'app-dynamic', template: ` <div *ngIf="type"> Dynamic Component Type: {{ type }} </div> `, }) export class DynamicComponent { @Input() type: string; } ``` 在这个例子中，我们首先在`AppComponent`中使用`ViewChild`获取了一个`ViewContainerRef`引用，这个`ViewContainerRef`表示了一个可以动态添加组件的容器。然后，我们在`createComponent`方法中根据输入的组件类型获取了一个组件工厂，并使用`createComponent`方法创建了一个组件实例，并将其添加到了容器中。最后，我们还在`DynamicComponent`中添加了一个`Input`属性`type`，用于接收传递进来的组件类型。 使用这个动态组件的示例可以参考以下内容： ``` <app-root></app-root> ``` 在页面中添加了一个按钮，当点击按钮时，会调用`AppComponent`中的`createComponent`方法创建一个`DynamicComponent`实例，并将其添加到页面中的容器中。这个`DynamicComponent`实例会根据传递进来的组件类型显示不同的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值