DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to
DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to PrimeFlex documentation for details.
DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
diff --git a/src/views/display/DisplayDemo.vue b/src/views/display/DisplayDemo.vue deleted file mode 100644 index 0cedcb865..000000000 --- a/src/views/display/DisplayDemo.vue +++ /dev/null @@ -1,43 +0,0 @@ - -Efficiently configure the display of the component with PrimeFlex display utilities.
-Resize to view.
- - -Resize to hide.
- -The display classes use the {value} format and {breakpoint}:{value} format for responsive design.
- -Value field can be one of the following options.
-Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values - can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.
-
-<div class="inline">Displayed as inline.</div>
-<div class="flex">Displayed as a flexbox container.</div>
-<div class="block lg:inline">Inline for larger screens and block for others.</div>
-<div class="md:hidden">Visible on a Small Screen</div>
-<div class="hidden md:inline-flex">Hidden on a Small Screen</div>
-
-A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.
- -PrimeFlex 3.1.2.
-Elevation is an add-on utility of PrimeFlex and used to specify the separation between surfaces and elements along the z-axis.
-Elevation is added to an element using the .shadow-{level} class.
-
-<div class="shadow-1" />
-
-There are 8 depths available varying from 1 to 8.
-
-<div class="shadow-1" />
-<div class="shadow-8" />
-
-PrimeFlex 3.1.2.
-Easily manage the layout of your components with the responsive FlexBox utilities. -
- -An element can configured as a flexbox container using the flex or inline-flex classes.
- -
-<div class="flex">Flex Container</div>
-<div class="inline-flex">Inline Flex Container</div>
-
-Default is applied using the flex-{direction} class where direction can be either of the following.
-
-<div class="flex">
- <div class="mr-2">Item 1</div>
- <div class="mr-2">Item 2</div>
- <div>Item 3</div>
-</div>
-
-
-<div class="flex flex-column">
- <div class="mb-2">Item 1</div>
- <div class="mb-2">Item 2</div>
- <div>Item 3</div>
-</div>
-
-Row direction for larger screens and column for smaller.
- -
-<div class="flex flex-column md:flex-row">
- <div class="mb-2 mr-2">Item 1</div>
- <div class="mb-2 mr-2">Item 2</div>
- <div class="mb-2 mr-2">Item 3</div>
-</div>
-
-Order configures the way in which they appear in the flex container. order-{value} format is used where value can be a number from 0 to 6.
- -
-<div class="flex">
- <div class="mr-2 order-3">Item 1</div>
- <div class="mr-2 order-1">Item 2</div>
- <div class="mr-2 order-2">Item 3</div>
-</div>
-
-Orders change depending on the screen size.
-
-<div class="flex">
- <div class="mr-2 order-3 md:order-2">Item 1</div>
- <div class="mr-2 order-1 md:order-3">Item 2</div>
- <div class="mr-2 order-2 md:order-1">Item 3</div>
-</div>
-
-Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is flex-{value} and the value field can be either of the - listed alternatives.
- -
-<div class="flex">
- <div class="mr-2 mb-2">Item 1</div>
- <div class="mr-2 mb-2">Item 2</div>
- <div class="mr-2 mb-2">Item 3</div>
- <div class="mr-2 mb-2">Item 4</div>
- <div class="mr-2 mb-2">Item 5</div>
- <div class="mr-2 mb-2">Item 6</div>
-</div>
-
-
-<div class="flex flex-wrap">
- <div class="mr-2 mb-2">Item 1</div>
- <div class="mr-2 mb-2">Item 2</div>
- <div class="mr-2 mb-2">Item 3</div>
- <div class="mr-2 mb-2">Item 4</div>
- <div class="mr-2 mb-2">Item 5</div>
- <div class="mr-2 mb-2">Item 6</div>
-</div>
-
-
-<div class="flex flex-wrap-reverse">
- <div class="mr-2 mb-2">Item 1</div>
- <div class="mr-2 mb-2">Item 2</div>
- <div class="mr-2 mb-2">Item 3</div>
- <div class="mr-2 mb-2">Item 4</div>
- <div class="mr-2 mb-2">Item 5</div>
- <div class="mr-2 mb-2">Item 6</div>
-</div>
-
-Justify content is the alignment along the main axis and defined using the justify-content-{value} format with responsive alternatives. Value field accepts - the options below.
-
-<div class="flex justify-content-center">
- <div>Item 1</div>
- <div>Item 2</div>
-</div>
-
-
-<div class="flex justify-content-center">
- <div class="mr-2">Item 1</div>
- <div>Item 2</div>
-</div>
-
-Align Items configuration is the alignment along the cross axis and defined using the align-items-{value} format with responsive alternatives. Value field accepts - the options below.
-
-<div class="flex align-items-start">
- <div class="mr-2" style="height:100px">Item 1</div>
- <div style="height:50px">Item 2</div>
-</div>
-
-
-<div class="flex align-items-center">
- <div class="mr-2" style="height:100px">Item 1</div>
- <div style="height:50px">Item 2</div>
-</div>
-
-Align self configuration is the alignment along the cross axis for a particular element and defined using the align-self-{value} format with responsive alternatives. Value field accepts - the options below.
-
-<div class="flex" style="height: 150px;">
- <div class="mr-2 align-self-start">Start</div>
- <div class="mr-2 align-self-center">Center</div>
- <div class="mr-2 align-self-end">End</div>
- <div class="mr-2 align-self-stretch">Stretch</div>
-</div>
-
-Align content is the alignment along the cross axis and defined using the align-content-{value} format with responsive alternatives. Value field accepts - the options below.
-When combined with
-<div class="flex p-3 card">
- <Button type="Button" icon="pi pi-check" class="mr-2" />
- <Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
- <Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/>
-</div>
-
-
-<div class="flex flex-column" style="height:150px">
- <div>Item 1</div>
- <div class="mt-auto">Item 2</div>
-</div>
-
-PrimeFlex 3.1.2.
-Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by PrimeFlex, - a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.
-Core member of the FormLayout is the .field class that wraps the input field and the associated label.
-
-<div class="field">
- <label for="fieldId">Label</label>
- <InputText id="fieldId" type="text" />
-</div>
-
-In its simplest form, a vertical layout is created when used within .p-fluid that makes the components use all available width.
-
-<div class="p-fluid">
- <div class="field">
- <label for="firstname">Firstname</label>
- <InputText id="firstname" type="text" />
- </div>
- <div class="field">
- <label for="lastname">Lastname</label>
- <InputText id="lastname" type="text" />
- </div>
-</div>
-
-This is where FormLayout actually hooks-in to PrimeFlex with the help of .formgrid class to optimize the content for form design. Example - below arranges two fields to be displayed next two each other.
-
-<div class="p-fluid formgrid grid">
- <div class="field p-col">
- <label for="firstname">Firstname</label>
- <InputText id="firstname" type="text" />
- </div>
- <div class="field p-col">
- <label for="lastname">Lastname</label>
- <InputText id="lastname" type="text" />
- </div>
-</div>
-
-In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this - example, label has a fixed width where container of the inputs gets the remaining space. -
-
-<div class="field grid">
- <label for="firstname" class="p-col-fixed" style="width:100px">Firstname</label>
- <div class="p-col">
- <InputText id="firstname" type="text" />
- </div>
-</div>
-<div class="field grid">
- <label for="lastname" class="p-col-fixed" style="width:100px">Lastname</label>
- <div class="p-col">
- <InputText id="lastname" type="text" />
- </div>
-</div>
-
-Wrapping the form in the previous example with .p-fluid and removing the fixed width results in a fluid layout.
-
-<div class="p-fluid">
- <div class="field grid">
- <label for="firstname" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
- <div class="col-12 md:col-10">
- <InputText id="firstname" type="text" />
- </div>
- </div>
- <div class="field grid">
- <label for="lastname" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
- <div class="col-12 md:col-10">
- <InputText id="lastname" type="text" />
- </div>
- </div>
-</div>
-
-Inline forms are used to display the content on the same row and can simply be implemented by adding .formgroup-inline to the form container. Note that per design requirements, if labels - are not visually hidden, it is suggested to use .p-sr-only to still support screen readers.
-
-<div class="formgroup-inline">
- <div class="field">
- <label for="firstname" class="p-sr-only">Firstname</label>
- <InputText id="firstname" type="text" placeholder="Firstname" />
- </div>
- <div class="field">
- <label for="lastname" class="p-sr-only">Lastname</label>
- <InputText id="lastname" type="text" placeholder="Lastname" />
- </div>
- <Button type="button" label="Submit" />
-</div>
-
-Checkbox and RadioButton have exclusive layout support via .field-checkbox and .field-radiobutton classes respectively. - Examples here demonstrates vertical and horizontal layout alternatives.
-
-<h3>Vertical Checkbox</h3>
-<div class="field-checkbox">
- <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
- <label for="city1">Chicago</label>
-</div>
-<div class="field-checkbox">
- <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
- <label for="city2">Los Angeles</label>
-</div>
-
-<h3>Horizontal Checkbox</h3>
-<div class="formgroup-inline">
- <div class="field-checkbox">
- <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
- <label for="city3">Chicago</label>
- </div>
- <div class="field-checkbox">
- <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
- <label for="city4">Los Angeles</label>
- </div>
-</div>
-
-
-<h3>Vertical RadioButton</h3>
-<div class="field-radiobutton">
- <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
- <label for="city5">Chicago</label>
-</div>
-<div class="field-radiobutton">
- <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
- <label for="city6">Los Angeles</label>
-</div>
-
-<h3>Horizontal RadioButton</h3>
-<div class="formgroup-inline">
- <div class="field-checkbox">
- <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
- <label for="city7">Chicago</label>
- </div>
- <div class="field-checkbox">
- <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
- <label for="city8">Los Angeles</label>
- </div>
-</div>
-
-Helper text is an optional element defined with the small tag to display additional information about the input field.
-
-<div class="field p-fluid">
- <label for="username">Username</label>
- <InputText id="username" type="username" aria-describedby="username-help" />
- <small id="username-help">Enter your username to reset your password.</small>
-</div>
-
-A responsive form with various input fields can easily be implemented using a combination of .field, .formgrid and .p-fluid.
-
-<div class="p-fluid formgrid grid">
- <div class="field col-12 md:col-6">
- <label for="firstname">Firstname</label>
- <InputText id="firstname" type="text" />
- </div>
- <div class="field col-12 md:col-6">
- <label for="lastname">Lastname</label>
- <InputText id="lastname" type="text" />
- </div>
- <div class="field col-12">
- <label for="address">Address</label>
- <Textarea id="address" rows="4" />
- </div>
- <div class="field col-12 md:col-6">
- <label for="city">City</label>
- <InputText id="city" type="text" />
- </div>
- <div class="field col-12 md:col-3">
- <label for="state">State</label>
- <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
- </div>
- <div class="field col-12 md:col-3">
- <label for="zip">Zip</label>
- <InputText id="zip" type="text" />
- </div>
-</div>
-
-FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building primeflex.scss with your on variables.
- -| Variable | -Default | -
|---|---|
| $fieldMargin | -1em | -
| $fieldLabelMargin | -.5em | -
Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
- -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit A Complete Guide to Flexbox. A basic grid is defined by giving - a container grid class and children the col class. Children of the grid will have the same width and scale according to the width of the parent.
-
-<div class="grid">
- <div class="col">1</div>
- <div class="col">2</div>
- <div class="col">3</div>
-</div>
-
-FlexGrid includes a 12 column based layout utility where width of a column is defined with the col-{number} style class. Columns with prefined widths can be used with columns with auto width (col) as well.
- -In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.
-
-<div class="grid">
- <div class="col-4">4</div>
- <div class="col">1</div>
- <div class="col">1</div>
- <div class="col">1</div>
- <div class="col">1</div>
- <div class="col">1</div>
- <div class="col">1</div>
- <div class="col">1</div>
- <div class="col">1</div>
-</div>
-
-<div class="grid">
- <div class="col-2">2</div>
- <div class="col-6">6</div>
- <div class="col-4">4</div>
-</div>
-
-When the number of columns exceed 12, columns wrap to a new line.
-
-<div class="grid">
- <div class="col-6">6</div>
- <div class="col-6">6</div>
- <div class="col-6">6</div>
- <div class="col-6">6</div>
-</div>
-
-A column can have a fixed width while siblings having auto width. Apply col-fixed class to fix a column width.
-
-<div class="grid">
- <div class="col-fixed" style="width:100px">Fixed</div>
- <div class="col">Auto</div>
-</div>
-
-Responsive layout is achieved by applying breakpoint specific classes to the columns whereas col-* define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.
-| Prefix | -Devices | -Media Query | -Example | -
|---|---|---|---|
| p-sm-* | -Small devices | -min-width: 576px | -sm:col-6, sm:col-4 | -
| p-md-* | -Medium sized devices such as tablets | -min-width: 768px | -md:col-2, md:col-8 | -
| p-lg-* | -Devices with large screen like desktops | -min-width: 992px | -lg:col-6, lg:col-12 | -
| p-xl-* | -Big screen monitors | -min-width: 1200px | -xl:col-2, ui-xl-10 | -
In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.
-
-<div class="grid">
- <div class="col-12 md:col-6 lg:col-3">A</div>
- <div class="col-12 md:col-6 lg:col-3">B</div>
- <div class="col-12 md:col-6 lg:col-3">C</div>
- <div class="col-12 md:col-6 lg:col-3">D</div>
-</div>
-
-Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.
-
-<div class="grid">
- <div class="col-6 col-offset-3">6</div>
-</div>
-
-<div class="grid">
- <div class="col-4">4</div>
- <div class="col-4 col-offset-4">4</div>
-</div>
-
-The list of offset classes varying within a range of 1 to 12.
-| Prefix | -Devices | -Media Query | -Example | -
|---|---|---|---|
| col-offset-* | -All devices | -All screens | -col-offset-6, col-offset-4 | -
| p-sm-offset-* | -Small devices | -min-width: 576px | -p-sm-offset-6, p-sm-offset-4 | -
| p-md-offset-* | -Medium sized devices such as tablets | -min-width: 768px | -p-md-offset-6, p-md-offset-4 | -
| p-lg-offset-* | -Devices with large screen like desktops | -min-width: 992px | -p-lg-offset-6, p-lg-offset-4 | -
| p-xl-offset-* | -Big screen monitors | -min-width: 1200px | -p-xl-offset-6, p-xl-offset-4 | -
Columns can be nested to create more complex layouts.
-
-<div class="grid nested-grid">
- <div class="col-8">
- <div class="grid">
- <div class="col-6">
- 6
- </div>
- <div class="col-6">
- 6
- </div>
- <div class="col-12">
- 12
- </div>
- </div>
- </div>
- <div class="col-4">
- 4
- </div>
-</div>
-
-A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply - grid-nogutter class to the container. Gutters can also be removed on an ndividual columns with the same class name. -
-
-<div class="grid grid-nogutter">
- <div class="col">1</div>
- <div class="col grid-nogutter">2</div>
- <div class="col">3</div>
-</div>
-
-PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly - recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeVue.
- -PrimeFlex is available at npm, if you have an existing application run the following commands to install it.
- -
-npm install primeflex --save
-
-Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.
- -
-import 'primeflex/primeflex.css';
-
-
-<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
-
-PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli - that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.
-
-import 'primeflex/src/_animations.scss';
-import 'primeflex/src/_border.scss';
-import 'primeflex/src/_borderradius.scss';
-import 'primeflex/src/_colors.scss';
-import 'primeflex/src/_display.scss';
-import 'primeflex/src/_elevation.scss';
-import 'primeflex/src/_flexbox.scss';
-import 'primeflex/src/_formlayout.scss';
-import 'primeflex/src/_grid.scss';
-import 'primeflex/src/_image.scss';
-import 'primeflex/src/_liststyle.scss';
-import 'primeflex/src/_misc.scss';
-import 'primeflex/src/_mixins.scss';
-import 'primeflex/src/_overflow.scss';
-import 'primeflex/src/_padding.scss';
-import 'primeflex/src/_position.scss';
-import 'primeflex/src/_size.scss';
-import 'primeflex/src/_spacing.scss';
-import 'primeflex/src/_transform.scss';
-import 'primeflex/src/_transition.scss';
-import 'primeflex/src/_typography.scss';
-import 'primeflex/src/_userselect.scss';
-import 'primeflex/src/_utils.scss';
-import 'primeflex/src/_variables.scss';
-import 'primeflex/src/_zindex.scss';
-
-| Variable | -Description | -Default | -
|---|---|---|
| $sm | -Breakpoint of screens such as phones. | -576px | -
| $md | -Breakpoint of screens such as tablets. | -768px | -
| $lg | -Breakpoint of screens such as notebook monitors. | -992px | -
| $xl | -Breakpoint of smaller screens such as desktop monitors. | -1200px | -
| $gutter | -Padding of a grid column. | -.5rem | -
| $fieldMargin | -Spacing of a field. Can be vertical of horizontal depending on form layout. | -1rem | -
| $fieldLabelMargin | -Spacing of a field label. Can be vertical of horizontal depending on form layout. | -.5rem | -
| $helperTextMargin | -Top spacing of a helper text. | -.25rem | -
| $spacer | -Base value to use in spacing utilities, view spacing documentation for details. | -1rem | -
| $separator | -Separator between responsive breakpoints like md: and pseudo classes like hover: | -: | -
There are two ways to use these variables, one option is getting the source code of PrimeFlex from github, compile your own primeflex and importing the css file. Other - alternative is importing your own variables to override the defaults if your application can import scss files. Example below overrides breakpoints; -
- -_overrides.scss
-
-$sm:640px;
-$md:720px;
-$lg:960px;
-$xl:1080px;
-
-
-import './assets/_overrides.scss';
-import 'primeflex/src/_variables.css';
-import 'primeflex/src/_grid.css';
-import 'primeflex/src/_formlayout.css';
-import 'primeflex/src/_display.css';
-import 'primeflex/src/_text.css';
-import 'primeflex/src/_flexbox.css';
-import 'primeflex/src/_spacing.css';
-import 'primeflex/src/_elevation.css';
-
-When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including - the unused part from your application, it is strongly recommended to use a tool like PurgeCSS that analyzes your code and generates an optimized primeflex file that only contains the utilities you've used.
- -The official PrimeFlex extension for VSCode provides code completion and snippets support for the classes. Search for "PrimeFlex" at VSCode marketplace to download and install the extension.
-PrimeFlex provides various spacing utilities to modify an element's layout.
-The spacing classes use the {property}{position}-{value} syntax whereas for responsive - values {breakpoint}:{property}{position}-{value} format is used.
- -Property can either be a margin or a padding.
-Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.
-Value field varies from 0 to 6 where default value of the $spacer is 1rem. The special auto value is available to margins only and used to center elements.
-Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values - can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.
-
-<div class="mb-2">Margin bottom with level 2</div>
-<div class="mt-4">Margin top with level 2</div>
-<div class="m-2">Margin for all sides with level 2</div>
-<div class="mx-auto">Auto margins for left and right side</div>
-<div class="pb-4">Padding bottom with level 4</div>
-<div class="p-1">Padding for all sides with level 1</div>
-<div class="m-1 p-1 lg:m-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>
-
-A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.
- -PrimeFlex 3.1.2.
-Manage the alignment and the styling of a text with PrimeFlex text utilities.
-The text classes use the text-{value} syntax.
- -Four options are available for alignment.
-
-<div class="text-left">Left</div>
-<div class="text-center">Center</div>
-<div class="text-right">Right</div>
-<div class="text-justify">Justify</div>
-
-Transform property changes the case of the text.
-
-<div class="text-lowercase">LOWERCASE</div>
-<div class="text-uppercase">uppercase</div>
-<div class="text-capitalize">capitalize</div>
-
-Text wrapping defines how the text would be displayed when it exceeds the size of its container.
-
-<div style="width: 10rem">Long text wraps and does not overlow.</div>
-<div class="white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-<div class="white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-
-Text styling applies to font weight and style and also uses font-{value} syntax.
-
-<div class="font-bold">Bold</div>
-<div class="font-norrmal">Normal</div>
-<div class="font-light">Light</div>
-<div class="font-italic">Italic</div>
-
-A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.
- -PrimeFlex 3.1.2.
-