javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(): remove no-border references, add ion-no-border class (#18954)

Browse Source 
* remove no border ref

* change to dispaly

* update usage
This commit is contained in:
Liam DeBeasi
2019-10-01 09:45:02 -04:00
committed by Brandy Carney
parent 3cac855e1a
commit e665d38d23
20 changed files with 238 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/header/header.ios.scss
View File

@@ -8,10 +8,6 @@
--border-width: 0 0 #{$hairlines-width};
}
.header-ios[no-border] ion-toolbar:last-child {
--border-width: 0;
}
@supports (backdrop-filter: blur(0)) {
.header-translucent-ios {
backdrop-filter: $header-ios-translucent-filter;
@@ -23,6 +19,10 @@
}
}
.header-ios.ion-no-border ion-toolbar:last-child {
--border-width: 0;
}
// iOS Header - Collapse
// --------------------------------------------------
.header-collapse-condense {

4
core/src/components/header/header.md.scss
View File

@@ -22,10 +22,10 @@
content: "";
}
.header-md[no-border]::after {
.header-collapse-condense {
display: none;
}
.header-collapse-condense {
.header-md.ion-no-border::after {
display: none;
}

21
core/src/components/header/readme.md
View File

@@ -26,6 +26,13 @@ It's important to note that ion-header needs to be the one of the three root ele
</ion-toolbar>
</ion-header>
<!-- Header without a border -->
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header collapse="condense">
<ion-toolbar>
@@ -57,6 +64,13 @@ export const HeaderExample: React.FC = () => (
</IonToolbar>
</IonHeader>
{/*-- Header without a border --*/}
<IonHeader className="ion-no-border">
<IonToolbar>
<IonTitle>Header - No Border</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
@@ -86,6 +100,13 @@ export const HeaderExample: React.FC = () => (
</ion-toolbar>
</ion-header>
<!-- Header without a border -->
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header collapse="condense">
<ion-toolbar>

10
core/src/components/header/test/basic/e2e.ts Normal file
View File

@@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('header: basic', async () => {
const page = await newE2EPage({
url: '/src/components/header/test/basic?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

34
core/src/components/header/test/basic/index.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Header - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<ion-header>
<ion-toolbar>
<ion-title>Header - Default</ion-title>
</ion-toolbar>
</ion-header>
<br>
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
</ion-app>
</body>
</html>

7
core/src/components/header/usage/angular.md
View File

@@ -12,6 +12,13 @@
</ion-toolbar>
</ion-header>
<!-- Header without a border -->
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header collapse="condense">
<ion-toolbar>

7
core/src/components/header/usage/javascript.md
View File

@@ -12,6 +12,13 @@
</ion-toolbar>
</ion-header>
<!-- Header without a border -->
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header collapse="condense">
<ion-toolbar>

7
core/src/components/header/usage/react.md
View File

@@ -17,6 +17,13 @@ export const HeaderExample: React.FC = () => (
</IonToolbar>
</IonHeader>
{/*-- Header without a border --*/}
<IonHeader className="ion-no-border">
<IonToolbar>
<IonTitle>Header - No Border</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>

7
core/src/components/header/usage/vue.md
View File

@@ -13,6 +13,13 @@
</ion-toolbar>
</ion-header>
<!-- Header without a border -->
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header collapse="condense">
<ion-toolbar>