65 lines
2.1 KiB
Markdown
65 lines
2.1 KiB
Markdown
---
|
|
layout: doc
|
|
title: deliteful/channelBreakpoints
|
|
---
|
|
|
|
# deliteful/channelBreakpoints
|
|
|
|
This module returns an object containing properties that define values for breakpoints
|
|
of CSS media queries based on screen size:
|
|
|
|
* `smallScreen`: defines the screen size limit between phone-like and tablet-like
|
|
channels.
|
|
* `mediumScreen`: defines the screen size limit between tablet-like and desktop-like
|
|
channels.
|
|
|
|
The values of the breakpoints are used by CSS media queries of `deliteful/features` for
|
|
setting the `has()`-flags `"phone-like-channel"`, `"tablet-like-channel"`,
|
|
and `"desktop-like-channel"`. For more information, see the [`deliteful/features`](./features.md)
|
|
documentation.
|
|
|
|
|
|
## Using deliteful/channelBreakpoints
|
|
|
|
Multichannel widgets (such as [`deliteful/Combobox`](./Combobox.md)) typically do
|
|
not use `channelBreakpoints` directly. Instead, they rely on the channel `has()` flags
|
|
set by [`deliteful/features`](./features.md). These flags are set by `deliteful/features`
|
|
using CSS media queries based on screen size and using the breakpoint values provided by
|
|
`deliteful/channelBreakpoints`.
|
|
|
|
Responsive widgets [`deliteful/ResponsiveColumns`](./ResponsiveColumns.md)) typically
|
|
use their own CSS media queries and share the default breakpoint values with the
|
|
multichannel widgets by getting them from `deliteful/channelBreakpoints`, for instance:
|
|
|
|
```js
|
|
require(["deliteful/channelBreakpoints", ...],
|
|
function (channelBreakpoints, ...) {
|
|
var smallScreenBreakpoint = channelBreakpoints.smallScreen;
|
|
var mediumScreenBreakpoint = channelBreakpoints.mediumScreen;
|
|
// Use these values as default breakpoint values for creating media queries
|
|
...
|
|
});
|
|
```
|
|
|
|
## Configuring deliteful/channelBreakpoints
|
|
|
|
The default values of the breakpoints can be configured statically in a hashmap provided through
|
|
[requirejs module configuration](http://requirejs.org/docs/api.html#config-moduleconfig), for
|
|
instance:
|
|
|
|
```html
|
|
<script>
|
|
// configuring RequireJS
|
|
require.config({
|
|
...
|
|
config: {
|
|
"deliteful/channelBreakpoints": {
|
|
smallScreen: "200px",
|
|
mediumScreen: "500px"
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
```
|
|
|