# j-RadioButtonExpert

> Ιδανικό συστατικό για radiobutton με προσαρμοσμένα στυλ. είναι λίγο προηγμένο αλλά αξίζει τον κόπο!

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 6412878d2e851dd0e5eec12c48e29f63387b4189933eddbd8a6682417edde682
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ιδανικό συστατικό για radiobutton με προσαρμοσμένα στυλ. είναι λίγο προηγμένο αλλά αξίζει τον κόπο!


__ΕΠΙΤΡΟΦΗ__

- Το `label {String}` μπορεί να αλλάξει την ετικέτα
- Το `required {Boolean}` επιτρέπει το `required` (προεπιλεγμένο: `false`)
- Το `disabled {Boolean}` απενεργοποιεί αυτόν τον έλεγχο (προεπιλεγμένο: `false`)
- Το `type {String}` μπορεί να περιέχει το `number` (προεπιλεγμένο: `string`)
- Το `class {String}` εισάγει μια τάξη σε ένα στοιχείο με την τάξη `.ui-radiobuttonexpert-container`
- Ο δρόμος `datasource {String}` προς την πηγή δεδομένων (πρέπει να είναι σειρά ή σειρά αντικειμένων) ή __NEW__: `id|name,id|name`
- Το `value {String}` καθορίζει ένα όνομα ιδιοκτησίας για αξία (σε πηγή δεδομένων) (προεπιλογή: `id`)
- Το `disabledkey {String}` καθορίζει το όνομα της ιδιοκτησίας για το αντικείμενο που έχει διακοπεί (σε πηγή δεδομένων) (προεπιλογή: `disabled`)
- ΝΕΟ `selector {String}` ένα jQuery selector για προσαρμοσμένο πρότυπο (εκτός του συνόλου). `custom template` Σε [Δεδομένα δεσμεύσεις](https://wiki.totaljs.com/jcomponent/08-data-binding/)

__Καλό να ξέρεις__

- Πρέπει να γράψετε * όλα τα στυλ *
- Ετικέτες `{ name: 'My item', id: 1, disabled: false, classname: 'color-highlighted' }`
- Μπορείτε να χρησιμοποιήσετε το `$index` και το `$path` σε πρότυπο

__Βασικά στυλ__

```css
.my-button { display: inline-block; padding: 20px; margin-right: 10px; border: 1px solid gray; cursor: pointer; border-radius: 2px; }
.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 { 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; }
```

Χρησιμοποιήστε το με `<ui-component name="radiobuttonexpert">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Denis Granec. Πηγή: The Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html example.html
<style>
	.my-button { display: inline-block; padding: 10px 20px; margin-right: 10px; border: 1px solid gray; cursor: pointer; border-radius: 2px; }
	.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 { 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: #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; }

	.star-rating > div { display: inline-block; width: 30px; height: 30px; line-height: 29px; text-align: center; margin-right: 5px; border: 1px solid gray; cursor: pointer; border-radius: 50px; font-weight: bold; }
	.star-rating > div:hover { border-color: #bada55; }
	.star-rating > div.selected { color: white; background: #bada55; border-color: rgba(0, 0, 0, 0.2); }
	.star-rating > div.purple:hover { border-color: purple; }
	.star-rating .purple.selected { background-color: purple; }
	.star-rating > div[data-disabled="1"] { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; }
</style>

<ui-component name="radiobuttonexpert" path="model.framework" config="datasource:list;disabled:1;required:true;label:Your favorite language;type:number" default="2">
	<script type="text/html">
		<div class="my-button">
			<div>{{ name }}</div>
		</div>
	</script>
</ui-component>
<hr />
<ui-component name="radiobuttonexpert" path="model.framework" config="selector:#mybutton;datasource:list;required:true;label:Your favorite language;type:number" default="2">
	<script type="text/html" id="mybutton">
		<div class="my-button">
			<div>{{ name }}</div>
			<ui-bind path="timer" config="text" class="center block" style="font-size:11px"></ui-bind>
		</div>
	</script>
</ui-component>
<hr />
<ui-component name="radiobuttonexpert" path="model.rating" config="datasource:rating;class:star-rating;label:Please, rate us">
	<script type="text/html">
		<div class="button{{ if classname }} {{ classname }}{{ fi }}">
			<div>{{ name }}</div>
		</div>
	</script>
</ui-component>

<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 }];
	var rating = [{ name: '1', id: 1, disabled: 1 }, { name: '2', id: 2 }, { name: '3', id: 3 }, { name: '4', id: 4 }, { name: '5', id: 5, classname: 'purple' }];
	setInterval(function() {
		var path = 'timer';
		SET(path, (GET(path) || 0) + 1);
	}, 1000);
</script>
```