M3

App bars

App bars are placed at the top of the screen to help people navigate through a product

Search App Bar

9:41

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mi vel tortor porta malesuada. Quisque sit amet massa et velit cursus suscipit nec ac ligula. Etiam mollis gravida leo, eu sollicitudin risus imperdiet ac. Quisque mollis lacinia dui, eget accumsan metus condimentum non. Fusce semper neque at nulla placerat molestie. Integer suscipit mi sapien, a placerat nisi ultricies vitae. Sed suscipit fringilla urna at tincidunt. Phasellus et quam erat. Ut sit amet magna leo. Nulla porttitor lorem eu lorem luctus convallis.

Vivamus imperdiet magna ac est condimentum luctus in vitae purus. Nam vestibulum orci eu massa bibendum, nec vestibulum quam varius. Vestibulum non hendrerit mauris. Sed nec nulla magna. Ut luctus vestibulum sodales. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc et quam mollis, pharetra odio vitae, efficitur tellus. Nulla fringilla sem quis est venenatis, eget faucibus diam varius. Nullam pulvinar orci quis orci porttitor euismod. Sed vulputate augue at faucibus ultrices. Mauris eu ante feugiat, aliquam lectus nec, cursus nisi. Duis pulvinar egestas ligula eu luctus.

 
import { createScrollPosition } from "@solid-primitives/scroll";
import { MenuIcon, UserIcon, LoremIpsum } from "your-components";
import {
	AppBar,
	AppBarSearchBox,
	IconButton,
	LeadingElement,
	TrailingElementGroup,
	TrailingElement
} from "@m3-components/solid";

const App = () => {
	let container;
	const [scrolling, setScrolling] = createSignal(false);
	const scroll = createScrollPosition(() => container);

	createEffect(() => {
		const currentPos = scroll.y;
		if (currentPos > 10) {
			setScrolling(true);
		} else {
			setScrolling(false);
		}
	});

	return (
		<div ref={container}>
			<AppBar variant="search" scrolling={scrolling}>
				<LeadingElement>
					<IconButton>
						<MenuIcon />
					</IconButton>
				</LeadingElement>
				<AppBarSearchBox placeholder="Search" scrolling={scrolling} />
				<TrailingElementGroup>
					<TrailingElement>
						<IconButton>
							<UserIcon />
						</IconButton>
					</TrailingElement>
				</TrailingElementGroup>
			</AppBar>
			<LoremIpsum />
		</div>
	);
};