Jcb-list NPM | npm.io

Install

npm install jcb-list

Usage example

index.html

<!DOCTYPE html>
<head>
   <script type="module" src="./index.js"></script>
</head>
<body>
   <jcb-list id="id_list">
      <jcb-list-item value="paul" selected="true">
         <div slot="middle">Georges</div>
         <div slot="right">
            <jcb-button type="success">TEST</jcb-button>
         </div>
      </jcb-list-item>
      <jcb-list-item value="marie">
         <div slot="middle">Marie</div>
      </jcb-list-item>
      <jcb-list-item value="pascal" closable>
         <div slot="middle">
            <div class="title">Pascal</div>
            <div class="subtitle">Coordinateur</div>
            <div class="subsubtitle">Les bleuets</div>
         </div>
         <div slot="right">
            <jcb-button type="success">TEST</jcb-button>
         </div>
      </jcb-list-item>
   </jcb-list>
</body>

<script>
   import "@fontsource/roboto" // default to font-weight: 400; see: https://github.com/fontsource/fontsource
   import "@fontsource/roboto/300.css"
   import 'jcb-button'
   import 'jcb-icon'
   import { mdiPlus, mdiTrash, mdiLinkRemove } from '@mdi/js'

   document.getElementById('id_list').addEventListener('listitemselectionchange', (event) => {
      console.log('listitemselectionchange', event.target.value)
   })
</script>

<style>
   :root {
      --jcb-list-selected-color: white;
      --jcb-list-selected-background-color: green;
      font-family: "Roboto";
      font-weight: 100;
   }
   .title { style="color: #333333; }
   .subtitle { style="color: #555555; font-size: 0.8em; }
   .subsubtitle { style="color: #777777; font-size: 0.7em; }
</style>

npm i jcb-list
npm i @fontsource/roboto
npm i parcel -g
parcel index.html

API references

`jcb-list`

Properties

Name	Type	Default	Description
`multiple`	Boolean	false	Indicates that multiple items ca be selected
`read-only`	Boolean	false	Indicates that items are not selectable
`empty`	String	"Liste vide"	When not "", display text when list is empty

Slots

title subtitle subsubtitle right

Events

Name	Description	Value
`listitemselectionchange`	Emitted whenever selection changes	Selected item value (or index if item's value is undefined), or list of such values/indexes in multiple selection mode

CSS variables

Name	Description
`--jcb-list-color`	text color of items
`--jcb-list-background-color`	background color of items
`--jcb-list-hover-background-color`	background color of hovered items
`--jcb-list-border-color`	items border
`--jcb-list-selected-color`	text color of selected items
`--jcb-list-selected-background-color`	background color of selected items

`jcb-list-item`

Properties

Name	Type	Default	Description
`value`	String	undefined	Value returned in selection when item is selected
`selected`	Boolean	false	True when item is selected
`disabled`	Boolean	false	True when item is unselectable