diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx index 265f1d9fa7..f12996f885 100644 --- a/docs/xplat/src/content/en/components/grids/list.mdx +++ b/docs/xplat/src/content/en/components/grids/list.mdx @@ -20,19 +20,14 @@ The following example represents a list populated with contacts with a name and - - -
## Usage At its core the list web component allows you to easily display a vertical list of items. - - First, you need to install the {ProductName} by running the following command: ```cmd @@ -41,12 +36,8 @@ npm install {PackageWebComponents} - - - - First, you need to the install the corresponding {ProductName} npm package by running the following command: ```cmd @@ -60,10 +51,8 @@ import { IgrList, IgrListHeader, IgrListItem } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` - - Before using the , you need to register it as follows: @@ -76,21 +65,16 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); - - - You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor ``` - - ```ts @@ -132,13 +116,13 @@ Now, we can add the following code to get a simple list of items: Header -

Item 1

+ Item 1 -

Item 2

+ Item 2 -

Item 3

+ Item 3 ``` @@ -153,13 +137,13 @@ Now, we can add the following code to get a simple list of items: Header -

Item 1

+ Item 1 -

Item 2

+ Item 2 -

Item 3

+ Item 3 ``` @@ -170,9 +154,6 @@ If all went well, you should see the following in your browser: - - - Let's up our game a bit and enhance our list items. Say we want to create a list of contacts with a name and a phone number displayed under the name. To achieve that we can use some of the slots that come with the list items as demonstrated in the next example: @@ -183,15 +164,15 @@ Let's up our game a bit and enhance our list items. Say we want to create a list

Contacts

-

Terrance Orta

+ Terrance Orta 770-504-2217 -

Richard Mahoney

+ Richard Mahoney 423-676-2869 -

Donna Price

+ Donna Price 859-496-2817 @@ -207,15 +188,15 @@ Let's up our game a bit and enhance our list items. Say we want to create a list

Contacts

-

Terrance Orta

+ Terrance Orta 770-504-2217 -

Richard Mahoney

+ Richard Mahoney 423-676-2869 -

Donna Price

+ Donna Price 859-496-2817 @@ -231,15 +212,15 @@ Let's up our game a bit and enhance our list items. Say we want to create a list Contacts -

Terrance Orta

+ Terrance Orta 770-504-2217 -

Richard Mahoney

+ Richard Mahoney 423-676-2869 -

Donna Price

+ Donna Price 859-496-2817 @@ -251,9 +232,6 @@ After implementing the above code, our list component should now look like the f - - - ### Adding Avatar and Buttons We can use some of our other components in conjunction with the component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots. @@ -269,7 +247,7 @@ We can use some of our other components in conjunction with the AA -

Terrance Orta

+ Terrance Orta 770-504-2217 Text @@ -282,7 +260,7 @@ We can use some of our other components in conjunction with the AA -

Richard Mahoney

+ Richard Mahoney 423-676-2869 Text @@ -295,7 +273,7 @@ We can use some of our other components in conjunction with the AA -

Donna Price

+ Donna Price 859-496-2817 Text @@ -318,21 +296,21 @@ We can use some of our other components in conjunction with the -

Terrance Orta

+ Terrance Orta 770-504-2217 Text Call -

Richard Mahoney

+ Richard Mahoney 423-676-2869 Text Call -

Donna Price

+ Donna Price 859-496-2817 Text Call @@ -350,55 +328,37 @@ We can use some of our other components in conjunction with the - - -

Terrance Orta

+ + Terrance Orta 770-504-2217 -
- - Text - -
-
- - Call - -
+ + Text + + + Call + -
- -
-

Richard Mahoney

+ + Richard Mahoney 423-676-2869 -
- - Text - -
-
- - Call - -
+ + Text + + + Call + -
- -
-

Donna Price

+ + Donna Price 859-496-2817 -
- - Text - -
-
- - Call - -
+ + Text + + + Call + ``` @@ -482,13 +442,13 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```tsx - Small + Small - Medium + Medium - Large + Large @@ -507,6 +467,59 @@ The result of implementing the above code should look like the following: +### Recommended Elements for Slots + +When slotting content into the **title** and **subtitle** slots, we recommend using `` elements rather than heading elements (`

`–`

`). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component's intended typography and layout. Using a `` provides a neutral container that inherits the component's styles cleanly. + +To achieve the best results, we recommend using the [``](../layouts/avatar.md) component for the **start** slot, which is intended for media content. For the **end** slot, which is intended to be used for actions, we recommend using components such as [``](../inputs/button.md), [``](../inputs/switch.md), [``](../inputs/checkbox.md), etc., depending on the type of content you want to display. However, for those two slots, you can also use plain HTML elements, such as `` for the **start** slot and `