# j-CheckboxListExpert

> Tökéletes összetevő a checkboxlist-hez egyedi stílusokkal. kissé fejlett, de abszolút érdemes!

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 6bb6c5e8075fe08f3c4e682fbd3da28717166ed01f14ef82061f06921c2bb0d6
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Tökéletes összetevő a checkboxlist-hez egyedi stílusokkal. kissé fejlett, de abszolút érdemes!


__konfiguráció__

- A `label {String}` megváltoztathatja a címkét
- `required {Boolean}` lehetővé teszi a `required` (default: `false`)
- A `disabled {Boolean}` megakadályozza ezt a vezérlővel (default: `false`)
- A `type {String}` tartalmazhat `number` (default: `string`)
- A `class {String}` egy osztályba helyezi a `.ui-checkboxlistexpert-container` osztályú elemet
- `datasource {String}` út az adatforráshoz (az objektumok sorozata vagy sorozása) vagy __NEW__: `id|name,id|name`
- A `value {String}` meghatározza az értéket (adatforrásban) a tulajdonság nevét (például: `id`)
- A `disabledkey {String}` meghatározza a fogyatékkal élő elem tulajdonnevét (adatforrásban) (például: `disabled`)
- Új `selector {String}` egy jQuery kiválasztó a személyre szabott sablon (a komponens kívül). `custom template` A [adatköteles](https://wiki.totaljs.com/jcomponent/08-data-binding/)

__Jó tudni__

- Írja meg az összes stílust*
- Példaként a `{ name: 'My item', id: 1, disabled: false, classname: 'color-highlighted' }`
- Használhatja a `$index` és a `$path` szabványt

__Alapvető stílusok__

```css
.my-button { display: inline-block; padding: 20px 40px; margin-right: 10px; border: 1px solid gray; cursor: pointer; border-radius: 2px; position: relative; user-select: none; }
.my-button .checkbox { position: absolute; top: 10px; left: 10px; }
.my-button.selected .checkbox i:before { content: "\f14a"; font-weight: 900; }
.my-button:hover { border-color: #4285F4; }
.my-button.selected { color: white; background: #4285F4; border-color: rgba(0, 0, 0, 0.2); }
.my-button[data-disabled="1"] { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; cursor: not-allowed; }
.ui-disabled .my-button .checkbox { color: #c3c3c3; }
.ui-disabled .my-button { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; cursor: not-allowed; }
.ui-disabled .my-button:hover { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; }
.ui-disabled .my-button.selected { border-color: gray; background: #efefef; color: #5a5a5a; }

/* Dark mode */
.ui-dark .my-button { border-color: 1px solid #404040; color: #adadad; }
.ui-dark .my-button.selected { color: white; }
.ui-dark .my-button[data-disabled="1"] { background-color: #525252; color: gray; border-color: #525252; }
.ui-dark .ui-disabled .my-button { background-color: #525252; color: gray; border-color: #525252; }
.ui-dark .ui-disabled .my-button:hover { background-color: #525252; color: gray; border-color: #525252; }
.ui-dark .ui-disabled .my-button.selected { border-color: rgba(0, 0, 0, 0.2); background: #969696; color: #ffffff; }

/* Large mode */
.ui-large .my-button { font-size: 16px; }
```

Használja a `<ui-component name="checkboxlistexpert">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator CDN default). szerző: Denis Granec. forrás: a Componentator Az összetevők raktár, MIT licenc.

```html example.html
<style>
	.my-button { display: inline-block; padding: 20px 40px; margin-right: 10px; margin-bottom: 10px; border: 1px solid gray; cursor: pointer; border-radius: 2px; position: relative; user-select: none; }
	.my-button .checkbox { position: absolute; top: 10px; left: 10px; }
	.my-button.selected .checkbox i:before { content: "\f14a"; font-weight: 900; }
	.my-button:hover { border-color: #4285F4; }
	.my-button.selected { color: white; background: #4285F4; border-color: rgba(0, 0, 0, 0.2); }
	.my-button[data-disabled="1"] { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; cursor: not-allowed; }
	.ui-disabled .my-button .checkbox { color: #c3c3c3; }
	.ui-disabled .my-button { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; cursor: not-allowed; }
	.ui-disabled .my-button:hover { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; }
	.ui-disabled .my-button.selected { border-color: gray; background: #efefef; color: #5a5a5a; }

	.ui-dark .my-button { border-color: 1px solid #404040; color: #adadad; }
	.ui-dark .my-button.selected { color: white; }
	.ui-dark .my-button[data-disabled="1"] { background-color: #525252; color: gray; border-color: #525252; }
	.ui-dark .ui-disabled .my-button { background-color: #525252; color: gray; border-color: #525252; }
	.ui-dark .ui-disabled .my-button:hover { background-color: #525252; color: gray; border-color: #525252; }
	.ui-dark .ui-disabled .my-button.selected { border-color: rgba(0, 0, 0, 0.2); background: #969696; color: #ffffff; }
	.ui-large .my-button { font-size: 16px; }
</style>

<ui-component name="checkboxlistexpert" path="model.framework" config="datasource:list;disabled:1;required:true;label:Your favorite frameworks;type:number" default="2">
	<script type="text/html">
		<div class="my-button">
			<div>{{ name }}</div>
		</div>
	</script>
</ui-component>
<hr>
<ui-component name="checkboxlistexpert" path="model.framework2" config="selector:#mybutton;datasource:list;required:true;label:Your favorite frameworks;type:number" default="0"></ui-component>
<script type="text/html" id="mybutton">
	<div class="my-button">
		<div class="checkbox"><i class="ti ti-square"></i></div>
		<div>{{ name }}</div>
	</div>
</script>

<script>
	var list = [{ name: 'Total.js', id: 1 }, { name: 'express', id: 2 }, { name: 'Hapi', id: 3, disabled: false }, { name: 'Koa', id: 4, disabled: true }, { name: 'Sails', id: 5 }, { name: 'Meteor', id: 6 }, { name: 'Adonis', id: 7 }, { name: 'Nest', id: 8 }];
</script>
```