Primeng PrimeFlex 的使用总结 (Angular 10)

最新推荐文章于 2024-07-20 21:59:09 发布

Damien_J

最新推荐文章于 2024-07-20 21:59:09 发布

阅读量2.8k

点赞数 1

分类专栏： Primeng

本文链接：https://blog.csdn.net/Damien_J_Scott/article/details/117462410

版权

Primeng 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

最近在使用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>