javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): css media query support (#10530)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2024-07-01 19:28:59 +03:00
committed by GitHub
parent 6dd441d6ba
commit 9fd361c2e6
32 changed files with 1812 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/ui/src/main-page.ts
View File

@@ -38,6 +38,7 @@ export function pageLoaded(args: EventData) {
examples.set('repeater', 'repeater/main-page');
examples.set('date-picker', 'date-picker/date-picker-page');
examples.set('nested-frames', 'nested-frames/main-page');
examples.set('media-queries', 'media-queries/main-page');
examples.set('screen-qualifiers', 'screen-qualifiers/main-page');
page.bindingContext = new MainPageViewModel(wrapLayout, examples);

19
apps/ui/src/media-queries/main-page.css Normal file
View File

@@ -0,0 +1,19 @@
.orientation-btn {
background-color: yellow;
}
@media (orientation: landscape) {
.orientation-btn {
background-color: pink;
}
}
.theme-mode-btn {
background-color: yellow;
}
@media (prefers-color-scheme: dark) {
.theme-mode-btn {
background-color: pink;
}
}

34
apps/ui/src/media-queries/main-page.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Button } from '@nativescript/core';
import { EventData } from '@nativescript/core/data/observable';
import { Observable } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
export function onNavigatedTo(args: EventData) {
const page = <Page>args.object;
const orientationButton: Button = page.getViewById('orientation-match-media-btn');
if (orientationButton) {
const mq = matchMedia('(orientation: portrait)');
let mode = mq.matches ? 'portrait' : 'landscape';
orientationButton.text = `I' m in ${mode} mode!`;
mq.addEventListener('change', (event: MediaQueryListEvent) => {
mode = event.matches ? 'portrait' : 'landscape';
orientationButton.text = `I' m in ${mode} mode!`;
});
}
const themeModeButton: Button = page.getViewById('theme-match-media-btn');
if (themeModeButton) {
const mq = matchMedia('(prefers-color-scheme: light)');
let mode = mq.matches ? 'light' : 'dark';
themeModeButton.text = `I' m in ${mode} mode!`;
mq.addEventListener('change', (event: MediaQueryListEvent) => {
mode = event.matches ? 'light' : 'dark';
themeModeButton.text = `I' m in ${mode} mode!`;
});
}
}

25
apps/ui/src/media-queries/main-page.xml Normal file
View File

@@ -0,0 +1,25 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">
<ActionBar>
<Label text="Media Queries"></Label>
</ActionBar>
<ScrollView>
<StackLayout padding="20">
<Label text="Orientation change" fontSize="16" fontWeight="bold" marginBottom="12"/>
<StackLayout>
<Label text="CSS media query - color change" fontSize="14"/>
<Button class="orientation-btn" text="My color is different after orientation!"/>
<Label text="The matchMedia API - text change" fontSize="14"/>
<Button id="orientation-match-media-btn"/>
</StackLayout>
<Label text="Theme mode change" fontSize="16" fontWeight="bold" marginTop="12" marginBottom="12"/>
<StackLayout>
<Label text="CSS media query - color change" fontSize="14"/>
<Button class="theme-mode-btn" text="My color is different after theme change!"/>
<Label text="The matchMedia API - text change" fontSize="14"/>
<Button id="theme-match-media-btn"/>
</StackLayout>
</StackLayout>
</ScrollView>
</Page>