@forter/list
v2.3.0
Published
list from Forter Components
Downloads
22
Readme
fc-list
Simple list which is presented as key value table.
Usage
<script>
import '@forter/list';
</script>
<fc-list>
</fc-list>
Examples
<!-- spaceIn -->
<fc-list .array="${[['type','dog cat'],['name','joy neow']]}">
<b slot="header">Header</b>
<b slot="footer">Footer</b>
</fc-list>
<!-- complex -->
<fc-list>
<fc-list-item>
<fc-icon icon="ecommerce"></fc-icon>
<label> Ecommerce </label>
<section>Forter protects all of your online transactions from fraud </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="inr"></fc-icon>
<label> INR Solution </label>
<section>Forter automatically evaluates the risk of each transaction affected by the directive </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="loyalty"></fc-icon>
<label> Loyalty </label>
<section> protects your loyalty program accounts from unauthorized access or attempts to steal their points </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="returns"></fc-icon>
<label> Returns </label>
<section>Identify and block consumers who abuse your business’ refund policies. </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="promotions"></fc-icon>
<label> Promotions </label>
<section> Prevent financial losses due to users who take advantage of your promotions and coupons.. </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="gateway"></fc-icon>
<label> Gateway </label>
<section> determine whether credit card applicants are legitimate to safeguard your customer relationships </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="developer"></fc-icon>
<label>Developer</label>
<section> Integration tools to help faster and smoother integration to Forter.</section>
</fc-list-item>
</fc-list>
Properties
| Property | Attribute | Type | Default | Description |
|-----------|-----------|----------|-----------|--------------------------------------------------|
| array
| array
| any[]
| | List of arrays to display. example: [["type","dog"],["name","joy"],["food","bone"],["age",2]]
|
| columns
| columns
| number
| 2 | Number of columns when using fc-list-item
slot. example: 3
|
| empty
| empty
| string
| "No Data" | Text when there is no items. example: Oops! No Data
|
| list
| | any
| | |
| object
| object
| any
| | Object to display. example: {"type": "dog", "name": "joy", "food": "bone", "age": 2}
|
| title
| title
| string
| | Title above the list. example: My Cool Dog Properties
|
Events
| Event | Description |
|---------|-----------------------|
| count
| the number of records |
Slots
| Name | Description |
|----------|--------------------------------------------------|
| | both header and footer. Both: <b slot="header">Header</b><b slot="footer">Footer</b>
|
| footer
| title at bottom of the list. example: <b slot="footer">My Cool Dog Properties</b>
|
| header
| title at top of the list. example: <b slot="header">My Cool Dog Properties</b>
|
CSS Custom Properties
| Property | Description |
|---------------------------|--------------------------------------------------|
| --fc-list-border-color
| items border color. default: --fc-gray-500
, example: gold
|
| --fc-list-border-radius
| border radius. default: 4px
, example: 15px
|
| --fc-list-font-size
| list's font size. default: 15px
, example: 20px
|
| --fc-list-padding
| list's inner padding. default: 15px
, example: 10px
|