javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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

2
core/src/components/content/test/fullscreen/index.html
View File

@ -13,7 +13,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-header no-border> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Content - Fullscreen</ion-title> <ion-title>Content - Fullscreen</ion-title>
</ion-toolbar> </ion-toolbar>

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

@ -8,10 +8,6 @@
--border-width: #{$hairlines-width} 0 0; --border-width: #{$hairlines-width} 0 0;
} }
.footer-ios[no-border] ion-toolbar:first-child {
--border-width: 0;
}
@supports (backdrop-filter: blur(0)) { @supports (backdrop-filter: blur(0)) {
.footer-translucent-ios { .footer-translucent-ios {
backdrop-filter: $footer-ios-translucent-filter; backdrop-filter: $footer-ios-translucent-filter;
@ -22,3 +18,7 @@
--backdrop-filter: #{$footer-ios-translucent-filter}; --backdrop-filter: #{$footer-ios-translucent-filter};
} }
} }
.footer-ios.ion-no-border ion-toolbar:first-child {
--border-width: 0;
}

2
core/src/components/footer/footer.md.scss
View File

@ -22,6 +22,6 @@
content: ""; content: "";
} }
.footer-md[no-border]::before { .footer-md.ion-no-border::before {
display: none; display: none;
} }

38
core/src/components/footer/readme.md
View File

@ -8,11 +8,18 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c
## Usage ## Usage
### Javascript ### Angular / javascript
```html ```html
<ion-content></ion-content> <ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer> <ion-footer>
<ion-toolbar> <ion-toolbar>
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
@ -31,6 +38,13 @@ export const FooterExample: React.FC = () => (
<> <>
<IonContent /> <IonContent />
{/*-- Footer without a border --*/}
<IonFooter className="ion-no-border">
<IonToolbar>
<IonTitle>Footer - No Border</IonTitle>
</IonToolbar>
</IonFooter>
<IonFooter> <IonFooter>
<IonToolbar> <IonToolbar>
<IonTitle>Footer</IonTitle> <IonTitle>Footer</IonTitle>
@ -41,6 +55,28 @@ export const FooterExample: React.FC = () => (
``` ```
### Vue
```html
<template>
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</template>
```
## Properties ## Properties

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

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

36
core/src/components/footer/test/basic/index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Footer - 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>
<br>
<ion-footer>
<ion-toolbar>
<ion-title>Footer - Default</ion-title>
</ion-toolbar>
</ion-footer>
<br>
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
</ion-content>
</ion-app>
</body>
</html>

16
core/src/components/footer/usage/angular.md Normal file
View File

@ -0,0 +1,16 @@
```html
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
```

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

@ -1,6 +1,13 @@
```html ```html
<ion-content></ion-content> <ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer> <ion-footer>
<ion-toolbar> <ion-toolbar>
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>

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

@ -6,6 +6,13 @@ export const FooterExample: React.FC = () => (
<> <>
<IonContent /> <IonContent />
{/*-- Footer without a border --*/}
<IonFooter className="ion-no-border">
<IonToolbar>
<IonTitle>Footer - No Border</IonTitle>
</IonToolbar>
</IonFooter>
<IonFooter> <IonFooter>
<IonToolbar> <IonToolbar>
<IonTitle>Footer</IonTitle> <IonTitle>Footer</IonTitle>

18
core/src/components/footer/usage/vue.md Normal file
View File

@ -0,0 +1,18 @@
```html
<template>
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</template>
```

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

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

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

@ -22,10 +22,10 @@
content: ""; content: "";
} }
.header-md[no-border]::after {
display: none;
}
.header-collapse-condense { .header-collapse-condense {
display: none; display: none;
} }
.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-toolbar>
</ion-header> </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-content>
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
@ -57,6 +64,13 @@ export const HeaderExample: React.FC = () => (
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
{/*-- Header without a border --*/}
<IonHeader className="ion-no-border">
<IonToolbar>
<IonTitle>Header - No Border</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent> <IonContent>
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
@ -86,6 +100,13 @@ export const HeaderExample: React.FC = () => (
</ion-toolbar> </ion-toolbar>
</ion-header> </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-content>
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <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-toolbar>
</ion-header> </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-content>
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>

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

@ -12,6 +12,13 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </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-content>
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>

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

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

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

@ -13,6 +13,13 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </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-content>
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>

2
core/src/components/searchbar/test/toolbar/index.html
View File

@ -14,7 +14,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-header no-border translucent> <ion-header translucent>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button>Undo</ion-button> <ion-button>Undo</ion-button>