Skip to content

Instantly share code, notes, and snippets.

@Vallabharayudu

Vallabharayudu/app.html

Last active November 14, 2016 07:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Vallabharayudu/9cec7412154364cac318123a35fa1e47 to your computer and use it in GitHub Desktop.
Save Vallabharayudu/9cec7412154364cac318123a35fa1e47 to your computer and use it in GitHub Desktop.
Download ZIP
Radio button Sample
Raw
app.html
<template>
<require from="styles.css"></require>
<div class="radioBtnSection" repeat.for = "option of options">
<input type = "radio" name = "myOptions"
model.bind = "option" class="css-radio" id="radio${$index}" checked.bind = "$parent.selectedOption"/>
<label for="radio${$index}" class="css-label-Radio">${option.text}</label>
</div>
<div>
${content}
</div>
</form>
</template>
Raw
app.js
export class App {
options = [];
selectedOption = {};
content = '';
Changes;
constructor() {
this.options = [
{id:1, text:'First'},
{id:2, text:'Second'},
{id:3, text:'Third'}
];
this.selectedOption = this.options[0];
//this.content = this.selectedOption.text;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
styles.css
input[type=radio].css-radio {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=radio].css-radio + label.css-label-Radio {
padding-left: 26px;
height: 18px;
display: inline-block;
line-height: 20px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
font-weight: normal;
margin-bottom: 15px;
}
input[type=radio].css-radio:disabled + label.css-label-Radio {
cursor: default;
}
input[type=radio].css-radio:checked + label.css-label-Radio {
background-position: 0 -18px;
}
label.css-label-Radio {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAkCAYAAACE7WrnAAAC6UlEQVRIidWU70sTcRzHX16hpjlTzNW5KC0KxF0/yFgRKD2IMOPOR4ERgSL0H0R/hs8k0QqqJz75jih6Uo+kuY60buKDiLugcZsrrZnaHOp6sNucztkaBPWGe/Lh3q/73t33+ypLkR+/EFeAG4APOOaMPwITwGNV015s7ZTlgvxCHAceNjY2+jweD/X19VRXVwOwtLTE/Pw84XCYWCw2AdxSNe1DHsgvxCXA7/V697a0tGyzzo2YpkkoFFoEVFXTXmVBfiFagUB7e7tLluUdIZnYto2u6wvAeVXTZiRnPqIoStEQAFmWURTFBYwAlAkhutxu9zOfz1c0JDfBYJBoNKpKwA2Px1MSBKCpqQngugR0NjQ0lAxyup0SIFdWVpYMcrqyBCTX19dLBjndpAREV1ZWSgY53agEjM/NzZUMcrrjEjBm23bJIKc7RgoQQgRM00z9aUzTTAkhAikgs7P7DcNY+JOV2baNYRgLQD8ZkKppM0CPruuLlmX9FmJZFrquLwI9TjdPI63AfbfbfS6jkaqqKgCWl5ezGpmdnX0D9KuaNp3plhUQWxdpsV0AjjjjT8Br0mJ7vrUjbR04WXeu1ZzZas48L/+RIcc//2R0Kk4olgTA21hO3+laLh7aA+QbcrfzkKwhf66mGHga5cn0j02reBtJ8OD9Ar1tNQxfO5A1pGEYI8D5XafThrzj9XoBuPvyK/cm4wVfKxRLklhNcfloNXV1dcTjcc/b7u6pTYYMhBMMBr/t+H0ABoPfCIQTQAFDjr6Ls7bdxtqStRQMT34HChgyNFu8l2a+pH/C3zVk6/7yogEnGtL3bmvIWydriwb1nUrfu60hOw7v4abi+i3kpuKi4/DGxgTGJFXTRCQSmch4aOiqm962moKQ3rYahq66gbSXIpHIhKppIrOz+w3DCFRUVLhkWeZRz0Fun93H8GQ8+3da95czcGbzEck1ZN6hVRRlb3Nz846vZlkWhmHkH9pM/glD/gKt+8QlGWhRMAAAAABJRU5ErkJggg==);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment