mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
7
core/src/components/hide-when/hide-when.scss
Normal file
7
core/src/components/hide-when/hide-when.scss
Normal file
@ -0,0 +1,7 @@
|
||||
ion-hide-when.show-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ion-hide-when.hide-content {
|
||||
display: none !important;
|
||||
}
|
||||
45
core/src/components/hide-when/hide-when.tsx
Normal file
45
core/src/components/hide-when/hide-when.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Component, Element, Listen, Prop, State } from '@stencil/core';
|
||||
import { Config, PlatformConfig } from '../../index';
|
||||
|
||||
import {
|
||||
DisplayWhen,
|
||||
updateTestResults,
|
||||
} from '../../utils/show-hide-when-utils';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-hide-when',
|
||||
styleUrl: './hide-when.scss'
|
||||
})
|
||||
export class HideWhen implements DisplayWhen {
|
||||
|
||||
@Element() element: HTMLElement;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop({ context: 'platforms' }) calculatedPlatforms: PlatformConfig[];
|
||||
|
||||
@Prop() orientation: string = null;
|
||||
@Prop() mediaQuery: string = null;
|
||||
@Prop() size: string = null;
|
||||
@Prop() mode: string = null;
|
||||
@Prop() platform: string = null;
|
||||
@Prop() or = false;
|
||||
|
||||
@State() passesTest = false;
|
||||
|
||||
@Listen('window:resize')
|
||||
componentWillLoad() {
|
||||
return updateTestResults(this);
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'show-content': !this.passesTest,
|
||||
'hide-content': this.passesTest
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
75
core/src/components/hide-when/readme.md
Normal file
75
core/src/components/hide-when/readme.md
Normal file
@ -0,0 +1,75 @@
|
||||
# ion-hide-when
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### mediaQuery
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### or
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### orientation
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### platform
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### size
|
||||
|
||||
string
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### media-query
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### or
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### orientation
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### platform
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### size
|
||||
|
||||
string
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
105
core/src/components/hide-when/test/basic/index.html
Normal file
105
core/src/components/hide-when/test/basic/index.html
Normal file
@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hide When - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when mode="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when mode="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when mode="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Orientation Tests</h2>
|
||||
<ion-hide-when orientation="portrait">
|
||||
<div>Hides on portrait orientation</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when orientation="landscape">
|
||||
<div>Hides on landscape orientation</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Platform Tests</h2>
|
||||
|
||||
<ion-hide-when platform="android,ios">
|
||||
<div>Hides on Android and iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="ios">
|
||||
<div>Only hide on iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="android">
|
||||
<div>Only hide on Android</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="ipad">
|
||||
<div>Only hide on ipad</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="phablet">
|
||||
<div>Only hide on phablet</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="iphone">
|
||||
<div>Only hide on phone</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<ion-hide-when size="xs">
|
||||
<div>Only hide on xs</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="sm">
|
||||
<div>Only hide on sm</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="md">
|
||||
<div>Only hide on md</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="lg">
|
||||
<div>Only hide on lg</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="xl">
|
||||
<div>Only hide on xl</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="xs, m">
|
||||
<div>Only hide on XS or m</div>
|
||||
</ion-hide-when>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user