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

fix(searchbar): update padding and button alignment (#19532)

Browse Source 
fixes #19502
This commit is contained in:
Brandy Carney
2019-10-02 12:23:23 -04:00
committed by GitHub
parent cdfd82a750
commit 77658e61cc
2 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,70 +16,82 @@
<ion-header no-border translucent> <ion-header no-border translucent>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-button>Undo</ion-button>
</ion-buttons>
<ion-title>Searchbar - Toolbar</ion-title> <ion-title>Searchbar - Toolbar</ion-title>
<ion-buttons slot="end">
<ion-button>Clear</ion-button>
</ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-button>Undo</ion-button>
</ion-buttons>
<ion-searchbar translucent></ion-searchbar> <ion-searchbar translucent></ion-searchbar>
<ion-buttons slot="end">
<ion-button>Clear</ion-button>
</ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content id="content" fullscreen> <ion-content id="content" fullscreen>
<h5 class="ion-padding-start ion-padding-top"> Search - Transparent Toolbar </h5> <h5 class="ion-padding-start"> Search - Transparent Toolbar </h5>
<ion-toolbar transparent> <ion-toolbar transparent>
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Default Toolbar </h5> <h5 class="ion-padding-start"> Search - Default Toolbar </h5>
<ion-toolbar> <ion-toolbar>
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Primary Toolbar </h5> <h5 class="ion-padding-start"> Search - Primary Toolbar </h5>
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Secondary Toolbar </h5> <h5 class="ion-padding-start"> Search - Secondary Toolbar </h5>
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Tertiary Toolbar </h5> <h5 class="ion-padding-start"> Search - Tertiary Toolbar </h5>
<ion-toolbar color="tertiary"> <ion-toolbar color="tertiary">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Success Toolbar </h5> <h5 class="ion-padding-start"> Search - Success Toolbar </h5>
<ion-toolbar color="success"> <ion-toolbar color="success">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Warning Toolbar </h5> <h5 class="ion-padding-start"> Search - Warning Toolbar </h5>
<ion-toolbar color="warning"> <ion-toolbar color="warning">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Danger Toolbar </h5> <h5 class="ion-padding-start"> Search - Danger Toolbar </h5>
<ion-toolbar color="danger"> <ion-toolbar color="danger">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Light Toolbar </h5> <h5 class="ion-padding-start"> Search - Light Toolbar </h5>
<ion-toolbar color="light"> <ion-toolbar color="light">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Medium Toolbar </h5> <h5 class="ion-padding-start"> Search - Medium Toolbar </h5>
<ion-toolbar color="medium"> <ion-toolbar color="medium">
<ion-searchbar show-cancel-button="focus"></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar </h5> <h5 class="ion-padding-start"> Search - Dark Toolbar </h5>
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-searchbar show-cancel-button="focus" placeholder="Filter Schedules"></ion-searchbar> <ion-searchbar show-cancel-button="focus" placeholder="Filter Schedules"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar, Primary Search </h5> <h5 class="ion-padding-start"> Search - Dark Toolbar, Primary Search </h5>
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-searchbar show-cancel-button="focus" color="primary" placeholder="Filter Schedules"></ion-searchbar> <ion-searchbar show-cancel-button="focus" color="primary" placeholder="Filter Schedules"></ion-searchbar>
</ion-toolbar> </ion-toolbar>

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

@ -38,7 +38,7 @@
// -------------------------------------------------- // --------------------------------------------------
:host(.toolbar-searchbar) .toolbar-container { :host(.toolbar-searchbar) .toolbar-container {
@include padding(0); @include padding(0, null);
} }
// TODO - important is needed because searchbar is scoped // TODO - important is needed because searchbar is scoped
@ -47,12 +47,14 @@
height: 52px !important; height: 52px !important;
padding-top: 1px !important; padding-top: 1px !important;
padding-right: 16px !important;
padding-bottom: 15px !important; padding-bottom: 15px !important;
padding-left: 16px !important;
/* stylelint-enable */ /* stylelint-enable */
} }
:host(.toolbar-searchbar) ::slotted(ion-buttons) {
align-self: start;
}
// iOS Toolbar Slot Placement // iOS Toolbar Slot Placement
// -------------------------------------------------- // --------------------------------------------------