@forter/list

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