jcb-list
v1.3.8
Published
item list
Downloads
44
Readme
Install
npm install jcb-listUsage 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.htmlAPI 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 |