# j-Features

> j-Features : uniquement pour les ordinateurs de bureau ; singleton

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 1ea54a73f9701ba889f640802ffeb12e2031a31efd7218c700bd3afa862c89f1
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- uniquement pour les ordinateurs de bureau
- singleton
- fonctionne avec le système Bootstrap Grid

### Méthodes

Méthode : `component.open(opt)`

- `opt.placeholder {String}` un espace réservé pour la saisie de la recherche (par défaut : `config.placeholder`)
- `opt.items {Object Array}` avec liste de fonctionnalités (obligatoire) :
    - `name {String}` un nom de fonctionnalité
    - Icône `icon {String}` (facultatif) sans `fa-`
    - `keywords {String}` (facultatif) mots-clés supplémentaires pour la recherche
    - `value {Object/String/Number}` une valeur
- `opt.scrolltop {Boolean}` défile vers le haut jusqu'à afficher la fenêtre (par défaut : `false`)
- `opt.callback(selected) {Function}` un rappel qui est appelé lorsque l'utilisateur effectue un clic pour une fonctionnalité. L'argument `selected` contient l'élément sélectionné.

Méthode : `component.hide()`

__Configuration__ :

- `placeholder {String}` un espace réservé pour la saisie de la recherche
- `height {Number}` hauteur de l'élément de liste (facultatif, `35` par défaut)

Utilisez-le avec `<ui-component name="features">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

```html example.html
<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="features" config="placeholder:Search ..."></ui-component>

<div class="container">
	<a href="javascript:features()">Show features</a>
</div>

<script>
	function features() {
		var opt = {};
		opt.items = [{ name: 'Dashboard' }, { name: 'Invoices' }, { name: 'Orders' }, { name: 'Products' }, { name: 'Pages' }, { name: 'Notes' }, { name: 'Users', icon: 'user' }, { name: 'Settings' }];
		opt.callback = function(selected) {
			console.log('CLICK', selected);
		};
		SETTER('features/show', opt);
	}
	setTimeout(features, 500);
</script>
```