javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 21327 additions and 21181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/tabs/tabs.scss
View File

@ -1,6 +1,6 @@
@import "../../themes/ionic.globals";
ion-tabs {
:host {
@include position(0, 0, 0, 0);
position: absolute;

6
core/src/components/tabs/tabs.tsx
View File

@ -1,11 +1,11 @@
import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Color, Config, NavOutlet, RouteID, RouteWrite } from '../../interface';
import { TabbarLayout, TabbarPlacement } from '../tabbar/tabbar';
import { Color, Config, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
@Component({
tag: 'ion-tabs',
styleUrl: 'tabs.scss'
styleUrl: 'tabs.scss',
shadow: true
})
export class Tabs implements NavOutlet {

9
core/src/components/tabs/test/basic/index.html
View File

@ -1,11 +1,14 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - 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>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
@ -49,12 +52,10 @@
</ion-tab>
<ion-tab disabled
label="Messages"
icon="chatboxes"
component="page-one">
<ion-tab disabled label="Messages" icon="chatboxes" component="page-one">
</ion-tab>
</ion-tabs>
</ion-app>
</body>
</html>

8
core/src/components/tabs/test/nav/index.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - Nav</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
<script type="text/javascript">
window.Ionic.config = {useRouter: true};
window.Ionic.config = { useRouter: true };
</script>
<script>
@ -244,8 +246,9 @@
customElements.define('page-eight', PageEight);
customElements.define('page-nine', PageNine);
</script>
</script>
</head>
<body>
<ion-app useRouter='false'>
@ -264,4 +267,5 @@
</ion-tabs>
</ion-app>
</body>
</html>

4
core/src/components/tabs/test/placements/index.html
View File

@ -1,11 +1,14 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - 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>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
@ -53,4 +56,5 @@
</ion-tabs>
</ion-app>
</body>
</html>

10
core/src/components/tabs/test/preview/index.html
View File

@ -1,11 +1,14 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
@ -49,13 +52,10 @@
</ion-tab>
<ion-tab disabled
label="Messages"
icon="chatboxes"
component="page-one"
path="tab4">
<ion-tab disabled label="Messages" icon="chatboxes" component="page-one" path="tab4">
</ion-tab>
</ion-tabs>
</ion-app>
</body>
</html>

7
core/src/components/tabs/test/scroll/index.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - Scroll</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">
<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>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
@ -31,4 +33,5 @@
<ion-nav-controller></ion-nav-controller>
</ion-app>
</body>
</html>

15
core/src/components/tabs/test/translucent/index.html
View File

@ -1,14 +1,17 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - Translucent</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
<script type="text/javascript">
window.Ionic.config = {useRouter: true};
window.Ionic.config = { useRouter: true };
</script>
</head>
<body>
<ion-app>
@ -23,12 +26,12 @@
</ion-tab>
<ion-tab label="Apps" icon="logo-buffer" root="page-three">
<ion-route path="/" component="page-three"></ion-route>
<ion-route path="/" component="page-three"></ion-route>
</ion-tab>
<ion-tab label="Updates" icon="download" badge="7" badge-style="danger" root="translucent-page-tab">
<ion-route component="page-one"></ion-route>
<ion-route path="paginaaaa-two" component="page-two"></ion-route>
<ion-route component="page-one"></ion-route>
<ion-route path="paginaaaa-two" component="page-two"></ion-route>
</ion-tab>
<ion-tab label="Search" icon="search">
@ -80,6 +83,8 @@
.orange {
background-color: #f69234;
}
</style>
</style>
</body>
</html>

9
core/src/components/tabs/test/vanilla/index.html
View File

@ -1,14 +1,17 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - Vanilla</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
<script type="text/javascript">
window.Ionic.config = {useRouter: true};
window.Ionic.config = { useRouter: true };
</script>
</head>
<body>
<ion-tabs>
<ion-tab label="Tab One" icon="star" path="">
@ -32,6 +35,8 @@
height: 100%;
color: #FFF;
}
</style>
</style>
</body>
</html>