🤖 Prime Utilities
La documentación de Prime es muy complicada para navegar y encontrar rapidamente las referencias, es por eso que acá se listan las clases mas relevantes para utilizar en este proyecto
General Classes
| class | Description |
|---|---|
p-component | Applies component theming such as font-family and font-size to an element. |
p-disabled | Applies an opacity to display as disabled. |
p-sr-only | Element becomes visually hidden however accessibility is still available. |
p-reset | Resets the browsers defaults. |
p-link | Renders a button as a link. |
p-error | Indicates an error text. |
p-invalid | Styles an form element as invalid. |
p-text-secondary | Applies the text color of the theme with the secondary priority. |
Spacing Classes
The spacing classes use the p-{property}{position}-{value} syntax whereas for responsive values p-{property}{position}-{breakpoint}-{value} format is used.
| class | Description |
|---|---|
p-{property}{position}-{value} |
Spacing Config. |
{property} |
m : margin , p: padding |
{position} |
t: top , b: bottom , l: left , r: right , x: left and right , y: top and bottom , blank: all sides |
{value} |
0: 0, 1: .25rem, 2: .5rem, 3: 1rem, 4: 1.5rem, 5: 2rem, 6: 3rem, auto: auto margin |
{breakpoint} |
sm: small screens , md: medium screens , lg: large screens , xl: larger screens |
Display Classes
| class | Description | values |
|---|---|---|
p-d-{value} | Display | [none, inline, inline-block, block, flex, inline-flex] |
Grid (12 units)
| class | Description | values |
|---|---|---|
p-grid | Display Grid | |
p-col | Column flex 1 | |
p-col-{number} | Column with span | [1, 2, 3,4,5,6] |
p-col-fixed | Column with fixed width | |
p-offset-{number} | Column offseted | [1, 2, 3,4,5,6] |
p-nogutter | No gat between |
More info here PrimeVue Grid Documentation 🤮
Flex
| class | Description | values |
|---|---|---|
p-flex-{direction} | Direction | [row, row-reverse, column, column-reverse] |
p-order-{value} | Order | [0, 1, 2, 3 ,4, 5, 6] |
p-flex-{value} | Wrap | [nowrap, wrap, wrap-reverse] |
p-jc-{value} | Justify Content | [start, end, center, between, around, evenly] |
p-ai-{value} | Align Items | [stretch, start, end, center, baseline] |
p-as-{value} | Align Self | [stretch, start, end, center, baseline] |
p-ac-{value} | Align Content | [start, end, center, around, stretch, between] |
Text
| class | Description | values |
|---|---|---|
p-text-{value} | Alignment | left, center, right, justify |
p-text-{value} | Wrap | wrap, nowrap, truncate |
p-text-{value} | Transform | lowercase, uppercase, capitalize |
Responsive
The display classes use the p-d-{value} format and p-d-{breakpoint}-{value} format for responsive design.
smsmall screens e.g. phonesmdmedium screens e.g. tabletslglarge screens e.g. notebooksxllarger screens .e.g monitors