Permalink
Browse files

doc: Improved Radio-Sample with RadioGroup

  • Loading branch information...
MikeMitterer committed Jul 14, 2015
1 parent cba2f68 commit a92941a60b2bc4b159d5212f92b0886109d3dcc1
@@ -2,29 +2,34 @@
samplename: radio
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/mdl_radio/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
<p>A radio button can either be a primary action or a secondary action.</p>
<section class="demo-preview-block">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
<span class="mdl-radio__label">Always</span>
</label>
<section class="demo-preview-block">
<div id="wifi" class="mdl-radio-group">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked/>
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2"/>
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3"/>
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
<span class="mdl-radio__label">Unavailable option</span>
</label>
</section>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled/>
<span class="mdl-radio__label">Unavailable option</span>
</label>
</label>
</div>
<button id="show-wifi-value" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Show value</button>
</section>
</div>
@@ -49,26 +49,30 @@
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<section class="demo-section demo-section--radio">
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
<section class="demo-preview-block">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
<span class="mdl-radio__label">Unavailable option</span>
</label>
</section>
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
<section class="demo-preview-block">
<div id="wifi" class="mdl-radio-group">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked/>
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2"/>
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3"/>
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled/>
<span class="mdl-radio__label">Unavailable option</span>
</label>
</label>
</div>
<button id="show-wifi-value" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Show value</button>
</section>
</div>
</section>
</div>
@@ -5,13 +5,21 @@ import 'package:console_log_handler/console_log_handler.dart';
import 'package:mdl/mdl.dart';
main() {
main() async {
final Logger _logger = new Logger('mdl_radio.main');
configLogging();
registerMdl();
componentFactory().run().then((_) {
MaterialRadio.widget(dom.querySelector("#wifi2")).disable();
await componentFactory().run();
MaterialRadio.widget(dom.querySelector("#wifi2")).disable();
MaterialButton.widget(dom.querySelector("#show-wifi-value")).onClick.listen((_) {
final MaterialRadioGroup group = MaterialRadioGroup.widget(dom.querySelector("#wifi"));
final MaterialAlertDialog alertDialog = new MaterialAlertDialog();
alertDialog("Value is: ${group.value}").show();
});
}
@@ -283,8 +283,6 @@ class MaterialRadioGroup extends MdlComponent {
static const _MaterialRadioCssClasses _cssClasses = const _MaterialRadioCssClasses();
//factory MaterialRadioGroup(final dom.HtmlElement element) => mdlComponent(element) as MaterialRadioGroup;
MaterialRadioGroup.fromElement(final dom.HtmlElement element,final di.Injector injector)
: super(element,injector) {
_init();

0 comments on commit a92941a

Please sign in to comment.