mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
MATERIAL
This commit is contained in:
5
ionic/components/app/extensions/material.scss
Normal file
5
ionic/components/app/extensions/material.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.mode-md {
|
||||||
|
ion-app, .ion-app {
|
||||||
|
font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif;
|
||||||
|
}
|
||||||
|
}
|
49
ionic/components/app/test/material/index.ts
Normal file
49
ionic/components/app/test/material/index.ts
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import {Component, Directive} from 'angular2/angular2';
|
||||||
|
|
||||||
|
import {App, IonicView, Register} from 'ionic/ionic';
|
||||||
|
|
||||||
|
@IonicView({
|
||||||
|
template: '<ion-navbar *navbar primary>' +
|
||||||
|
'<ion-title>Heading</ion-title>' +
|
||||||
|
'<ion-nav-items primary>' +
|
||||||
|
'<button>P1</button>' +
|
||||||
|
'</ion-nav-items>' +
|
||||||
|
'<ion-nav-items secondary>' +
|
||||||
|
'<button>S1</button>' +
|
||||||
|
'<button icon><i class="icon ion-navicon"></i></button>' +
|
||||||
|
'</ion-nav-items>' +
|
||||||
|
'</ion-navbar>' +
|
||||||
|
'<ion-content>' +
|
||||||
|
`<ion-list>
|
||||||
|
<ion-item>
|
||||||
|
All Genres
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
Alternative
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
Blues
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
` +
|
||||||
|
'</ion-content>'
|
||||||
|
})
|
||||||
|
export class FirstPage {
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@App({
|
||||||
|
template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'><ion-nav></ion-nav>`,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/first',
|
||||||
|
component: FirstPage,
|
||||||
|
root: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
class MyApp {
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
}
|
@ -4,8 +4,8 @@
|
|||||||
// All font sizes use rem units
|
// All font sizes use rem units
|
||||||
|
|
||||||
|
|
||||||
$font-family-sans-serif: "Helvetica Neue", "Roboto", sans-serif !default;
|
$font-family-sans-serif: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
|
||||||
$font-family-light-sans-serif: "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
|
$font-family-light-sans-serif: -apple-system, "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
|
||||||
|
|
||||||
$font-family-base: $font-family-sans-serif !default;
|
$font-family-base: $font-family-sans-serif !default;
|
||||||
$font-size-root: 62.5% !default;
|
$font-size-root: 62.5% !default;
|
||||||
|
19
ionic/components/item/extensions/material.scss
Normal file
19
ionic/components/item/extensions/material.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
$item-material-min-height: 56px;
|
||||||
|
$item-material-font-size: 16px;
|
||||||
|
$item-material-label-color: #222;
|
||||||
|
|
||||||
|
.list[mode="md"] {
|
||||||
|
.item {
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
.item-content {
|
||||||
|
min-height: $item-material-min-height;
|
||||||
|
padding-right: 16px;
|
||||||
|
border-bottom: 1px solid #DBDBDB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-label {
|
||||||
|
color: $item-material-label-color;
|
||||||
|
font-size: $item-material-font-size;
|
||||||
|
}
|
||||||
|
}
|
2
ionic/components/list/extensions/material.scss
Normal file
2
ionic/components/list/extensions/material.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
.list[mode="md"] {
|
||||||
|
}
|
@ -3,19 +3,20 @@
|
|||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
$navbar-material-height: 6.4rem !default;
|
$navbar-material-height: 6.4rem !default;
|
||||||
$navbar-material-background: #f7f7f8 !default;
|
$navbar-material-background: #f7f7f8; //get-color(primary, base) !default;//#f7f7f8 !default;
|
||||||
|
|
||||||
$navbar-material-title-font-size: 2rem !default;
|
$navbar-material-title-font-size: 2rem !default;
|
||||||
$navbar-material-button-font-size: 2rem !default;
|
$navbar-material-button-font-size: 2rem !default;
|
||||||
$navbar-material-button-text-color: #007aff !default;
|
$navbar-material-button-text-color: #007aff !default;
|
||||||
|
|
||||||
|
|
||||||
.navbar[mode="md"] {
|
.nav[mode="md"] .navbar-container {
|
||||||
height: $navbar-material-height;
|
height: $navbar-material-height;
|
||||||
background: $navbar-material-background;
|
background: $navbar-material-background;
|
||||||
|
|
||||||
.navbar-title {
|
ion-title {
|
||||||
font-size: $navbar-material-title-font-size;
|
font-size: $navbar-material-title-font-size;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
|
@ -35,3 +35,22 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Core Nav Bar Color Generation
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
@each $color, $value in $colors {
|
||||||
|
|
||||||
|
.navbar[#{$color}] {
|
||||||
|
background-color: get-color($color, base);
|
||||||
|
|
||||||
|
ion-title {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
[button] {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@ -7,7 +7,7 @@ import {ThirdPage} from './third-page';
|
|||||||
|
|
||||||
@IonicView({
|
@IonicView({
|
||||||
template: '' +
|
template: '' +
|
||||||
'<ion-navbar *navbar>' +
|
'<ion-navbar *navbar primary>' +
|
||||||
'<ion-title>First Page: {{ val }}</ion-title>' +
|
'<ion-title>First Page: {{ val }}</ion-title>' +
|
||||||
'<ion-nav-items primary>' +
|
'<ion-nav-items primary>' +
|
||||||
'<button>P1</button>' +
|
'<button>P1</button>' +
|
||||||
|
@ -5,7 +5,7 @@ import {FirstPage} from './first-page';
|
|||||||
|
|
||||||
@IonicView({
|
@IonicView({
|
||||||
template: `
|
template: `
|
||||||
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
|
<ion-navbar *navbar primary><ion-title>Second Page Header</ion-title></ion-navbar>
|
||||||
<ion-content class="padding">
|
<ion-content class="padding">
|
||||||
<p><button primary (click)="pop()">Pop (Go back to 1st)</button></p>
|
<p><button primary (click)="pop()">Pop (Go back to 1st)</button></p>
|
||||||
<p><button primary nav-pop>Pop with NavPop (Go back to 1st)</button></p>
|
<p><button primary nav-pop>Pop with NavPop (Go back to 1st)</button></p>
|
||||||
|
@ -73,8 +73,12 @@
|
|||||||
|
|
||||||
// Material Design Components
|
// Material Design Components
|
||||||
@import
|
@import
|
||||||
|
"components/app/extensions/material",
|
||||||
"components/alert/extensions/material",
|
"components/alert/extensions/material",
|
||||||
"components/button/extensions/material",
|
"components/button/extensions/material",
|
||||||
|
"components/item/extensions/material",
|
||||||
|
"components/list/extensions/material",
|
||||||
|
"components/nav-bar/extensions/material",
|
||||||
"components/tabs/extensions/material";
|
"components/tabs/extensions/material";
|
||||||
|
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user