mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
fix(searchbar): update to match style guide and use native buttons
this updates the cancel button so it is only added to the dom when shouldCancel is enabled and it gets added to different places based on the mode
This commit is contained in:
Brandy Carney
@ -26,7 +26,7 @@
|
||||
// Searchbar Search Icon
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios .searchbar-search-icon {
|
||||
.searchbar-search-icon-ios {
|
||||
@include background-position(center);
|
||||
@include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
|
||||
@include margin-horizontal(calc(50% - 60px), null);
|
||||
@ -63,7 +63,7 @@
|
||||
// Searchbar Clear Input Icon
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios ion-button.searchbar-clear-icon {
|
||||
.searchbar-ios .searchbar-clear-icon {
|
||||
@include position(0, 0, null, null);
|
||||
@include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
|
||||
@include background-position(center);
|
||||
@ -73,36 +73,35 @@
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: $searchbar-ios-input-clear-icon-size;
|
||||
}
|
||||
|
||||
|
||||
// Searchbar Cancel (iOS only)
|
||||
// Searchbar Cancel
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios .searchbar-ios-cancel {
|
||||
@include margin-horizontal(0, null);
|
||||
.searchbar-cancel-button-ios {
|
||||
@include padding(0, 0, 0, 8px);
|
||||
|
||||
font-size: $searchbar-ios-cancel-button-font-size;
|
||||
|
||||
display: none;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
height: 30px;
|
||||
color: $searchbar-ios-cancel-button-color;
|
||||
background-color: $searchbar-ios-cancel-button-background-color;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.searchbar-ios button.searchbar-ios-cancel {
|
||||
@include padding(0, 0, 0, 8px);
|
||||
@include margin(0);
|
||||
}
|
||||
|
||||
|
||||
// Searchbar Left Aligned (iOS only)
|
||||
// Searchbar Left Aligned (iOS Only)
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios.searchbar-left-aligned .searchbar-search-icon {
|
||||
.searchbar-left-aligned .searchbar-search-icon-ios {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
@ -111,31 +110,33 @@
|
||||
}
|
||||
|
||||
|
||||
// Searchbar Has Focus
|
||||
// Searchbar Has Focus & Animated
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios.searchbar-show-cancel.searchbar-has-focus .searchbar-ios-cancel {
|
||||
.searchbar-show-cancel.searchbar-has-focus .searchbar-cancel-button-ios,
|
||||
.searchbar-show-cancel.searchbar-animated .searchbar-cancel-button-ios {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Searchbar in Toolbar
|
||||
// -----------------------------------------
|
||||
|
||||
.toolbar .searchbar-ios .searchbar-ios-cancel {
|
||||
@include padding(0);
|
||||
.searchbar-animated .searchbar-search-icon-ios,
|
||||
.searchbar-ios.searchbar-animated .searchbar-input {
|
||||
transition: $searchbar-ios-input-transition;
|
||||
}
|
||||
|
||||
.toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel {
|
||||
@include padding-horizontal(8px, null);
|
||||
.searchbar-animated.searchbar-has-focus .searchbar-cancel-button-ios {
|
||||
opacity: 1;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.searchbar-animated .searchbar-cancel-button-ios {
|
||||
@include margin-horizontal(null, -100%);
|
||||
@include transform(translate3d(0, 0, 0));
|
||||
|
||||
// Searchbar Cancel (MD only)
|
||||
// -----------------------------------------
|
||||
opacity: 0;
|
||||
transition: $searchbar-ios-cancel-transition;
|
||||
|
||||
.searchbar-ios .searchbar-md-cancel {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@ -148,15 +149,15 @@
|
||||
$color-shade: ion-color($colors-ios, $color-name, shade, ios);
|
||||
$color-tint: ion-color($colors-ios, $color-name, tint, ios);
|
||||
|
||||
.searchbar-ios-#{$color-name} .searchbar-ios-cancel {
|
||||
.searchbar-ios-#{$color-name} .searchbar-cancel-button-ios {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.enable-hover .searchbar-ios-#{$color-name} .searchbar-ios-cancel:hover {
|
||||
.enable-hover .searchbar-ios-#{$color-name} .searchbar-cancel-button-ios:hover {
|
||||
color: $color-tint;
|
||||
}
|
||||
|
||||
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-search-icon {
|
||||
.toolbar-ios-#{$color-name} .searchbar-search-icon-ios {
|
||||
@include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $color-contrast);
|
||||
opacity: .5;
|
||||
}
|
||||
@ -172,35 +173,7 @@
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-ios-cancel {
|
||||
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-cancel-button-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
// Searchbar animation
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios.searchbar-animated.searchbar-show-cancel .searchbar-ios-cancel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.searchbar-ios.searchbar-animated .searchbar-search-icon,
|
||||
.searchbar-ios.searchbar-animated .searchbar-input {
|
||||
transition: $searchbar-ios-input-transition;
|
||||
}
|
||||
|
||||
.searchbar-animated.searchbar-has-focus .searchbar-ios-cancel {
|
||||
opacity: 1;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.searchbar-animated .searchbar-ios-cancel {
|
||||
@include margin-horizontal(null, -100%);
|
||||
@include transform(translate3d(0, 0, 0));
|
||||
|
||||
opacity: 0;
|
||||
transition: $searchbar-ios-cancel-transition;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1,61 +1,73 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
@import "../button/button.vars";
|
||||
@import "../button/button.ios.vars";
|
||||
|
||||
// iOS Searchbar
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the searchbar
|
||||
$searchbar-ios-padding-top: 12px !default;
|
||||
$searchbar-ios-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the searchbar
|
||||
$searchbar-ios-padding-end: $searchbar-ios-padding-top !default;
|
||||
$searchbar-ios-padding-end: $searchbar-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the searchbar
|
||||
$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default;
|
||||
$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the searchbar
|
||||
$searchbar-ios-padding-start: $searchbar-ios-padding-end !default;
|
||||
$searchbar-ios-padding-start: $searchbar-ios-padding-end !default;
|
||||
|
||||
/// @prop - Font family of the searchbar
|
||||
$searchbar-ios-font-family: $font-family-ios-base !default;
|
||||
$searchbar-ios-font-family: $font-family-ios-base !default;
|
||||
|
||||
/// @prop - Minimum height of the searchbar
|
||||
$searchbar-ios-min-height: 44px !default;
|
||||
$searchbar-ios-min-height: 44px !default;
|
||||
|
||||
/// @prop - Font size of the searchbar cancel button
|
||||
$searchbar-ios-cancel-button-font-size: 16px !default;
|
||||
|
||||
/// @prop - Color of the searchbar cancel button
|
||||
$searchbar-ios-cancel-button-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background color of the searchbar cancel button
|
||||
$searchbar-ios-cancel-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Color of the searchbar input search icon
|
||||
$searchbar-ios-input-search-icon-color: $text-ios-color-step-200 !default;
|
||||
$searchbar-ios-input-search-icon-color: $text-ios-color-step-200 !default;
|
||||
|
||||
/// @prop - Svg for the searchbar input search icon
|
||||
$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
|
||||
$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
|
||||
|
||||
/// @prop - Size of the searchbar input search icon
|
||||
$searchbar-ios-input-search-icon-size: 13px !default;
|
||||
$searchbar-ios-input-search-icon-size: 13px !default;
|
||||
|
||||
/// @prop - Height of the searchbar input
|
||||
$searchbar-ios-input-height: 36px !default;
|
||||
$searchbar-ios-input-height: 36px !default;
|
||||
|
||||
/// @prop - Border radius of the searchbar input
|
||||
$searchbar-ios-input-border-radius: 10px !default;
|
||||
$searchbar-ios-input-border-radius: 10px !default;
|
||||
|
||||
/// @prop - Color of the searchbar input placeholder
|
||||
$searchbar-ios-input-placeholder-color: $text-ios-color-step-200 !default;
|
||||
$searchbar-ios-input-placeholder-color: $text-ios-color-step-200 !default;
|
||||
|
||||
/// @prop - Color of the searchbar input text
|
||||
$searchbar-ios-input-text-color: $text-ios-color !default;
|
||||
$searchbar-ios-input-text-color: $text-ios-color !default;
|
||||
|
||||
/// @prop - Background of the searchbar input
|
||||
$searchbar-ios-input-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
|
||||
$searchbar-ios-input-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
|
||||
|
||||
/// @prop - Transition of the searchbar input
|
||||
$searchbar-ios-input-transition: all 300ms ease !default;
|
||||
$searchbar-ios-input-transition: all 300ms ease !default;
|
||||
|
||||
/// @prop - Transition of the searchbar input cancel button
|
||||
$searchbar-ios-cancel-transition: all 300ms ease !default;
|
||||
$searchbar-ios-cancel-transition: all 300ms ease !default;
|
||||
|
||||
/// @prop - Color of the searchbar input clear icon
|
||||
$searchbar-ios-input-clear-icon-color: $text-ios-color-step-200 !default;
|
||||
$searchbar-ios-input-clear-icon-color: $text-ios-color-step-200 !default;
|
||||
|
||||
/// @prop - Svg for the searchbar input clear icon
|
||||
$searchbar-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
|
||||
$searchbar-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
|
||||
|
||||
/// @prop - Size of the searchbar input clear icon
|
||||
$searchbar-ios-input-clear-icon-size: 18px !default;
|
||||
$searchbar-ios-input-clear-icon-size: 18px !default;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
// Searchbar Search Icon
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-md .searchbar-search-icon {
|
||||
.searchbar-search-icon-md {
|
||||
@include position(11px, null, null, 16px);
|
||||
@include svg-background-image($searchbar-md-input-search-icon-svg, true);
|
||||
|
||||
@ -25,32 +25,36 @@
|
||||
}
|
||||
|
||||
|
||||
// Searchbar Cancel Icon (MD only)
|
||||
// Searchbar Cancel Icon
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-md .searchbar-md-cancel {
|
||||
.searchbar-cancel-button-md {
|
||||
@include position(0, null, null, 10px);
|
||||
@include margin(0);
|
||||
|
||||
display: none;
|
||||
|
||||
width: $searchbar-md-input-search-icon-size + 1;
|
||||
background-color: $searchbar-md-cancel-button-background-color;
|
||||
color: $searchbar-md-cancel-button-color;
|
||||
|
||||
font-size: $searchbar-md-cancel-button-font-size;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Searchbar Search & Cancel Icon
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-md .searchbar-search-icon,
|
||||
.searchbar-md .searchbar-md-cancel {
|
||||
.searchbar-search-icon-md,
|
||||
.searchbar-cancel-button-md {
|
||||
position: absolute;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: $searchbar-md-input-search-icon-size;
|
||||
}
|
||||
|
||||
.searchbar-md .searchbar-search-icon.activated,
|
||||
.searchbar-md .searchbar-md-cancel.activated {
|
||||
.searchbar-search-icon-md.activated,
|
||||
.searchbar-cancel-button-md.activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -80,7 +84,7 @@
|
||||
// Searchbar Clear Input Icon
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-md ion-button.searchbar-clear-icon {
|
||||
.searchbar-md .searchbar-clear-icon {
|
||||
@include position(0, 13px, null, null);
|
||||
@include svg-background-image($searchbar-md-input-clear-icon-svg);
|
||||
@include padding(0);
|
||||
@ -91,11 +95,12 @@
|
||||
width: $searchbar-md-input-clear-icon-size;
|
||||
height: 100%;
|
||||
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: $searchbar-md-input-clear-icon-size;
|
||||
}
|
||||
|
||||
.searchbar-md ion-button.searchbar-clear-icon.activated {
|
||||
.searchbar-md .searchbar-clear-icon.activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -103,11 +108,11 @@
|
||||
// Searchbar Focused
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-md.searchbar-has-focus.searchbar-show-cancel .searchbar-search-icon {
|
||||
.searchbar-has-focus.searchbar-show-cancel .searchbar-search-icon-md {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchbar-md.searchbar-has-focus.searchbar-show-cancel .searchbar-md-cancel {
|
||||
.searchbar-has-focus.searchbar-show-cancel .searchbar-cancel-button-md {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@ -118,15 +123,3 @@
|
||||
.toolbar .searchbar-md {
|
||||
@include padding(3px);
|
||||
}
|
||||
|
||||
.toolbar .searchbar-md .searchbar-md-cancel {
|
||||
@include position-horizontal(14px, null);
|
||||
}
|
||||
|
||||
|
||||
// Searchbar Cancel Icon (iOS only)
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-md .searchbar-ios-cancel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -4,58 +4,67 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the searchbar
|
||||
$searchbar-md-padding-top: 8px !default;
|
||||
$searchbar-md-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the searchbar
|
||||
$searchbar-md-padding-end: $searchbar-md-padding-top !default;
|
||||
$searchbar-md-padding-end: $searchbar-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the searchbar
|
||||
$searchbar-md-padding-bottom: $searchbar-md-padding-top !default;
|
||||
$searchbar-md-padding-bottom: $searchbar-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the searchbar
|
||||
$searchbar-md-padding-start: $searchbar-md-padding-end !default;
|
||||
$searchbar-md-padding-start: $searchbar-md-padding-end !default;
|
||||
|
||||
/// @prop - Font family of the searchbar
|
||||
$searchbar-md-font-family: $font-family-md-base !default;
|
||||
$searchbar-md-font-family: $font-family-md-base !default;
|
||||
|
||||
/// @prop - Background of the searchbar
|
||||
$searchbar-md-background: inherit !default;
|
||||
$searchbar-md-background: inherit !default;
|
||||
|
||||
/// @prop - Color of the searchbar cancel button
|
||||
$searchbar-md-cancel-button-color: $text-color-step-100 !default;
|
||||
|
||||
/// @prop - Background color of the searchbar cancel button
|
||||
$searchbar-md-cancel-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Font size of the searchbar cancel button
|
||||
$searchbar-md-cancel-button-font-size: 1.8em !default;
|
||||
|
||||
/// @prop - Color of the searchbar input search icon
|
||||
$searchbar-md-input-search-icon-color: $text-color-step-200 !default;
|
||||
$searchbar-md-input-search-icon-color: $text-color-step-200 !default;
|
||||
|
||||
/// @prop - Svg for the searchbar input search icon
|
||||
$searchbar-md-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
|
||||
$searchbar-md-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
|
||||
|
||||
/// @prop - Size of the searchbar input search icon
|
||||
$searchbar-md-input-search-icon-size: 20px !default;
|
||||
$searchbar-md-input-search-icon-size: 20px !default;
|
||||
|
||||
/// @prop - Height of the searchbar input
|
||||
$searchbar-md-input-height: auto !default;
|
||||
$searchbar-md-input-height: auto !default;
|
||||
|
||||
/// @prop - Line height of the searchbar input
|
||||
$searchbar-md-input-line-height: 30px !default;
|
||||
$searchbar-md-input-line-height: 30px !default;
|
||||
|
||||
/// @prop - Box shadow of the searchbar input
|
||||
$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Color of the searchbar input placeholder
|
||||
$searchbar-md-input-placeholder-color: $placeholder-text-md-color !default;
|
||||
$searchbar-md-input-placeholder-color: $placeholder-text-md-color !default;
|
||||
|
||||
/// @prop - Color of the searchbar input text
|
||||
$searchbar-md-input-text-color: $text-md-color-step-100 !default;
|
||||
$searchbar-md-input-text-color: $text-md-color-step-100 !default;
|
||||
|
||||
/// @prop - Background of the searchbar input
|
||||
$searchbar-md-input-background-color: $background-md-color !default;
|
||||
$searchbar-md-input-background-color: $background-md-color !default;
|
||||
|
||||
/// @prop - Border radius of the searchbar input
|
||||
$searchbar-md-input-border-radius: 2px !default;
|
||||
$searchbar-md-input-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Color of the searchbar input clear icon
|
||||
$searchbar-md-input-clear-icon-color: $text-md-color-step-200 !default;
|
||||
$searchbar-md-input-clear-icon-color: $text-md-color-step-200 !default;
|
||||
|
||||
/// @prop - Svg for the searchbar input clear icon
|
||||
$searchbar-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
|
||||
$searchbar-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
|
||||
|
||||
/// @prop - Size of the searchbar input clear icon
|
||||
$searchbar-md-input-clear-icon-size: 22px !default;
|
||||
$searchbar-md-input-clear-icon-size: 22px !default;
|
||||
|
||||
@ -37,6 +37,8 @@ ion-searchbar {
|
||||
border: 0;
|
||||
font-family: inherit;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
|
||||
|
||||
import { createThemedClasses } from '../../utils/theme';
|
||||
import { debounce } from '../../utils/helpers';
|
||||
|
||||
|
||||
@ -13,9 +15,9 @@ import { debounce } from '../../utils/helpers';
|
||||
}
|
||||
})
|
||||
export class Searchbar {
|
||||
private _isCancelVisible = false;
|
||||
private _shouldBlur = true;
|
||||
private _shouldAlignLeft = true;
|
||||
private isCancelVisible = false;
|
||||
private shouldBlur = true;
|
||||
private shouldAlignLeft = true;
|
||||
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
@ -23,6 +25,77 @@ export class Searchbar {
|
||||
|
||||
@State() focused = false;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
/**
|
||||
* If true, enable searchbar animation. Default `false`.
|
||||
*/
|
||||
@Prop() animated = false;
|
||||
|
||||
/**
|
||||
* Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
|
||||
*/
|
||||
@Prop() autocomplete = 'off';
|
||||
|
||||
/**
|
||||
* Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
|
||||
*/
|
||||
@Prop() autocorrect = 'off';
|
||||
|
||||
/**
|
||||
* Set the the cancel button text. Default: `"Cancel"`.
|
||||
*/
|
||||
@Prop() cancelButtonText = 'Cancel';
|
||||
|
||||
/**
|
||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
|
||||
*/
|
||||
@Prop() debounce = 250;
|
||||
|
||||
@Watch('debounce')
|
||||
private debounceInput() {
|
||||
this.ionInput.emit = debounce(
|
||||
this.ionInput.emit.bind(this.ionInput),
|
||||
this.debounce
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the input's placeholder. Default `"Search"`.
|
||||
*/
|
||||
@Prop() placeholder = 'Search';
|
||||
|
||||
/**
|
||||
* If true, show the cancel button. Default `false`.
|
||||
*/
|
||||
@Prop() showCancelButton = false;
|
||||
|
||||
/**
|
||||
* If true, enable spellcheck on the input. Default `false`.
|
||||
*/
|
||||
@Prop() spellcheck = false;
|
||||
|
||||
/**
|
||||
* Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
|
||||
*/
|
||||
@Prop() type = 'search';
|
||||
|
||||
/**
|
||||
* the value of the searchbar.
|
||||
*/
|
||||
@Prop({ mutable: true }) value: string;
|
||||
|
||||
/**
|
||||
* Emitted when the Searchbar input has changed, including when it's cleared.
|
||||
@ -49,79 +122,6 @@ export class Searchbar {
|
||||
*/
|
||||
@Event() ionFocus: EventEmitter;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
/**
|
||||
* If true, enable searchbar animation. Default `false`.
|
||||
*/
|
||||
@Prop({ mutable: true }) animated = false;
|
||||
|
||||
/**
|
||||
* Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
|
||||
*/
|
||||
@Prop({ mutable: true }) autocomplete = 'off';
|
||||
|
||||
/**
|
||||
* Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
|
||||
*/
|
||||
@Prop({ mutable: true }) autocorrect = 'off';
|
||||
|
||||
/**
|
||||
* Set the the cancel button text. Default: `"Cancel"`.
|
||||
*/
|
||||
@Prop({ mutable: true }) cancelButtonText = 'Cancel';
|
||||
|
||||
/**
|
||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
|
||||
*/
|
||||
@Prop({ mutable: true }) debounce = 250;
|
||||
|
||||
@Watch('debounce')
|
||||
private debounceInput() {
|
||||
this.ionInput.emit = debounce(
|
||||
this.ionInput.emit.bind(this.ionInput),
|
||||
this.debounce
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the input's placeholder. Default `"Search"`.
|
||||
*/
|
||||
@Prop({ mutable: true }) placeholder = 'Search';
|
||||
|
||||
/**
|
||||
* If true, show the cancel button. Default `false`.
|
||||
*/
|
||||
@Prop({ mutable: true }) showCancelButton = false;
|
||||
|
||||
/**
|
||||
* If true, enable spellcheck on the input. Default `false`.
|
||||
*/
|
||||
@Prop({ mutable: true }) spellcheck = false;
|
||||
|
||||
/**
|
||||
* Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
|
||||
*/
|
||||
@Prop({ mutable: true }) type = 'search';
|
||||
|
||||
/**
|
||||
* the value of the searchbar.
|
||||
*/
|
||||
@Prop({ mutable: true }) value: string;
|
||||
|
||||
|
||||
componentDidLoad() {
|
||||
this.positionElements();
|
||||
this.debounceInput();
|
||||
@ -142,7 +142,7 @@ export class Searchbar {
|
||||
this.ionInput.emit({event: ev});
|
||||
}
|
||||
}, 16 * 4);
|
||||
this._shouldBlur = false;
|
||||
this.shouldBlur = false;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -154,15 +154,15 @@ export class Searchbar {
|
||||
this.ionCancel.emit({event: ev});
|
||||
|
||||
this.clearInput(ev);
|
||||
this._shouldBlur = true;
|
||||
this.shouldBlur = true;
|
||||
this.activated = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the Searchbar input value when the input changes
|
||||
*/
|
||||
inputChanged(ev: any) {
|
||||
this.value = ev.target.value;
|
||||
inputChanged(ev: Event) {
|
||||
this.value = ev.target && (ev.target as HTMLInputElement).value;
|
||||
this.ionInput.emit(ev);
|
||||
}
|
||||
|
||||
@ -186,11 +186,11 @@ export class Searchbar {
|
||||
inputBlurred() {
|
||||
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
|
||||
|
||||
// _shouldBlur determines if it should blur
|
||||
// shouldBlur determines if it should blur
|
||||
// if we are clearing the input we still want to stay focused in the input
|
||||
if (this._shouldBlur === false) {
|
||||
if (this.shouldBlur === false) {
|
||||
inputEl.focus();
|
||||
this._shouldBlur = true;
|
||||
this.shouldBlur = true;
|
||||
this.ionBlur.emit({this: this});
|
||||
this.inputUpdated();
|
||||
return;
|
||||
@ -218,15 +218,15 @@ export class Searchbar {
|
||||
* based on the input value and if it is focused. (ios only)
|
||||
*/
|
||||
positionElements() {
|
||||
const prevAlignLeft = this._shouldAlignLeft;
|
||||
const _shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true);
|
||||
this._shouldAlignLeft = _shouldAlignLeft;
|
||||
const prevAlignLeft = this.shouldAlignLeft;
|
||||
const shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true);
|
||||
this.shouldAlignLeft = shouldAlignLeft;
|
||||
|
||||
if (this.mode !== 'ios') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (prevAlignLeft !== _shouldAlignLeft) {
|
||||
if (prevAlignLeft !== shouldAlignLeft) {
|
||||
this.positionPlaceholder();
|
||||
}
|
||||
|
||||
@ -243,7 +243,7 @@ export class Searchbar {
|
||||
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
|
||||
const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
|
||||
|
||||
if (this._shouldAlignLeft) {
|
||||
if (this.shouldAlignLeft) {
|
||||
inputEl.removeAttribute('style');
|
||||
iconEl.removeAttribute('style');
|
||||
|
||||
@ -279,12 +279,12 @@ export class Searchbar {
|
||||
*/
|
||||
positionCancelButton() {
|
||||
const isRTL = document.dir === 'rtl';
|
||||
const cancelButton = this.el.querySelector('.searchbar-ios-cancel') as HTMLElement;
|
||||
const cancelButton = this.el.querySelector('.searchbar-cancel-button-ios') as HTMLElement;
|
||||
const shouldShowCancel = this.focused;
|
||||
|
||||
if (shouldShowCancel !== this._isCancelVisible) {
|
||||
if (shouldShowCancel !== this.isCancelVisible) {
|
||||
const cancelStyle = cancelButton.style;
|
||||
this._isCancelVisible = shouldShowCancel;
|
||||
this.isCancelVisible = shouldShowCancel;
|
||||
if (shouldShowCancel) {
|
||||
if (isRTL) {
|
||||
cancelStyle.marginLeft = '0';
|
||||
@ -311,26 +311,33 @@ export class Searchbar {
|
||||
'searchbar-animated': this.animated,
|
||||
'searchbar-has-value': (this.value !== undefined && this.value !== ''),
|
||||
'searchbar-show-cancel': this.showCancelButton,
|
||||
'searchbar-left-aligned': this._shouldAlignLeft,
|
||||
'searchbar-left-aligned': this.shouldAlignLeft,
|
||||
'searchbar-has-focus': this.focused
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// TODO remove the ion-buttons and replace with native buttons to remove
|
||||
// the button dependency
|
||||
render() {
|
||||
return [
|
||||
<div class='searchbar-input-container'>
|
||||
<ion-button
|
||||
const cancelButtonClasses = createThemedClasses(this.mode, this.color, 'searchbar-cancel-button');
|
||||
const searchIconClasses = createThemedClasses(this.mode, this.color, 'searchbar-search-icon');
|
||||
|
||||
const cancelButton =
|
||||
this.showCancelButton
|
||||
? <button
|
||||
tabindex={this.mode === 'ios' && !this.activated ? -1 : null}
|
||||
onClick={this.cancelSearchbar.bind(this)}
|
||||
onMouseDown={this.cancelSearchbar.bind(this)}
|
||||
fill='clear'
|
||||
color='dark'
|
||||
class='searchbar-md-cancel'>
|
||||
<ion-icon name='md-arrow-back'></ion-icon>
|
||||
</ion-button>
|
||||
<div class='searchbar-search-icon'></div>
|
||||
class={cancelButtonClasses}>
|
||||
{ this.mode === 'md'
|
||||
? <ion-icon name='md-arrow-back'></ion-icon>
|
||||
: this.cancelButtonText }
|
||||
</button>
|
||||
: null;
|
||||
|
||||
const searchbar: JSX.Element[] = [
|
||||
<div class='searchbar-input-container'>
|
||||
{ this.mode === 'md' ? cancelButton : null }
|
||||
<div class={searchIconClasses}></div>
|
||||
<input
|
||||
class='searchbar-input'
|
||||
onInput={this.inputChanged.bind(this)}
|
||||
@ -342,21 +349,18 @@ export class Searchbar {
|
||||
autoComplete={this.autocomplete}
|
||||
autoCorrect={this.autocorrect}
|
||||
spellCheck={this.spellcheck}/>
|
||||
<ion-button
|
||||
fill='clear'
|
||||
<button
|
||||
class='searchbar-clear-icon'
|
||||
onClick={this.clearInput.bind(this)}
|
||||
onMouseDown={this.clearInput.bind(this)}>
|
||||
</ion-button>
|
||||
</div>,
|
||||
<ion-button
|
||||
tabindex={this.activated ? 1 : -1}
|
||||
fill='clear'
|
||||
onClick={this.cancelSearchbar.bind(this)}
|
||||
onMouseDown={this.cancelSearchbar.bind(this)}
|
||||
class='searchbar-ios-cancel'>
|
||||
{this.cancelButtonText}
|
||||
</ion-button>
|
||||
</button>
|
||||
</div>
|
||||
];
|
||||
|
||||
if (this.mode === 'ios') {
|
||||
searchbar.push(cancelButton);
|
||||
}
|
||||
|
||||
return searchbar;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user