What’s the best strategy for using a desktop friendly widgets when using ionic as a PWA? I have a form with ion-select and ion-datetime. They give me nice pickers that slide up from the bottom of the screen on mobile, but on desktop I would prefer a more standard select dropdown and probably the material design datepicker.
I was thinking of using a media query to hide and show different versions of the form inputs. Is there a best practice here?
Instead of media queries, you can also use platform to detect if you are on a desktop device.
import { Platform } from 'ionic-angular';
@Component({...})
export MyPage {
constructor(public plt: Platform) {
if (this.plt.is('core')) {
// This will only print when on a desktop device
console.log('I am a desktop device!');
}
}
}
Cool. So would I use that to set a variable and then use ngIf inside my template to show or hide different input components?
What is the advantage of detecting the platform in javascript as opposed to media queries in CSS?
Or you could use a split pane:
See:
If the screen’s min-width is less than 992px (‘xs’, ‘sm’, ‘md’):
If the screen’s min-width is 992px (‘lg’):
