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

feat(title): add large iOS toolbar title (#19268)

Browse Source 
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2019-09-04 11:38:48 -04:00
committed by GitHub
parent d9610cdbdf
commit 923312ecd5
21 changed files with 964 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
core/src/components/toolbar/test/title/index.html Normal file
View File

@ -0,0 +1,204 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Toolbar - Title</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>
<style>
.more, .create {
--dimension: 28px;
width: var(--dimension);
height: var(--dimension) !important;
--border-radius: var(--dimension) !important;
}
.more {
--background: #e9e9ea;
}
.create {
--background: #3777ff;
--color: white !important;
}
.create ion-icon {
transform: scale(0.9);
}
/*
ion-toolbar {
--background: red;
--border-color: #dfe1e0;
}
.main-content {
--background: #f1f2f6;
}
*/
</style>
</head>
<!--<ion-button slot="icon-only" class="more">
<ion-icon name="ios-more"></ion-icon>
</ion-button>
<ion-button slot="icon-only" class="create">
<ion-icon name="ios-create"></ion-icon>
</ion-button>-->
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
<style>
ion-item {
--padding-start: 10px;
}
.item-badge {
padding: 0;
margin-top: 14px;
margin-right: 10px;
width: 14px;
height: 14px;
}
</style>
<script>
class PageTwo extends HTMLElement {
generateList() {
let html = '';
for (let i = 0; i < 100; i++) {
html += `
<ion-nav-link component="page-three">
<ion-item button>
<ion-badge slot="start" class="item-badge ion-align-self-start">&nbsp;</ion-badge>
<ion-label>
<h2>Heading ${i}</h2>
<h3>Smaller heading ${i}</h2>
<p>Paragraph ${i}</p>
</ion-label>
</ion-item>
</ion-nav-link>
`;
}
return html;
}
connectedCallback() {
this.innerHTML = `
<ion-header class="main-header">
<ion-toolbar>
<ion-buttons collapse>
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
<ion-buttons slot="end">
<ion-button>Hello Page 2</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="main-content">
<ion-header collapse>
<ion-toolbar>
<ion-title size="large">Page Two</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-list id="dynamicList">${this.generateList()}</ion-list>
</ion-content>
`;
}
}
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Settings"></ion-back-button>
</ion-buttons>
<ion-title>Page main</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-nav-link component="page-two">
<ion-item button>
<ion-label>Go to Page Two</ion-label>
</ion-item>
</ion-nav-link>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
generateList() {
let html = '';
for (let i = 0; i < 100; i++) {
html += `
<ion-nav-link component="page-two">
<ion-item button color="dark">
<ion-badge slot="start" class="item-badge ion-align-self-start">&nbsp;</ion-badge>
<ion-label>
<h2>Heading ${i}</h2>
<h3>Smaller heading ${i}</h2>
<p>Paragraph ${i}</p>
</ion-label>
</ion-item>
</ion-nav-link>
`;
}
return html;
}
connectedCallback() {
this.innerHTML = `
<ion-header class="three-header" color="dark" translucent>
<ion-toolbar color="dark">
<ion-buttons>
<ion-back-button default-href="/" text="Page Two"></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
<ion-buttons slot="end" collapse>
<ion-button>Hello Page 3</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="three-content" fullscreen color="dark">
<ion-header collapse color="dark">
<ion-toolbar color="dark">
<ion-title size="large">Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-list id="dynamicList">${this.generateList()}</ion-list>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
</body>
</html>

30
core/src/components/toolbar/toolbar.ios.scss
View File

@ -8,11 +8,11 @@
--background: #{$toolbar-ios-background};
--color: #{$toolbar-ios-color};
--border-color: #{$toolbar-ios-border-color};
--padding-top: 4px;
--padding-bottom: 4px;
--padding-start: 4px;
--padding-end: 4px;
--min-height: 44px;
--padding-top: #{$toolbar-ios-padding-top};
--padding-bottom: #{$toolbar-ios-padding-bottom};
--padding-start: #{$toolbar-ios-padding-start};
--padding-end: #{$toolbar-ios-padding-end};
--min-height: #{$toolbar-ios-min-height};
}
// Toolbar: Content
@ -37,6 +37,10 @@
// iOS Toolbar Slot Placement
// --------------------------------------------------
::slotted(ion-buttons) {
min-height: 38px;
}
::slotted([slot="start"]) {
order: map-get($toolbar-order-ios, slot-start);
}
@ -56,3 +60,19 @@
text-align: end;
}
// Toolbar: Large Title
// --------------------------------------------------
:host(.toolbar-title-large) .toolbar-container {
flex-wrap: wrap;
align-items: flex-start;
}
:host(.toolbar-title-large) .toolbar-content ion-title {
flex: 1;
order: map-get($toolbar-order-ios, title-large);
min-width: 100%;
}

45
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@ -13,41 +13,26 @@ $toolbar-order-ios: (
slot-primary: 5,
slot-end: 6,
menu-toggle-end: 7,
title-large: 8,
);
/// @prop - Font size of the toolbar button
$toolbar-ios-button-font-size: 17px !default;
/// @prop - Minimum height of the toolbar
$toolbar-ios-min-height: 44px !default;
/// @prop - Text color of the toolbar button
$toolbar-ios-button-color: ion-color(primary, base) !default;
/// @prop - Padding top of the toolbar
$toolbar-ios-padding-top: 3px !default;
/// @prop - Background color of the toolbar button
$toolbar-ios-button-background-color: $toolbar-ios-background !default;
/// @prop - Padding end of the toolbar
$toolbar-ios-padding-end: 4px !default;
/// @prop - Background color of the toolbar button when activated
$toolbar-ios-button-background-color-activated: $toolbar-ios-color-activated !default;
/// @prop - Border radius of the toolbar button
$toolbar-ios-button-border-radius: 4px !default;
/// @prop - Padding bottom of the toolbar
$toolbar-ios-padding-bottom: $toolbar-ios-padding-top !default;
/// @prop - Font weight of the strong toolbar button
$toolbar-ios-button-strong-font-weight: 600 !default;
/// @prop - Padding start of the toolbar
$toolbar-ios-padding-start: $toolbar-ios-padding-end !default;
/// @prop - Fill color of the toolbar button icon
$toolbar-ios-button-icon-fill-color: currentColor !default;
// iOS Title
// --------------------------------------------------
/// @prop - Font size of the toolbar title
$toolbar-ios-title-font-size: 17px !default;
/// @prop - Font weight of the toolbar title
$toolbar-ios-title-font-weight: 600 !default;
/// @prop - Text alignment of the toolbar title
$toolbar-ios-title-text-align: center !default;
/// @prop - Font size of the toolbar button
$toolbar-ios-button-font-size: 17px !default;
/// @prop - Text color of the toolbar title
$toolbar-ios-title-text-color: $toolbar-ios-color !default;
/// @prop - Border radius of the toolbar button
$toolbar-ios-button-border-radius: 4px !default;

3
core/src/components/toolbar/toolbar.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Host, Listen, Prop, h } from '@
import { getIonMode } from '../../global/ionic-global';
import { Color, CssClassMap, StyleEventDetail } from '../../interface';
import { createColorClasses } from '../../utils/theme';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -89,6 +89,7 @@ export class Toolbar implements ComponentInterface {
return (
<Host
class={{
'in-toolbar': hostContext('ion-toolbar', this.el),
[mode]: true,
...childStyles,
...createColorClasses(this.color),