简介
angular-justified-layout
是一个基于 Angular 的用于图片自适应与排列的 npm 包。使用它可以帮助开发者快速地构建出一些漂亮的图片板块。
安装
运行下面代码即可安装:
--- ------- ------------------------ ------
使用
步骤一:导入模块
在需要使用的组件中导入 angular-justified-layout
模块。
------ - --------------------- - ---- --------------------------- --- ----------- -------- - ---------------------- --- - -- ------ ----- --------- - -
步骤二:使用组件
在组件的 HTML 中可以使用 justified-layout
指令,传入待排列图片列表和相应样式配置。
---- ---------------- -------------------- ---------------------- ---------------------- ------------------------ ---- ----------- --- -- ------- ----------- ------------------------------------- ------
其中:
boxAspectRatio
: 每个图片所占盒子的宽高比。minAspectRatio
: 每一行最小宽高比。maxAspectRatio
: 每一行最大宽高比。targetRowHeight
: 目标行高。[justified-layout-responsive]
: 指定每个图片是否自适应。
示例
---- ---------------- -------------------- ---------------------- ---------------------- ------------------------ ---- ----------- --- -- ------- ----------- ------------------------------------- ------
------------ --------- ----------- ------------ ------------------------ ---------- ------------------------- -- ------ ----- ------------- - ------ ------- -------- - - ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ------------------------------------------ ----------------------------------------- -- -
结语
angular-justified-layout
是一个方便快捷,使用简单的 npm 包,旨在为开发者提供一种快速构建图片板块的方案。如果您有兴趣,可以前往 其官方仓库 了解更多。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055eb081e8991b448dc497