Skip to content

Instantly share code, notes, and snippets.

@tnishimura

tnishimura/index.html

Last active February 7, 2020 02:02
Show Gist options
  • Save tnishimura/c8d01c199c28100e5ec85967ead6fa95 to your computer and use it in GitHub Desktop.
Save tnishimura/c8d01c199c28100e5ec85967ead6fa95 to your computer and use it in GitHub Desktop.
Download ZIP
--box-shadow on ion-searchbar does nothing. This gist was created by taking the example at https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/searchbar/index.html, changing the cdn links to 4.11.10, and applying the --box-shadow style to the ion-searchbar (via the red-box class).
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searchbar</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.11.10/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.11.10/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.11.10/css/ionic.bundle.css"/>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Searchbar</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar class="red-box"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-list>
<!-- removed a few countries... -->
<ion-item>Amsterdam</ion-item>
<ion-item>Bogota</ion-item>
<ion-item>Uelzen</ion-item>
<ion-item>Washington</ion-item>
</ion-list>
</ion-content>
</ion-app>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
.red-box {
--box-shadow: 0 2px 2px 0 rgba(255, 0, 0, 0.14), 0 3px 1px -2px rgba(255, 0, 0, 0.2), 0 1px 5px 0 rgba(255, 0, 0, 0.12);
}
</style>
<script>
const searchbar = document.querySelector('ion-searchbar');
const items = Array.from(document.querySelector('ion-list').children);
searchbar.addEventListener('ionInput', handleInput);
function handleInput(event) {
const query = event.target.value.toLowerCase();
requestAnimationFrame(() => {
items.forEach(item => {
const shouldShow = item.textContent.toLowerCase().indexOf(query) > -1;
item.style.display = shouldShow ? 'block' : 'none';
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment