mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
---
|
|
title: List With Icons
|
|
hide_title: true
|
|
---
|
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
|
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
|
|
|
|
# List With Icons
|
|
|
|
This is a very simple list component that you can use as starting point for building your own custom lists.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
## Basic usage
|
|
|
|
You specify the items of the list by editing the **Items** array in the **List With Icons** component. Below is the default value.
|
|
|
|
```javascript
|
|
[
|
|
{
|
|
// Icons are references to material icons,
|
|
// see https://fonts.google.com/icons?selected=Material+Icons
|
|
Icon:"account_circle",
|
|
Label:"List Item 1"
|
|
},
|
|
{
|
|
Icon:"account_circle",
|
|
Label:"List Item 2"
|
|
},
|
|
{
|
|
Icon:"account_circle",
|
|
Label:"List Item 3"
|
|
}
|
|
]
|
|
```
|
|
|
|
- **Icon** This is an icon identifier, you can find a list of all supported icons [here](https://fonts.google.com/icons?selected=Material+Icons).
|
|
- **Label** The label that should be shown for the list item.
|
|
|
|
## Item Clicked
|
|
|
|
The list has an output signal called **Item Clicked** when an item is clicked, and the output **Item Id** will contain the id of the object corresponding to that item.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The function node in the above example contains the following code:
|
|
|
|
```javascript
|
|
const clickedListItem = Noodl.Objects[Inputs.ItemId]
|
|
|
|
console.log("This item was clicked: " + clickedListItem.Label)
|
|
```
|
|
|
|
## Customizing
|
|
|
|
Like most UI Components in the library this is a great staring point for building your own lists. The best way is to look at the **Item** sub component of the **List With Icons** component. Here you can see how the **Label** and **Icon** are connected from the **Repeater Object**.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
It's a starting point to build your own custom list items.
|
|
|
|
|
|
|