最近在使用PrimeFlex,感觉挺好用的,写篇Blog总结下.它的每个class都有响应式使用方式,但是我的项目不要求响应式,我就不介绍了,需要的话自己去看吧.其实他的每个class我们都可以用自己的css实现,但是他的意义就是减少我们的开发成本,一个class就实现的就没必要再去自己造轮子了.

我项目使用暂时还没升级angular11还是v10,但是primeng用的是 11.3.1.

文档

https://www.primefaces.org/primeng/showcase/#/primeflex

Package.json

引入Primeng以及primeFlex的依赖.

"dependencies": {//..."primeflex": "2.0.0","primeicons": "4.1.0","primeng": "11.3.1",//...}

引入CSS

我是在 src\main\webapp\content\scss\vendor.scss 中引入的. src\main\webapp\app\vendor.ts 会引入这个CSS,然后 app.module.ts 会引入这个ts.当然,你也可以在任何global的css中引入这个.

/*vendor.scss*/
@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/saga-blue/theme.css';
@import '~primeng/resources/primeng.min.css';@import '~primeflex/primeflex.css';

//vendor.ts
import '../content/scss/vendor.scss';

//app.module.ts
import './vendor';

使用

这个的使用方式就和Bootstrap差不多,就是使用class.接下来我会介绍几个我在项目中感觉会经常用到的class.

Elevation

这个在UI布局中挺好用的,其实它的源码实现就是加了box-shadow. 但是在UI视觉中就感觉这个dom是有一定高度的,很适合在页面中分割不同的组件.

使用方式就是在class中加入 p-shdow-? ?的值是 1-24的区间值,值越大阴影越深,视觉上就距离z轴越高.

<div class="p-shadow-1" />
<div class="p-shadow-24" />

Display

控制dom的display方式,就是添加 display css进行控制.
inline

block

flex

inline-flex

使用方式就是给dom添加 p-d-? , ?有六个可选值.

<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>

Align Items

这个我是用的比较频繁的内部Item的垂直对齐方式.我们直到在css中vertical-align只能在table中生效. 所以他的源码实现是在display:flex情况下用align-items去控制.

使用方式就是在层div上加入 p-d-flex p-ai-? class. ?的值有五个可选项

<div class="p-d-flex p-ai-start"><div class="p-mr-2" style="height:100px">Item 1</div><div style="height:50px">Item 2</div>
</div>

Align Self

这个和上一个的区别就是,p-ai-? 是用来配置该dom内部所有元素的垂直对齐方式,而这个是设置自己的对齐方式,也就是说一个dom内可以有多个不同的对齐方式.

使用方式就在外层dom上加 p-d-flex ,再在内部dom 加 ***p-as-?***.
他也有五个选项

<div class="p-d-flex" style="height: 150px;"><div class="p-mr-2 p-as-start">Start</div><div class="p-mr-2 p-as-center">Center</div><div class="p-mr-2 p-as-end">End</div><div class="p-mr-2 p-as-stretch">Stretch</div>
</div>

Justify Content

这个作用就是控制dom内部的div分布方式.实现方式是 display:flex 前提下使用 justify-content 来控制.这个在布局中也很常用

start

center

end

between

around

evenly

around和evenly的区别就是,around中间其他div间距相同但是两边的间距不同, 而evenly则是所有的间距相同

使用方式就是在外部dom上加 *p-d-flex p-jc-?. 有六个值可以设置.

<div class="p-d-flex p-jc-between"><div>Item 1</div><div>Item 2</div>
</div>

Wrap

可以控制display:flex内部在有多个div情况下吗,实现方式就是在dispay:flex内部使用 ***flex-wrap***进行控制,超出外部dom最大宽度时的策略.(我给演示图加了border,以及给warp加了 p-jc-evenly,方便体现出效果).其实这个种比较适用于动态添加或者 ngfor出来的div的情况.

no warp

warp

warp reverse

使用方式就是给外部dom添加 ***p-d-flex p-flex-?***,总共三个可选值

<div class="p-d-flex p-flex-wrap"><div class="p-mr-2 p-mb-2">Item 1</div><div class="p-mr-2 p-mb-2">Item 2</div><div class="p-mr-2 p-mb-2">Item 3</div><div class="p-mr-2 p-mb-2">Item 4</div><div class="p-mr-2 p-mb-2">Item 5</div><div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Order

用于指定dom内部div渲染顺序或者称之为排列顺序.实现方式就是在外层dom为display:flex情况下内部div使用 order 进行控制.这个也是多半用于动态添加div或者ngfor出来div的情况下给div排序用的.

使用方式就是给外部dom添加 p-d-flex,内部div添加 ***p-order-?***,?代表顺序,值越小越靠前.

这就是演示图的源码.

<div class="p-d-flex"><div class="p-mr-2 p-order-3">Item 1</div><div class="p-mr-2 p-order-1">Item 2</div><div class="p-mr-2 p-order-2">Item 3</div>
</div>

Direction

用于控制dom内部div排列方向.实现方式是在display:flex前提下使用 ***flex-direction***进行控制.

row (default)

row-reverse

column

column-reverse

使用方式就是添加 ***p-d-flex p-flex-?***, ?有四个可选值.

<div class="p-d-flex p-flex-column"><div class="p-mb-2 p-mr-2">Item 1</div><div class="p-mb-2 p-mr-2">Item 2</div><div class="p-mb-2 p-mr-2">Item 3</div>
</div>

Grid

这个很像Bootsrap的col网格布局.用法约等于一摸一样.如果你用过bootsrap的col,一行是12个col,那你基本马上就会.唯一不同的是,它的实现方式通过display:flex之后在内部通过 flex-grow 以及 flex-basis 进行控制.所以一开始介绍的在display:flex种使用的class,在grid里面都可以使用,所以这也是我吧grid放在这里介绍的原因.

<div class="p-grid"><div class="p-col-4">4</div><div class="p-col">1 </div><div class="p-col">1 </div><div class="p-col">1 </div><div class="p-col">1 </div><div class="p-col">1 </div><div class="p-col">1 </div><div class="p-col">1 </div><div class="p-col">1 </div>
</div><div class="p-grid"><div class="p-col-2">2</div><div class="p-col-6">6</div><div class="p-col-4">4</div>
</div>


<div class="p-grid"><div class="p-col-6 p-offset-3">6</div>
</div><div class="p-grid"><div class="p-col-4">4 </div><div class="p-col-4 p-offset-4">4</div>
</div>

这是响应式的class,这个必须要带入以下,因为这个在响应式布局中,使用非常多.

Spacing

这个其实我在项目种经常会用到,非常使用,但是也有局限性.实现方式其实就是 margin 或者 padding,其实很多项目种会遇到,想给一个dom给一点margin-left,单独去css里面写个控制太麻烦,直接写style又和整体的代码风格不一致.这个时候这个就很有用了.缺点也很明显,它的值有限制,只有在很小限度内可以使用,比如想给一个 10rem 这种的就不行了.

这个没什么值得演示的,就是给margin或者padding,就直接介绍了.
使用方式就是 p-{property}{position}-{value}

<div class="p-mb-2">Margin bottom with level 2</div>
<div class="p-mt-4">Margin top with level 4</div>
<div class="p-m-2">Margin for all sides with level 2</div>
<div class="p-mx-auto">Auto margins for left and right side</div>
<div class="p-pb-4">Padding bottom with level 4</div>
<div class="p-p-1">Padding for all sides with level 1</div>
<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>

Text

接下来是对text的控制,也挺实用的.他的所有使用方式都是 ***p-text-?***,只是?种的值不同, 一个一个来介绍

Alignment
实现方式就是 text-align

<div class="p-text-left">Left</div>
<div class="p-text-center">Center</div>
<div class="p-text-right">Right</div>
<div class="p-text-justify">Justify</div>

一共四个可选值

Wrap
超过div宽度之后的换行策略,这个和之前讲的 flex-wrap,差不多,只不过一个用于控制 flex box内部dom的一个用于控制text的.源码就是通过控制 white-space 以及 ***text-overflow***来实现.

warp (defualt)

nowarp

truncate

<div style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>

Transform

控制text大小写,实现就是控制 text-transform. 总共三个可选值,小写 ,大写, 首字母大写.其实这个也可以用angular的pipe实现.但是这个更加方便一点.

<div class="p-text-lowercase">LOWERCASE</div>
<div class="p-text-uppercase">uppercase</div>
<div class="p-text-capitalize">capitalize</div>

Style
控制text的样式,实现就是控制 font-weight 或者 font-style

<div class="p-text-bold">Bold</div>
<div class="p-text-normal">Normal</div>
<div class="p-text-light">Light</div>
<div class="p-text-italic">Italic</div>

Primeng PrimeFlex 的使用总结 (Angular 10)相关推荐

如何在Angular 10中生成QR码
In this tutorial, we'll learn how to generate QR codes in Angular 10 by building a simple example ap ...
小米否认“造车”；微软中国回应关闭实体直营店；Angular 10 发布 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极 ...
angular 代码生成器_使用Angular 10构建QR代码生成器
angular 代码生成器 In this tutorial, we'll learn how to build a QR Codes generator application using the ...
Angular 10 - CommonJS or AMD dependencies can cause optimization bailouts warning
问题描述: 这几天升级公司的一个Angular项目,把Angular更新到最新的10.0.1版本. {"dependencies": {"@angular/animati ...
10 个 GitHub 上超火和超好看的管理后台模版，后台管理项目有着落了
大家好,我是你们的超级猫,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 前言一般人没事的时候刷刷朋友圈.微博.电视剧.知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目. 久而久 ...
2021年的Angular最佳实践
目录使用Angular CLI 保持最新严格模式使用延迟加载取消订阅RxJS Observables 将ngFor与trackBy一起使用结论 Angular由Google开发人员使用Typ ...
primeng使用步骤
1,选择路径,使用cli新建项目选择要创建项目的文件夹路径D:\primeNG files 地址栏打开cmd输入ng new KW2后回车 2,确认创建成功启动服务器注意:如果创建成功,用cmd ...
PrimeNG p-tree 手动添加勾选
Angular+PrimeNG p-tree的勾选 Angular+PrimeNG p-tree 初始化勾选 Angular+PrimeNG p-tree 初始化勾选业务需求,需要多树勾选联动.这就 ...
Angular 踩坑之版本升级—— TS / Node版本
这个比较简单也比较坑,可能你只计划升级Node,但最后发现连Angular也要一起升,无形中工作量加大不少,Angular官方也没说对应的TS版本和Node版本.但是在compiler-cli里确实对 ...

Primeng PrimeFlex 的使用总结 (Angular 10)

文档