A polyfill for Element Query.
min-width
, max-width
, min-height
, max-height
px
, em
update
is required.header[min-width~="500px"] {
color: red;
}
header[max-width~="500px"] nav {
clear: both;
}
header[min-width~="500px"] nav[min-height~="3em"] {
color: white;
}
import 'package:element_query/element_query.dart' as eq;
main() {
// Initialize Element Query.
// This method is safe to be called multiple times.
eq.init();
// Register a selector with two checkpoints for min-width.
eq.register('.main-pane', minWidths: ['600px', '1000px']);
// Register an element with one checkpoint for max-height.
eq.register(element, maxHeights: ['3em']);
document.querySelector('.left-pane')
..onClick.listen((e) {
e.target.classes.toggle('expanded');
})
..onTransitionEnd.listen((_) {
// Call `update` to trigger a refresh.
eq.update();
});
}
Please file feature requests and bugs at the issue tracker.
query-changed
is fired on a target element when its size passes a break point em
unitexample/example.dart
// Copyright (c) 2016, Man Hoang. All rights reserved. Use of this source code
// is governed by a BSD-style license that can be found in the LICENSE file.
import 'dart:html';
import 'package:element_query/element_query.dart' as eq;
main() {
// Initialize Element Query.
// This method is safe to be called multiple times.
eq.init();
// Register a selector with two checkpoints for min-width.
eq.register('.main-pane', minWidths: ['600px', '1000px']);
// Alternatively, we can register an element.
//eq.register(document.querySelector('.main-pane'),
// minWidths: ['500px', '1000px']);
document.querySelector('.left-pane')
..onClick.listen((e) {
(e.target as Element).classes.toggle('expanded');
})
..onTransitionEnd.listen((_) {
eq.update();
});
}
Add this to your package's pubspec.yaml file:
dependencies:
element_query: ^0.0.2
You can install packages from the command line:
with pub:
$ pub get
Alternatively, your editor might support pub get
.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:element_query/element_query.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
0.0.2 | May 31, 2018 |
|
|
0.0.1 | Sep 19, 2016 |
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
0
|
Health:
Code health derived from static analysis.
[more]
|
--
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
--
|
Overall:
Weighted score of the above.
[more]
|
0
|
The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.
Support Dart 2 in pubspec.yaml
.
The SDK constraint in pubspec.yaml
doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.
Make sure dartdoc
successfully runs on your package's source files. (-10 points)
Dependencies were not resolved.
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=1.0.0 <2.0.0 |