|
| 1 | +<!-- omit in toc --> |
1 | 2 | ember-element-query |
2 | 3 | ============================================================================== |
3 | 4 |
|
4 | | -This Ember addon lets you apply styles to elements conditionally based on their own width, instead of using media queries based on window width. |
| 5 | +* Use element queries effortlessly on any element or component. |
| 6 | +* Use it in the form of the `{{element-query}}` modifier or the `<ElementQuery as |EQ|>` component. |
| 7 | +* Apply styles that respond based on element's own width rather than viewport width. |
| 8 | +* Do CSS transforations and template transformations. |
| 9 | + |
| 10 | +Element queries are [a technique](https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-queries-and-how-you-can-use-them-today/) to do responsive transformations based on element's own size rather than viewport size. |
5 | 11 |
|
6 | 12 | It lets you implement reusable responsive components — with encapsulated styles, decoupled from their parent context. Such components will realign their content depending on how much space is available to them. |
7 | 13 |
|
8 | 14 | For example, if you put a responsive component into a tight sidebar, it will align its content vertically. When the sidebar expands, the component will realign horizontally in order to efficiently use available space. |
9 | 15 |
|
10 | | -- [ember-element-query](#ember-element-query) |
11 | | - - [Roadmap](#roadmap) |
12 | | - - [Rationale](#rationale) |
13 | | - - [Concept of sizes](#concept-of-sizes) |
14 | | - - [How ember-element-query works](#how-ember-element-query-works) |
15 | | - - [Using attributes in CSS](#using-attributes-in-css) |
16 | | - - [Edge cases](#edge-cases) |
17 | | - - [⚠ Use in compound selectors only!](#-use-in-compound-selectors-only) |
18 | | - - [Installation](#installation) |
19 | | - - [Usage](#usage) |
20 | | - - [As a modifier](#as-a-modifier) |
21 | | - - [As a component](#as-a-component) |
22 | | - - [Advanced usage](#advanced-usage) |
23 | | - - [onResize callback](#onresize-callback) |
24 | | - - [Custom sizes](#custom-sizes) |
25 | | - - [Using height instead of width](#using-height-instead-of-width) |
26 | | - - [Using both width and height](#using-both-width-and-height) |
27 | | - - [Customizing attribute prefix](#customizing-attribute-prefix) |
28 | | - - [Using multiple modifiers on the same element](#using-multiple-modifiers-on-the-same-element) |
29 | | - - [Disabling](#disabling) |
30 | | - - [FastBoot fallback](#fastboot-fallback) |
31 | | - - [Browser support](#browser-support) |
32 | | - - [Alternatives](#alternatives) |
33 | | - - [Comparison](#comparison) |
34 | | - - [Defining custom rules rules, using template and CSS transformations](#defining-custom-rules-rules-using-template-and-css-transformations) |
35 | | - - [Using default rule definitions](#using-default-rule-definitions) |
36 | | - - [Customizing element tag while doing template transformations](#customizing-element-tag-while-doing-template-transformations) |
37 | | - - [Customizing element tag while doing pure CSS transformations](#customizing-element-tag-while-doing-pure-css-transformations) |
38 | | - - [Using directly on images and other void elements](#using-directly-on-images-and-other-void-elements) |
39 | | - - [Using both width and height in a rule for template transformation](#using-both-width-and-height-in-a-rule-for-template-transformation) |
40 | | - - [Contributing](#contributing) |
41 | | - - [Tools](#tools) |
42 | | - - [Installation](#installation-1) |
43 | | - - [Linting](#linting) |
44 | | - - [Running tests](#running-tests) |
45 | | - - [Running the dummy application](#running-the-dummy-application) |
46 | | - - [License](#license) |
47 | | - - [Credit](#credit) |
| 16 | +Here's a biased comparison table with competing addons: |
| 17 | + |
| 18 | +| | ember-element-query | [ember-fill-up](https://github.com/chadian/ember-fill-up/) | [ember-container-query](https://github.com/ijlee2/ember-container-query/) | |
| 19 | +| -------------------------------------------------- | :-----------------: | :--------------------------------------------------------: | :-----------------------------------------------------------------------: | |
| 20 | +| Octane | ✔ | 🚫 | ✔ | |
| 21 | +| [ResizeObserver](https://web.dev/resize-observer/) | ✔ | ✔ | 🚫 | |
| 22 | +| Offers a modifier | ✔ | 🚫 | 🚫 | |
| 23 | +| Offers a component | ✔ | ✔ | ✔ | |
| 24 | +| API convenience | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | |
| 25 | +| CSS transformations | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | |
| 26 | +| Template transformations | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | |
| 27 | + |
| 28 | +See [detailed comparison](#comparison) with code samples. |
| 29 | + |
| 30 | +*** |
| 31 | + |
| 32 | +- [Roadmap](#roadmap) |
| 33 | +- [Rationale](#rationale) |
| 34 | +- [Concept of sizes](#concept-of-sizes) |
| 35 | +- [How ember-element-query works](#how-ember-element-query-works) |
| 36 | + - [Using attributes in CSS](#using-attributes-in-css) |
| 37 | + - [Edge cases](#edge-cases) |
| 38 | + - [⚠ Use in compound selectors only!](#-use-in-compound-selectors-only) |
| 39 | +- [Installation](#installation) |
| 40 | +- [Usage](#usage) |
| 41 | + - [As a modifier](#as-a-modifier) |
| 42 | + - [As a component](#as-a-component) |
| 43 | +- [Advanced usage](#advanced-usage) |
| 44 | + - [onResize callback](#onresize-callback) |
| 45 | + - [Custom sizes](#custom-sizes) |
| 46 | + - [Using height instead of width](#using-height-instead-of-width) |
| 47 | + - [Using both width and height](#using-both-width-and-height) |
| 48 | + - [Customizing attribute prefix](#customizing-attribute-prefix) |
| 49 | + - [Using multiple modifiers on the same element](#using-multiple-modifiers-on-the-same-element) |
| 50 | + - [Disabling](#disabling) |
| 51 | + - [FastBoot fallback](#fastboot-fallback) |
| 52 | +- [Browser support](#browser-support) |
| 53 | +- [Alternatives](#alternatives) |
| 54 | + - [Comparison](#comparison) |
| 55 | + - [Defining custom rules rules, using template and CSS transformations](#defining-custom-rules-rules-using-template-and-css-transformations) |
| 56 | + - [Using default rule definitions](#using-default-rule-definitions) |
| 57 | + - [Customizing element tag while doing template transformations](#customizing-element-tag-while-doing-template-transformations) |
| 58 | + - [Customizing element tag while doing pure CSS transformations](#customizing-element-tag-while-doing-pure-css-transformations) |
| 59 | + - [Using directly on images and other void elements](#using-directly-on-images-and-other-void-elements) |
| 60 | + - [Using both width and height in a rule for template transformation](#using-both-width-and-height-in-a-rule-for-template-transformation) |
| 61 | +- [Contributing](#contributing) |
| 62 | + - [Tools](#tools) |
| 63 | + - [Installation](#installation-1) |
| 64 | + - [Linting](#linting) |
| 65 | + - [Running tests](#running-tests) |
| 66 | + - [Running the dummy application](#running-the-dummy-application) |
| 67 | +- [License](#license) |
| 68 | +- [Credit](#credit) |
48 | 69 |
|
49 | 70 |
|
50 | 71 |
|
|
0 commit comments