UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载ngx-bootstrap 的 Popover 组件ngx-bootstrap/popover提供了在 Angular 应用中快速创建悬浮提示的完整能力基础示例、四方向与角落定位、可关闭dismissible行为、TemplateRef/HTML 内容、容器挂载、全局配置、自定义与手动触发以及局部/全局样式定制。本文以仓库中文档页面规划清单libs/doc-pages/popover/src/lib/todo.md为核心骨架逐项对照其对应的真实 Demo 与核心源码src/popover带你从“会用一个按钮”进阶到“理解整个 Popover 的底层原理”。功能清单总览todo.md是 Popover 文档页的功能规划清单它列出的每一项功能都在仓库中落地为可运行的 Demo 组件与源码实现对应关系如下清单条目对应 Demo核心源码basic sampledemos/basicpopover.directive.tsfour directionsdemos/placement、demos/corner-placementplacement输入属性dismissible popovers (like tooltips)demos/dismiss、demos/outside-clicktriggers、outsideClicktemplateRef contentdemos/custom-contentpopover支持TemplateRefhtml contentdemos/dynamic-html[innerHtml]模板绑定container: bodydemos/containercontainer输入属性configdemos/configpopover.config.tstriggers (custom and manual)demos/triggers-custom、demos/triggers-manual、demos/trigger-by-isopen-propertytriggers、show()/hide()/toggle()、isOpenlocal stylingdemos/styling-local组件级样式global styling (custom class)demos/styling-global、demos/class全局样式、containerClassadd doc basedocs/usage.md安装与引入说明本文接下来按照这条清单逐一展开并在每个小节结合仓库 Demo 与源码给出可直接复制的写法。安装与模块引入Popover 功能的入口模块是PopoverModule相关 APIPopoverDirective、PopoverConfig、PopoverContainerComponent统一从ngx-bootstrap/popover导出见 src/popover/public_api.ts。官方推荐的快速安装方式文档页 popover-section.list.ts 中标注的安装命令ng add ngx-bootstrap --component popover手动安装时两种引入方式均被支持见 docs/usage.md。Standalone 组件用法import { PopoverModule } from ngx-bootstrap/popover; Component({ standalone: true, imports: [PopoverModule, ...] }) export class AppComponent() {}NgModule 用法import { PopoverModule } from ngx-bootstrap/popover; NgModule({ imports: [PopoverModule, ...] }) export class AppModule() {}从模块源码src/popover/popover.module.ts可以看到PopoverModule由PopoverDirective与PopoverContainerComponent组成并对外导出指令而指令本身以standalone: true方式声明popover.directive.ts因此两种引入路径都能正常工作。基础示例一行指令开启 Popover清单的第一项是 “basic sample”。最小可用示例非常简单——在按钮上添加popover指令并传入内容字符串即可demos/basic/basic.htmlbutton typebutton classbtn btn-primary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Live demo /button指令的选择器为[popover]同时通过exportAs: bs-popover暴露给模板引用popover.directive.ts。默认情况下点击元素显示、再次点击隐藏。从源码可以看到默认触发器为clicktriggers click见 popover.directive.ts并且在ngOnInit中会移除元素上的原生popover属性以避免与浏览器 HTML Popover API 冲突popover.directive.ts。四方向定位与角落定位清单第二项是 “four directions”。Popover 支持四种基础定位方向top、right、bottom、left此外还支持auto让库自动检测一个能完整放进屏幕的方向demos/placement/placement.htmlbutton typebutton classbtn btn-default btn-secondary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. popoverTitlePopover on top placementtop Popover on top /button button typebutton classbtn btn-default btn-secondary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. popoverTitlePopover on right placementright Popover on right /button button typebutton classbtn btn-default btn-secondary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. popoverTitlePopover auto placementauto Popover auto /button角落定位corner placementplacement除了四种基础方向外还支持在基础方向后追加角落修饰符共提供 8 种额外组合top left、top right、right top、right bottom、bottom right、bottom left、left bottom、left top。这些取值可以在 Demo 组件中通过下拉动态切换demos/corner-placement/corner-placement.tsplacements [ top left, top right, right top, right bottom, bottom right, bottom left, left bottom, left top ]; placement top left;模板中配合[placement]与[popoverTitle]动态绑定即可demos/corner-placement/corner-placement.html。在 Bootstrap 5 下源码会通过PlacementForBs5将位置值映射为对应的 Bootstrap 5 类名popover-container.component.ts。Dismissible像 Tooltip 一样点击即关清单第三项是 “dismissible popovers (like tooltips)”。Popover 的默认触发是click如果你希望它在“下一次点击其他位置”时自动关闭可以使用focus触发器demos/dismiss/dismiss.htmlbutton typebutton classbtn btn-success [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. popoverTitleDismissible popover triggersfocus Dismissible popover /button另一种实现“可关闭”的方式是outsideClick输入属性开启后点击 Popover 外部区域即自动隐藏demos/outside-click/outside-click.htmlbutton typebutton classbtn btn-primary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. [outsideClick]true Live demo /button从源码看outsideClick与triggers都会在ngOnInit中被传入ComponentLoader.listen()统一处理popover.directive.ts。TemplateRef 自定义内容清单第四项是 “templateRef content”。Popover 的内容不仅可以是字符串还可以是ng-template模板引用popover输入类型为string | TemplateRefany见 popover.directive.ts。创建任意 Angular 允许的 HTML 模板然后通过[popover]模板引用传入demos/custom-content/custom-content.htmlng-template #popTemplateJust another: {{content}}/ng-template button typebutton classbtn btn-warning [popover]popTemplate popoverTitleTemplate ref content inside TemplateRef binding /button模板可以访问组件类的属性因此内容可以完全动态化demos/custom-content/custom-content.tsexport class DemoPopoverCustomContentComponent { title Welcome word; content Vivamus sagittis lacus vel augue laoreet rutrum faucibus.; }如果模板需要独立的上下文变量还可以搭配popoverContext输入使用见后文“Popover 上下文”一节。HTML 内容innerHtml清单第五项是 “html content”。当内容需要动态渲染 HTML 时可以在ng-template内部使用[innerHtml]绑定demos/dynamic-html/dynamic-html.htmlng-template #popTemplateHere we go: div [innerHtml]html/div/ng-template button typebutton classbtn btn-success [popover]popTemplate popoverTitleDynamic html inside Show me popover with html /button对应的组件数据demos/dynamic-html/dynamic-html.tshtml span classbtn btn-dangerNever trust not sanitized HTML!!!/span;需要特别说明的是动态 HTML 会经过 Angular 的innerHtml安全机制处理未经过消毒sanitize的脚本不会被执行——这正是 Demo 文案中“Never trust not sanitized HTML”所提示的安全边界。切勿将用户输入直接作为 HTML 渲染。容器挂载container: body清单第六项是 “container: body”。当父元素存在overflow: hidden等样式或处于 input-group、button-group 等复杂结构中时Popover 可能被裁切或产生渲染问题。此时指定containerbody让 Popover 的 DOM 挂载到body下可以彻底规避这类问题demos/container/container.htmldiv classrow panel styleposition: relative; overflow: hidden; div classcard-block panel-body button typebutton classbtn btn-danger [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Default popover /button button typebutton classbtn btn-success [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. containerbody Popover appended to body /button /div /div源码层面container是一个可选的 CSS 选择器字符串popover.directive.ts在show()时通过this._popover.attach(...).to(this.container)决定挂载目标popover.directive.ts。全局配置PopoverConfig清单第七项是 “config”。除了在每个元素上单独设置输入属性你还可以通过注入PopoverConfig服务统一定义全局默认值。PopoverConfig在根级提供providedIn: root见 popover.config.ts其可配置项如下配置项默认值说明adaptivePositiontrue是否启用自适应位置flip / preventOverflowplacementtop默认定位方向支持top/bottom/left/right/autotriggersclick触发事件支持空格分隔的事件名列表outsideClickfalse点击外部是否关闭container无挂载容器选择器delay0显示前的延迟毫秒数boundariesElement无自适应边界取值viewport/scrollParent/windowDemo 中通过useFactory覆盖默认值同时保留未覆盖项的初始值demos/config/config.tsimport { PopoverConfig } from ngx-bootstrap/popover; // such override allows to keep some initial values export function getPopoverConfig(): PopoverConfig { return Object.assign(new PopoverConfig(), { placement: right, container: body, triggers: focus, delay: 500 }); } Component({ selector: demo-popover-config, templateUrl: ./config.html, providers: [{ provide: PopoverConfig, useFactory: getPopoverConfig }], standalone: false }) export class DemoPopoverConfigComponent {}配置后页面上所有 Popover 无需再逐个书写参数demos/config/config.htmlbutton typebutton classbtn btn-primary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Preconfigured popover /button在指令构造器中PopoverConfig被注入并通过Object.assign(this, _config)合并到指令实例上popover.directive.ts这就是“模板属性 全局配置”的默认值覆盖机制。触发方式自定义、手动与 isOpen清单第八项是 “triggers (custom and manual)”这是 Popover 交互灵活性最高的部分。自定义触发器triggers支持空格分隔的事件名也支持事件:事件的成对写法进入与离开事件类似 Tooltip 的hover语义。三个典型示例demos/triggers-custom/triggers-custom.htmlbutton typebutton classbtn btn-info [popover]I will hide on blur triggersmouseenter:mouseleave Hover over me! /button button typebutton classbtn btn-info [popover]Double click one more time triggersdblclick Double click me! /button input typetext classform-control placeholderShow popover on input change [popover]I will hide on blur triggerskeypress:focusout源码中triggers字符串会被parseTriggers解析为Trigger结构含open/close事件随后交给ComponentLoader.listen()注册监听popover.directive.ts。延迟显示场景下关闭触发器还会被用于取消尚未触发的定时器popover.directive.ts。手动触发将triggers置空triggers再通过#popbs-popover获取指令引用即可完全手动控制demos/triggers-manual/triggers-manual.htmlp span [popover]Hello there! I was triggered manually triggers #popbs-popover This text has attached popover /span /p button typebutton classbtn btn-success (click)pop.show()Show/button button typebutton classbtn btn-warning (click)pop.hide()Hide/button button typebutton classbtn btn-info (click)pop.toggle()Toggle/button指令对外暴露三个实例方法popover.directive.tsshow()打开 Popover若内容为空、已打开或有延迟定时器在等待则忽略调用hide()关闭 Popovertoggle()根据当前状态切换打开/关闭。通过 isOpen 属性驱动Popover 还提供了isOpen模型属性readonly isOpen model(false)见 popover.directive.ts支持双向绑定把显隐状态交给组件逻辑控制demos/trigger-by-isopen-property/trigger-by-isopen-property.htmlp span [popover]Hello there! I was triggered by changing isOpen property triggers [(isOpen)]isOpen This text has attached popover /span /p button typebutton classbtn btn-primary (click)isOpen !isOpenToggle/button指令内部通过effect()响应isOpen变化自动调用show()/hide()popover.directive.ts。局部样式与全局样式清单第九、十项分别对应 “local styling” 与 “global styling (custom class)”。局部样式组件级在组件装饰器中通过styles为:host作用域内的.popover定制样式只会影响该组件demos/styling-local/styling-local.tsComponent({ selector: demo-popover-styling-local, templateUrl: ./styling-local.html, styles: [ :host .popover { background-color: #009688; color: #fff; } :host .popover.arrow:after { border-top-color: #009688; } ], standalone: false }) export class DemoPopoverStylingLocalComponent {}全局样式自定义类全局样式可以在任意全局样式表中直接覆盖.popover及其箭头demos/styling-global/styling-global.htmlstyle .popover { background-color: #7B1FA2; color: #fff; } .popover.arrow:after { border-top-color: #7B1FA2 !important; } /style button typebutton classbtn btn-success [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. I was globally styled /button此外还有更精确的containerClass输入属性为 Popover 容器追加自定义类再针对该类编写样式demos/class/class.htmlbutton typebutton classbtn btn-primary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. containerClasscustomClass Custom class demo /button该参数最终会拼入 Popover 容器组件的宿主 class 列表见 popover-container.component.ts 的[class]绑定。其他常用能力延迟、事件、上下文与自适应除清单条目外仓库文档页还实现了若干高频能力一并收录如下。显示延迟delay输入毫秒常用于避免误触demos/delay/delay.htmlbutton typebutton classbtn btn-primary [popover]Vivamus sagittis lacus vel augue laoreet rutrum faucibus. [delay]500 Popover with 0.5sec delay /button显隐事件(onShown)/(onHidden)输出事件在 Popover 显示/隐藏时触发demos/events/events.html、demos/events/events.ts。内部由ComponentLoader的onShown/onHidden事件转发popover.directive.ts。Popover 上下文配合TemplateRef内容使用popoverContext让模板通过let-xxxyyy读取上下文demos/popover-context/popover-context.ts、demos/popover-context/popover-context.htmlcontext { message: Hello there! };ng-template #popTemplate let-messagemessage{{ message }}/ng-template button typebutton classbtn btn-primary [popover]popTemplate [popoverContext]context Open popover with custom context /button自适应位置与边界adaptivePosition控制是否启用自动翻转与防溢出默认开启boundariesElement指定边界参考元素取值viewport、scrollParent、windowdemos/adaptive-position/adaptive-position.html、demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary.htmlbutton typebutton classbtn btn-default btn-secondary [popover]... popoverTitlePopover on top [adaptivePosition]false placementtop Popover on top /button button typebutton classbtn btn-default btn-secondary [popover]... popoverTitlePopover on bottom [adaptivePosition]true containerbody boundariesElementviewport placementbottom Popover on bottom /button源码中show()会根据adaptivePosition配置flip与preventOverflow两个定位修饰器并传入boundariesElement || scrollParentpopover.directive.ts禁用自适应时会先计算位置再移除定位元素保证静态定位popover.directive.ts。源码级运行原理综合 popover.directive.ts 与 popover-container.component.tsPopover 的整体运作流程可以概括为指令层PopoverDirective宿主元素添加[popover]指令后通过ComponentLoaderFactory创建加载器注入PopoverConfig合并默认值popover.directive.ts。事件层ngOnInit中注册triggers与outsideClick监听回调show()/hide()popover.directive.ts。渲染层show()时动态挂载PopoverContainerComponent到指定容器按placement计算定位容器模板由箭头.popover-arrow、可选标题popover-header和内容popover-body构成popover-container.component.html。状态层显示/隐藏同步更新isOpen模型、aria-describedby无障碍属性并发出onShown/onHidden事件popover.directive.ts。销毁层ngOnDestroy调用dispose()清理加载器与监听popover.directive.ts。小结从todo.md的十二项功能清单出发本文完整覆盖了 ngx-bootstrap Popover 的基础示例、四方向与角落定位、dismissible 关闭机制、TemplateRef/HTML 内容、container: body挂载、PopoverConfig全局配置、自定义/手动/isOpen 三种触发方式、局部与全局样式定制以及延迟、事件、上下文、自适应位置等扩展能力并深入到指令与容器的源码实现。读者既可以直接复制本文的 Demo 代码投入实战也可以结合 libs/doc-pages/popover/src/lib/demos 目录中的完整示例继续探索。赞分享UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载相关推荐ngx-bootstrap Popover 延迟显示delay完全指南从 [delay]500 到源码级原理ngx bootstrap Popover 延迟显示delay完全指南从 delay 500 到源码级原理 本指南围绕 ngx bootstrapUI组件前端ngx-bootstrap Buttons 基础示例Basic使用场景与实现源码解析ngx bootstrap Buttons 基础示例Basic使用场景与实现源码解析 ngx bootstrap 是 Angular 生态中基于 BootsUI组件前端WordPress Gutenberg Toolbar 组件完全指南从设计规范到源码实现WordPress Gutenberg Toolbar 组件完全指南从设计规范到源码实现 Toolbar 是 WordPress Gutenberg 块编辑器UI组件前端上一篇星火应用商店快速上手Linux 应用管理从安装到更新一步到位下一篇折叠屏分屏拖拽适配指南ImmersionBar窗口边界动态调整方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考