javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

started radio buttons

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 15:16:21 -05:00
parent d6b682ce39
commit f875c4b79a
3 changed files with 93 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
scss/ionic/_form.scss
View File

@ -182,7 +182,6 @@ input[type="color"],
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
@ -237,11 +236,28 @@ textarea {
}
// Search
// Radio Buttons
// -------------------------------
input[type="search"] {
border-radius: 4px;
/* hide a radio button's icon by default */
.radio-item {
[class^="icon-"],
[class*=" icon-"] {
display: none;
}
}
.input-wrapper input[type="radio"] {
/* hide any radio button inputs (the ugly circles) */
display: none;
/* when this radio-item is checked */
&:checked + .radio-item {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
}
}
}

1
test/index.html
View File

@ -29,6 +29,7 @@
<p><a class="button button-block button-default" href="input-textarea.html">Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-with-icons.html">Inputs With Icons</a></p>
<p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
<p><a class="button button-block button-default" href="input-radio.html">Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="lists.html">Lists</a></p>
<p><a class="button button-block button-default" href="modals.html">Modals</a></p>
<p><a class="button button-block button-default" href="panels.html">Panels</a></p>

72
test/input-radio.html Normal file
View File

@ -0,0 +1,72 @@
<html>
<head>
<meta charset="utf-8">
<title>Radio Inputs</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicons.css" rel="stylesheet">
<link href="../dist/ionic.css" rel="stylesheet">
</head>
<body>
<section class="view">
<header class="bar bar-header bar-dark">
<h1 class="title">Radio Buttons</h1>
</header>
<header class="bar bar-footer bar-dark">
<h1 class="title">Footer</h1>
</header>
<div class="content has-header has-footer">
<div class="input-group">
<label class="input-wrapper">
<input type="radio" name="serverside" value="go" checked="checked">
<div class="radio-item">
Go
<i class="icon-ok"></i>
</div>
</label>
<label class="input-wrapper">
<input type="radio" name="serverside" value="python">
<div class="radio-item">
Python
<i class="icon-ok"></i>
</div>
</label>
<label class="input-wrapper">
<input type="radio" name="serverside" value=".net">
<div class="radio-item">
.Net
<i class="icon-ok"></i>
</div>
</label>
<label class="input-wrapper">
<input type="radio" name="serverside" value="ruby">
<div class="radio-item">
Ruby
<i class="icon-ok"></i>
</div>
</label>
<label class="input-wrapper">
<input type="radio" name="serverside" value="java">
<div class="radio-item">
Java
<i class="icon-ok"></i>
</div>
</label>
</div>
<div class="padded">
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</div>
</section>
</body>
</html>