{ "name": "Material 3 Expressive Docs", "description": "Interactive documentation for Material 3 Expressive on Android. Every demo is the real Compose component.", "siteUrl": "https://m3e.ljzapps.app", "repository": "https://github.com/LJZApps/material-3-expressive-docs", "components": [ { "id": "button", "title": "Buttons", "category": "Actions", "status": "Expressive", "summary": "Let people take an action. Five types, five sizes, and shapes that morph when pressed.", "apis": [ "Button", "FilledTonalButton", "ElevatedButton", "OutlinedButton", "TextButton", "ButtonDefaults" ], "hasPlayground": true, "related": [ "connected-button-group", "icon-button", "split-button", "fab" ], "examples": [ "button-variants", "button-sizes", "button-icon", "button-shape" ], "parameters": [ { "name": "onClick", "type": "() -> Unit", "description": "Called when the button is clicked." }, { "name": "shapes", "type": "ButtonShapes", "default": "ButtonDefaults.shapes()", "description": "Resting and pressed shape. Use shapesFor(height) to match a size." }, { "name": "modifier", "type": "Modifier", "default": "Modifier", "description": "Apply a minimum height with heightIn to select a size." }, { "name": "enabled", "type": "Boolean", "default": "true", "description": "When false the button ignores input and uses disabled colors." }, { "name": "colors", "type": "ButtonColors", "default": "ButtonDefaults.buttonColors()", "description": "Container and content colors for enabled and disabled states." }, { "name": "contentPadding", "type": "PaddingValues", "default": "contentPaddingFor(MinHeight)", "description": "Use contentPaddingFor(height, hasStartIcon) for the matching padding." }, { "name": "interactionSource", "type": "MutableInteractionSource?", "default": "null", "description": "Observe or emit interactions such as press and hover." } ], "url": "https://m3e.ljzapps.app/#components/button", "markdown": "https://m3e.ljzapps.app/docs/components/button.md", "page": "https://m3e.ljzapps.app/components/button/" }, { "id": "button-group", "title": "Button group", "category": "Actions", "status": "Expressive", "summary": "Arranges related buttons and moves the ones that do not fit into an overflow menu.", "apis": [ "ButtonGroup", "ButtonGroupDefaults.OverflowIndicator", "clickableItem", "toggleableItem", "customItem" ], "hasPlayground": true, "related": [ "connected-button-group", "button", "split-button", "segmented-button" ], "examples": [ "button-group-overflow" ], "parameters": [ { "name": "overflowIndicator", "type": "@Composable (ButtonGroupMenuState) -> Unit", "description": "Shown when items do not fit. Use ButtonGroupDefaults.OverflowIndicator." }, { "name": "modifier", "type": "Modifier", "default": "Modifier", "description": "Constrain the width to control when overflow happens." }, { "name": "expandedRatio", "type": "Float", "default": "0.15f", "description": "How much a pressed item grows." }, { "name": "horizontalArrangement", "type": "Arrangement.Horizontal", "default": "ButtonGroupDefaults.HorizontalArrangement", "description": "Spacing between items." }, { "name": "verticalAlignment", "type": "Alignment.Vertical", "default": "Alignment.Top", "description": "Cross axis alignment of items." }, { "name": "content", "type": "ButtonGroupScope.() -> Unit", "description": "Declare items with clickableItem, toggleableItem and customItem." } ], "url": "https://m3e.ljzapps.app/#components/button-group", "markdown": "https://m3e.ljzapps.app/docs/components/button-group.md", "page": "https://m3e.ljzapps.app/components/button-group/" }, { "id": "connected-button-group", "title": "Connected button group", "category": "Actions", "status": "Expressive", "summary": "Toggle buttons that share one row and morph their shape on press and selection.", "apis": [ "ToggleButton", "ButtonGroupDefaults.connectedLeadingButtonShapes", "ButtonGroupDefaults.ConnectedSpaceBetween" ], "hasPlayground": false, "related": [ "button-group", "toggle-button", "segmented-button" ], "examples": [ "connected-group-single", "connected-group-multi", "connected-group-icons" ], "parameters": [], "url": "https://m3e.ljzapps.app/#components/connected-button-group", "markdown": "https://m3e.ljzapps.app/docs/components/connected-button-group.md", "page": "https://m3e.ljzapps.app/components/connected-button-group/" }, { "id": "toggle-button", "title": "Toggle button", "category": "Actions", "status": "Expressive", "summary": "A button that keeps a selected state and morphs between round and square when it changes.", "apis": [ "ToggleButton", "TonalToggleButton", "ElevatedToggleButton", "OutlinedToggleButton", "ToggleButtonDefaults" ], "hasPlayground": true, "related": [ "connected-button-group", "button", "icon-button" ], "examples": [ "toggle-variants" ], "parameters": [ { "name": "checked", "type": "Boolean", "description": "Whether the button is selected." }, { "name": "onCheckedChange", "type": "(Boolean) -> Unit", "description": "Called with the requested new state." }, { "name": "shapes", "type": "ToggleButtonShapes", "default": "ToggleButtonDefaults.shapesFor(MinHeight)", "description": "Resting, pressed and checked shapes. The button morphs between them." }, { "name": "colors", "type": "ToggleButtonColors", "default": "toggleButtonColors()", "description": "Container and content colors for checked and unchecked states." }, { "name": "contentPadding", "type": "PaddingValues", "default": "contentPaddingFor(MinHeight)", "description": "Padding that matches the height." } ], "url": "https://m3e.ljzapps.app/#components/toggle-button", "markdown": "https://m3e.ljzapps.app/docs/components/toggle-button.md", "page": "https://m3e.ljzapps.app/components/toggle-button/" }, { "id": "split-button", "title": "Split button", "category": "Actions", "status": "Expressive", "summary": "Pairs a primary action with a menu of related alternatives.", "apis": [ "SplitButtonLayout", "SplitButtonDefaults.LeadingButton", "SplitButtonDefaults.TrailingButton" ], "hasPlayground": true, "related": [ "button", "button-group", "menu" ], "examples": [ "split-button-basic" ], "parameters": [ { "name": "leadingButton", "type": "@Composable () -> Unit", "description": "The primary action." }, { "name": "trailingButton", "type": "@Composable () -> Unit", "description": "The toggle that opens the menu." }, { "name": "spacing", "type": "Dp", "default": "SplitButtonDefaults.Spacing", "description": "Gap between the two buttons." } ], "url": "https://m3e.ljzapps.app/#components/split-button", "markdown": "https://m3e.ljzapps.app/docs/components/split-button.md", "page": "https://m3e.ljzapps.app/components/split-button/" }, { "id": "icon-button", "title": "Icon button", "category": "Actions", "status": "Expressive", "summary": "A compact button that shows one icon. Four types, five sizes and three widths.", "apis": [ "IconButton", "FilledIconButton", "FilledTonalIconButton", "OutlinedIconButton", "IconToggleButton", "IconButtonDefaults" ], "hasPlayground": true, "related": [ "button", "toggle-button", "fab" ], "examples": [ "icon-button-variants", "icon-button-toggle" ], "parameters": [ { "name": "onClick", "type": "() -> Unit", "description": "Called when the button is clicked." }, { "name": "shapes", "type": "IconButtonShapes", "default": "IconButtonDefaults.shapes()", "description": "Resting and pressed shape." }, { "name": "modifier", "type": "Modifier", "default": "Modifier", "description": "Apply Modifier.size(containerSize) to choose a size and width." }, { "name": "colors", "type": "IconButtonColors", "default": "iconButtonColors()", "description": "Container and content colors." }, { "name": "content", "type": "@Composable () -> Unit", "description": "Usually a single Icon." } ], "url": "https://m3e.ljzapps.app/#components/icon-button", "markdown": "https://m3e.ljzapps.app/docs/components/icon-button.md", "page": "https://m3e.ljzapps.app/components/icon-button/" }, { "id": "fab", "title": "Floating action button", "category": "Actions", "status": "Expressive", "summary": "The primary action of a screen, in five sizes. The extended variant adds a label.", "apis": [ "FloatingActionButton", "SmallFloatingActionButton", "MediumFloatingActionButton", "LargeFloatingActionButton", "ExtendedFloatingActionButton" ], "hasPlayground": true, "related": [ "fab-menu", "button", "floating-toolbar" ], "examples": [ "fab-sizes", "fab-extended" ], "parameters": [ { "name": "onClick", "type": "() -> Unit", "description": "Called when the FAB is clicked." }, { "name": "containerColor", "type": "Color", "default": "FloatingActionButtonDefaults.containerColor", "description": "Use the container roles, such as primaryContainer." }, { "name": "expanded", "type": "Boolean", "default": "true", "description": "Extended FAB only. When false only the icon remains." }, { "name": "elevation", "type": "FloatingActionButtonElevation", "default": "elevation()", "description": "Shadow elevation for the FAB states." } ], "url": "https://m3e.ljzapps.app/#components/fab", "markdown": "https://m3e.ljzapps.app/docs/components/fab.md", "page": "https://m3e.ljzapps.app/components/fab/" }, { "id": "fab-menu", "title": "FAB menu", "category": "Actions", "status": "Expressive", "summary": "A FAB that opens into a stack of related actions.", "apis": [ "FloatingActionButtonMenu", "FloatingActionButtonMenuItem", "ToggleFloatingActionButton" ], "hasPlayground": true, "related": [ "fab", "split-button", "floating-toolbar" ], "examples": [ "fab-menu-basic" ], "parameters": [ { "name": "expanded", "type": "Boolean", "description": "Whether the items are visible." }, { "name": "button", "type": "@Composable () -> Unit", "description": "Usually a ToggleFloatingActionButton." }, { "name": "horizontalAlignment", "type": "Alignment.Horizontal", "default": "Alignment.End", "description": "Aligns the items with the button." }, { "name": "content", "type": "FloatingActionButtonMenuScope.() -> Unit", "description": "Declare FloatingActionButtonMenuItem entries." } ], "url": "https://m3e.ljzapps.app/#components/fab-menu", "markdown": "https://m3e.ljzapps.app/docs/components/fab-menu.md", "page": "https://m3e.ljzapps.app/components/fab-menu/" }, { "id": "segmented-button", "title": "Segmented button", "category": "Actions", "status": "Stable", "summary": "A row of two to five options for choosing one or several of them.", "apis": [ "SingleChoiceSegmentedButtonRow", "MultiChoiceSegmentedButtonRow", "SegmentedButton", "SegmentedButtonDefaults" ], "hasPlayground": true, "related": [ "connected-button-group", "toggle-button", "chips" ], "examples": [ "segmented-single", "segmented-multi" ], "parameters": [ { "name": "selected / checked", "type": "Boolean", "description": "Whether the segment is active." }, { "name": "shape", "type": "Shape", "description": "Use SegmentedButtonDefaults.itemShape(index, count)." }, { "name": "icon", "type": "@Composable () -> Unit", "default": "SegmentedButtonDefaults.Icon(selected)", "description": "Leading icon, by default a check mark when selected." }, { "name": "colors", "type": "SegmentedButtonColors", "default": "SegmentedButtonDefaults.colors()", "description": "Colors per state." } ], "url": "https://m3e.ljzapps.app/#components/segmented-button", "markdown": "https://m3e.ljzapps.app/docs/components/segmented-button.md", "page": "https://m3e.ljzapps.app/components/segmented-button/" }, { "id": "loading-indicator", "title": "Loading indicator", "category": "Communication", "status": "Expressive", "summary": "A morphing shape that shows an indeterminate wait of up to a few seconds.", "apis": [ "LoadingIndicator", "ContainedLoadingIndicator", "LoadingIndicatorDefaults" ], "hasPlayground": true, "related": [ "progress-indicator", "pull-to-refresh" ], "examples": [ "loading-variants", "loading-determinate" ], "parameters": [ { "name": "progress", "type": "() -> Float", "description": "Optional. When set, the indicator is determinate and morphs with the value from 0 to 1." }, { "name": "color", "type": "Color", "default": "LoadingIndicatorDefaults.indicatorColor", "description": "Color of the shape." }, { "name": "polygons", "type": "List", "default": "IndeterminateIndicatorPolygons", "description": "Shapes to morph between." }, { "name": "containerColor", "type": "Color", "default": "containedContainerColor", "description": "Contained only. Color of the container." } ], "url": "https://m3e.ljzapps.app/#components/loading-indicator", "markdown": "https://m3e.ljzapps.app/docs/components/loading-indicator.md", "page": "https://m3e.ljzapps.app/components/loading-indicator/" }, { "id": "progress-indicator", "title": "Progress indicator", "category": "Communication", "status": "Expressive", "summary": "Shows how far an operation has come, as a bar or a ring, flat or wavy.", "apis": [ "LinearProgressIndicator", "CircularProgressIndicator", "LinearWavyProgressIndicator", "CircularWavyProgressIndicator" ], "hasPlayground": true, "related": [ "loading-indicator", "pull-to-refresh", "slider" ], "examples": [ "progress-linear", "progress-circular" ], "parameters": [ { "name": "progress", "type": "() -> Float", "description": "Current value from 0 to 1. Omit for indeterminate." }, { "name": "amplitude", "type": "Float | (Float) -> Float", "default": "1f", "description": "Wave height. Pass a lambda to shape it by progress." }, { "name": "wavelength", "type": "Dp", "default": "WavyProgressIndicatorDefaults", "description": "Distance between wave peaks." }, { "name": "color / trackColor", "type": "Color", "default": "indicatorColor / trackColor", "description": "Colors of the active part and the track." } ], "url": "https://m3e.ljzapps.app/#components/progress-indicator", "markdown": "https://m3e.ljzapps.app/docs/components/progress-indicator.md", "page": "https://m3e.ljzapps.app/components/progress-indicator/" }, { "id": "badge", "title": "Badge", "category": "Communication", "status": "Stable", "summary": "A small marker that shows a status or a count on top of another element.", "apis": [ "BadgedBox", "Badge", "BadgeDefaults" ], "hasPlayground": true, "related": [ "navigation-bar", "icon-button" ], "examples": [ "badge-variants" ], "parameters": [ { "name": "badge", "type": "@Composable BoxScope.() -> Unit", "description": "The Badge to show on the anchor." }, { "name": "content", "type": "@Composable BoxScope.() -> Unit", "description": "The anchor, usually an Icon." }, { "name": "containerColor", "type": "Color", "default": "BadgeDefaults.containerColor", "description": "Badge color, error by default." } ], "url": "https://m3e.ljzapps.app/#components/badge", "markdown": "https://m3e.ljzapps.app/docs/components/badge.md", "page": "https://m3e.ljzapps.app/components/badge/" }, { "id": "snackbar", "title": "Snackbar", "category": "Communication", "status": "Stable", "summary": "A short message about a process that just happened, with an optional action.", "apis": [ "SnackbarHost", "SnackbarHostState", "Snackbar", "SnackbarDuration" ], "hasPlayground": true, "related": [ "dialog", "button" ], "examples": [ "snackbar-basic" ], "parameters": [ { "name": "message", "type": "String", "description": "Text to show." }, { "name": "actionLabel", "type": "String?", "default": "null", "description": "Label of the single action. Without one the snackbar is a plain message." }, { "name": "withDismissAction", "type": "Boolean", "default": "false", "description": "Adds a close icon." }, { "name": "duration", "type": "SnackbarDuration", "default": "Short, or Indefinite with an action", "description": "How long it stays." } ], "url": "https://m3e.ljzapps.app/#components/snackbar", "markdown": "https://m3e.ljzapps.app/docs/components/snackbar.md", "page": "https://m3e.ljzapps.app/components/snackbar/" }, { "id": "tooltip", "title": "Tooltip", "category": "Communication", "status": "Stable", "summary": "A short label or explanation that appears on hover, focus or long press.", "apis": [ "TooltipBox", "PlainTooltip", "RichTooltip", "TooltipDefaults", "rememberTooltipState" ], "hasPlayground": true, "related": [ "icon-button", "snackbar" ], "examples": [ "tooltip-plain", "tooltip-rich" ], "parameters": [ { "name": "positionProvider", "type": "PopupPositionProvider", "description": "Use TooltipDefaults.rememberTooltipPositionProvider(position)." }, { "name": "tooltip", "type": "@Composable TooltipScope.() -> Unit", "description": "PlainTooltip or RichTooltip." }, { "name": "state", "type": "TooltipState", "description": "rememberTooltipState(isPersistent = true) keeps a rich tooltip open." }, { "name": "hasAction", "type": "Boolean", "default": "false", "description": "Set to true when a rich tooltip contains an action." } ], "url": "https://m3e.ljzapps.app/#components/tooltip", "markdown": "https://m3e.ljzapps.app/docs/components/tooltip.md", "page": "https://m3e.ljzapps.app/components/tooltip/" }, { "id": "card", "title": "Card", "category": "Containment", "status": "Stable", "summary": "A container for content and actions about a single subject.", "apis": [ "Card", "ElevatedCard", "OutlinedCard", "CardDefaults" ], "hasPlayground": true, "related": [ "carousel", "list", "button" ], "examples": [ "card-types", "card-media" ], "parameters": [ { "name": "onClick", "type": "() -> Unit", "description": "Optional. Makes the whole card a button." }, { "name": "shape", "type": "Shape", "default": "CardDefaults.shape", "description": "Corner shape. Use shapes from the theme." }, { "name": "colors", "type": "CardColors", "default": "CardDefaults.cardColors()", "description": "Container and content colors." }, { "name": "elevation", "type": "CardElevation", "default": "CardDefaults.cardElevation()", "description": "Shadow per state." }, { "name": "content", "type": "@Composable ColumnScope.() -> Unit", "description": "Card content, laid out in a column." } ], "url": "https://m3e.ljzapps.app/#components/card", "markdown": "https://m3e.ljzapps.app/docs/components/card.md", "page": "https://m3e.ljzapps.app/components/card/" }, { "id": "carousel", "title": "Carousel", "category": "Containment", "status": "Expressive", "summary": "Scrolling collections of items whose sizes change as they move through the viewport.", "apis": [ "HorizontalMultiBrowseCarousel", "HorizontalUncontainedCarousel", "HorizontalCenteredHeroCarousel", "rememberCarouselState" ], "hasPlayground": true, "related": [ "card", "list" ], "examples": [ "carousel-multi", "carousel-uncontained" ], "parameters": [ { "name": "state", "type": "CarouselState", "description": "Create with rememberCarouselState { itemCount }." }, { "name": "preferredItemWidth / itemWidth", "type": "Dp", "description": "Target width of the large item." }, { "name": "itemSpacing", "type": "Dp", "default": "0.dp", "description": "Gap between items." }, { "name": "contentPadding", "type": "PaddingValues", "default": "PaddingValues(0.dp)", "description": "Padding around the carousel content." }, { "name": "content", "type": "@Composable CarouselItemScope.(Int) -> Unit", "description": "Item content. Use Modifier.maskClip(shape)." } ], "url": "https://m3e.ljzapps.app/#components/carousel", "markdown": "https://m3e.ljzapps.app/docs/components/carousel.md", "page": "https://m3e.ljzapps.app/components/carousel/" }, { "id": "dialog", "title": "Dialog", "category": "Containment", "status": "Stable", "summary": "A modal window for a decision or a small task that needs the user's attention.", "apis": [ "AlertDialog", "BasicAlertDialog", "AlertDialogDefaults" ], "hasPlayground": true, "related": [ "snackbar", "bottom-sheet", "button" ], "examples": [ "dialog-basic", "dialog-choice" ], "parameters": [ { "name": "onDismissRequest", "type": "() -> Unit", "description": "Called on scrim click, back or Escape." }, { "name": "confirmButton", "type": "@Composable () -> Unit", "description": "The affirmative action." }, { "name": "dismissButton", "type": "@Composable (() -> Unit)?", "default": "null", "description": "The neutral or negative action." }, { "name": "icon / title / text", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Optional content slots." }, { "name": "properties", "type": "DialogProperties", "default": "DialogProperties()", "description": "Dismiss on back and outside click, platform behavior." } ], "url": "https://m3e.ljzapps.app/#components/dialog", "markdown": "https://m3e.ljzapps.app/docs/components/dialog.md", "page": "https://m3e.ljzapps.app/components/dialog/" }, { "id": "bottom-sheet", "title": "Bottom sheet", "category": "Containment", "status": "Stable", "summary": "A surface anchored to the bottom edge for secondary content and actions.", "apis": [ "ModalBottomSheet", "BottomSheetScaffold", "rememberModalBottomSheetState", "BottomSheetDefaults" ], "hasPlayground": true, "related": [ "dialog", "list", "floating-toolbar" ], "examples": [ "sheet-modal", "sheet-standard" ], "parameters": [ { "name": "onDismissRequest", "type": "() -> Unit", "description": "Called when the sheet should close." }, { "name": "sheetState", "type": "SheetState", "default": "rememberModalBottomSheetState()", "description": "Controls expansion. skipPartiallyExpanded jumps straight to full height." }, { "name": "dragHandle", "type": "@Composable (() -> Unit)?", "default": "DragHandle()", "description": "Set to null to hide the handle." }, { "name": "sheetMaxWidth", "type": "Dp", "default": "BottomSheetDefaults.SheetMaxWidth", "description": "Limits the width on large windows." } ], "url": "https://m3e.ljzapps.app/#components/bottom-sheet", "markdown": "https://m3e.ljzapps.app/docs/components/bottom-sheet.md", "page": "https://m3e.ljzapps.app/components/bottom-sheet/" }, { "id": "navigation-bar", "title": "Navigation bar", "category": "Navigation", "status": "Expressive", "summary": "Switches between three to five top level destinations on compact windows.", "apis": [ "ShortNavigationBar", "ShortNavigationBarItem", "NavigationBar", "NavigationBarItem" ], "hasPlayground": true, "related": [ "navigation-rail", "navigation-drawer", "badge" ], "examples": [ "nav-bar-short", "nav-bar-legacy" ], "parameters": [ { "name": "arrangement", "type": "ShortNavigationBarArrangement", "default": "EqualWeight", "description": "EqualWeight fills the width, Centered groups items in the middle." }, { "name": "selected", "type": "Boolean", "description": "Item parameter. Marks the active destination." }, { "name": "icon / label", "type": "@Composable", "description": "Item parameters. The label may be null for icon only items." }, { "name": "iconPosition", "type": "NavigationItemIconPosition", "default": "Top", "description": "Top stacks icon above label, Start puts them side by side." } ], "url": "https://m3e.ljzapps.app/#components/navigation-bar", "markdown": "https://m3e.ljzapps.app/docs/components/navigation-bar.md", "page": "https://m3e.ljzapps.app/components/navigation-bar/" }, { "id": "navigation-rail", "title": "Navigation rail", "category": "Navigation", "status": "Expressive", "summary": "A vertical rail that collapses to icons or expands to full labels.", "apis": [ "WideNavigationRail", "WideNavigationRailItem", "rememberWideNavigationRailState", "ModalWideNavigationRail" ], "hasPlayground": false, "related": [ "navigation-bar", "navigation-drawer" ], "examples": [ "nav-rail-wide" ], "parameters": [ { "name": "state", "type": "WideNavigationRailState", "default": "rememberWideNavigationRailState()", "description": "Holds Collapsed or Expanded and animates between them." }, { "name": "header", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Slot for a menu button or a FAB." }, { "name": "railExpanded", "type": "Boolean", "description": "Item parameter. Must match the rail state." }, { "name": "arrangement", "type": "Arrangement.Vertical", "default": "WideNavigationRailDefaults.arrangement", "description": "Vertical placement of the items." } ], "url": "https://m3e.ljzapps.app/#components/navigation-rail", "markdown": "https://m3e.ljzapps.app/docs/components/navigation-rail.md", "page": "https://m3e.ljzapps.app/components/navigation-rail/" }, { "id": "navigation-drawer", "title": "Navigation drawer", "category": "Navigation", "status": "Stable", "summary": "A side panel with many destinations. Modal, dismissible or permanent.", "apis": [ "ModalNavigationDrawer", "DismissibleNavigationDrawer", "PermanentNavigationDrawer", "NavigationDrawerItem" ], "hasPlayground": false, "related": [ "navigation-rail", "navigation-bar", "top-app-bar" ], "examples": [ "drawer-permanent" ], "parameters": [ { "name": "drawerContent", "type": "@Composable () -> Unit", "description": "Usually a ModalDrawerSheet, DismissibleDrawerSheet or PermanentDrawerSheet." }, { "name": "drawerState", "type": "DrawerState", "default": "rememberDrawerState(Closed)", "description": "Modal and dismissible drawers only." }, { "name": "gesturesEnabled", "type": "Boolean", "default": "true", "description": "Allows opening and closing by swipe." } ], "url": "https://m3e.ljzapps.app/#components/navigation-drawer", "markdown": "https://m3e.ljzapps.app/docs/components/navigation-drawer.md", "page": "https://m3e.ljzapps.app/components/navigation-drawer/" }, { "id": "tabs", "title": "Tabs", "category": "Navigation", "status": "Stable", "summary": "Organize related content at one level of hierarchy and switch between views.", "apis": [ "PrimaryTabRow", "SecondaryTabRow", "PrimaryScrollableTabRow", "SecondaryScrollableTabRow", "Tab", "LeadingIconTab" ], "hasPlayground": true, "related": [ "navigation-bar", "segmented-button", "top-app-bar" ], "examples": [ "tabs-primary" ], "parameters": [ { "name": "selectedTabIndex", "type": "Int", "description": "Index of the active tab." }, { "name": "indicator", "type": "@Composable TabIndicatorScope.() -> Unit", "default": "PrimaryIndicator / SecondaryIndicator", "description": "Custom selection indicator." }, { "name": "Tab.text / icon", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Provide text, an icon or both." } ], "url": "https://m3e.ljzapps.app/#components/tabs", "markdown": "https://m3e.ljzapps.app/docs/components/tabs.md", "page": "https://m3e.ljzapps.app/components/tabs/" }, { "id": "top-app-bar", "title": "Top app bar", "category": "Navigation", "status": "Expressive", "summary": "Shows the screen title and the most important actions at the top of a screen.", "apis": [ "TopAppBar", "CenterAlignedTopAppBar", "MediumTopAppBar", "LargeTopAppBar", "MediumFlexibleTopAppBar", "LargeFlexibleTopAppBar", "TopAppBarDefaults" ], "hasPlayground": true, "related": [ "bottom-app-bar", "navigation-drawer", "search" ], "examples": [ "top-app-bar-basic" ], "parameters": [ { "name": "title", "type": "@Composable () -> Unit", "description": "The screen title." }, { "name": "subtitle", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Flexible variants only." }, { "name": "navigationIcon", "type": "@Composable () -> Unit", "default": "{}", "description": "Usually a back or menu button." }, { "name": "actions", "type": "@Composable RowScope.() -> Unit", "default": "{}", "description": "Up to three icon buttons, extra ones go to an overflow menu." }, { "name": "scrollBehavior", "type": "TopAppBarScrollBehavior?", "default": "null", "description": "Use together with Modifier.nestedScroll." } ], "url": "https://m3e.ljzapps.app/#components/top-app-bar", "markdown": "https://m3e.ljzapps.app/docs/components/top-app-bar.md", "page": "https://m3e.ljzapps.app/components/top-app-bar/" }, { "id": "bottom-app-bar", "title": "Bottom app bar", "category": "Navigation", "status": "Expressive", "summary": "Puts the most important actions of a screen within thumb reach.", "apis": [ "BottomAppBar", "FlexibleBottomAppBar", "BottomAppBarDefaults" ], "hasPlayground": true, "related": [ "floating-toolbar", "top-app-bar", "fab" ], "examples": [ "bottom-bar-classic", "bottom-bar-flexible" ], "parameters": [ { "name": "actions", "type": "@Composable RowScope.() -> Unit", "description": "Icon buttons shown at the start." }, { "name": "floatingActionButton", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Optional FAB at the end." }, { "name": "horizontalArrangement", "type": "Arrangement.Horizontal", "default": "FlexibleHorizontalArrangement", "description": "Flexible bar only." } ], "url": "https://m3e.ljzapps.app/#components/bottom-app-bar", "markdown": "https://m3e.ljzapps.app/docs/components/bottom-app-bar.md", "page": "https://m3e.ljzapps.app/components/bottom-app-bar/" }, { "id": "floating-toolbar", "title": "Floating toolbar", "category": "Navigation", "status": "Expressive", "summary": "A toolbar that floats above content with actions for the current context.", "apis": [ "HorizontalFloatingToolbar", "VerticalFloatingToolbar", "FloatingToolbarDefaults" ], "hasPlayground": true, "related": [ "bottom-app-bar", "fab", "icon-button" ], "examples": [ "toolbar-basic" ], "parameters": [ { "name": "expanded", "type": "Boolean", "description": "Whether all actions are visible. When false only the FAB remains." }, { "name": "colors", "type": "FloatingToolbarColors", "default": "standardFloatingToolbarColors()", "description": "Standard or vibrant." }, { "name": "scrollBehavior", "type": "FloatingToolbarScrollBehavior?", "default": "null", "description": "Collapse on scroll." }, { "name": "floatingActionButton", "type": "@Composable () -> Unit", "description": "Optional FAB, paired with the toolbar." } ], "url": "https://m3e.ljzapps.app/#components/floating-toolbar", "markdown": "https://m3e.ljzapps.app/docs/components/floating-toolbar.md", "page": "https://m3e.ljzapps.app/components/floating-toolbar/" }, { "id": "search", "title": "Search", "category": "Navigation", "status": "Expressive", "summary": "A search field that expands into a list of suggestions or results.", "apis": [ "AppBarWithSearch", "ExpandedDockedSearchBar", "ExpandedFullScreenSearchBar", "SearchBarDefaults.InputField", "rememberSearchBarState" ], "hasPlayground": false, "related": [ "top-app-bar", "chips", "list" ], "examples": [ "search-docked" ], "parameters": [ { "name": "state", "type": "SearchBarState", "description": "rememberSearchBarState(). Animates between Collapsed and Expanded." }, { "name": "inputField", "type": "@Composable () -> Unit", "description": "Usually SearchBarDefaults.InputField." }, { "name": "navigationIcon / actions", "type": "@Composable", "default": "null", "description": "AppBarWithSearch only." }, { "name": "content", "type": "@Composable ColumnScope.() -> Unit", "description": "Suggestions or results of the expanded bar." } ], "url": "https://m3e.ljzapps.app/#components/search", "markdown": "https://m3e.ljzapps.app/docs/components/search.md", "page": "https://m3e.ljzapps.app/components/search/" }, { "id": "checkbox", "title": "Checkbox", "category": "Selection and input", "status": "Stable", "summary": "Lets people select one or more items from a set, or turn an option on or off.", "apis": [ "Checkbox", "TriStateCheckbox", "CheckboxDefaults" ], "hasPlayground": true, "related": [ "switch", "radio-button", "chips" ], "examples": [ "checkbox-tristate" ], "parameters": [ { "name": "checked", "type": "Boolean", "description": "Whether the box is checked." }, { "name": "onCheckedChange", "type": "((Boolean) -> Unit)?", "description": "Pass null when a parent handles the toggle, for example Modifier.toggleable." }, { "name": "enabled", "type": "Boolean", "default": "true", "description": "Disables interaction." }, { "name": "colors", "type": "CheckboxColors", "default": "CheckboxDefaults.colors()", "description": "Box, check mark and border colors." } ], "url": "https://m3e.ljzapps.app/#components/checkbox", "markdown": "https://m3e.ljzapps.app/docs/components/checkbox.md", "page": "https://m3e.ljzapps.app/components/checkbox/" }, { "id": "radio-button", "title": "Radio button", "category": "Selection and input", "status": "Stable", "summary": "Lets people choose exactly one option from a short list.", "apis": [ "RadioButton", "RadioButtonDefaults", "Modifier.selectableGroup" ], "hasPlayground": true, "related": [ "checkbox", "segmented-button", "menu" ], "examples": [ "radio-group" ], "parameters": [ { "name": "selected", "type": "Boolean", "description": "Whether this option is selected." }, { "name": "onClick", "type": "(() -> Unit)?", "description": "Pass null when the row handles the click." }, { "name": "colors", "type": "RadioButtonColors", "default": "RadioButtonDefaults.colors()", "description": "Selected and unselected colors." } ], "url": "https://m3e.ljzapps.app/#components/radio-button", "markdown": "https://m3e.ljzapps.app/docs/components/radio-button.md", "page": "https://m3e.ljzapps.app/components/radio-button/" }, { "id": "switch", "title": "Switch", "category": "Selection and input", "status": "Stable", "summary": "Toggles one setting on or off, and applies the change immediately.", "apis": [ "Switch", "SwitchDefaults" ], "hasPlayground": true, "related": [ "checkbox", "toggle-button", "radio-button" ], "examples": [ "switch-basic" ], "parameters": [ { "name": "checked", "type": "Boolean", "description": "Whether the switch is on." }, { "name": "onCheckedChange", "type": "((Boolean) -> Unit)?", "description": "Pass null when a parent toggleable handles the change." }, { "name": "thumbContent", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Icon inside the thumb." }, { "name": "colors", "type": "SwitchColors", "default": "SwitchDefaults.colors()", "description": "Track, thumb and border colors." } ], "url": "https://m3e.ljzapps.app/#components/switch", "markdown": "https://m3e.ljzapps.app/docs/components/switch.md", "page": "https://m3e.ljzapps.app/components/switch/" }, { "id": "slider", "title": "Slider", "category": "Selection and input", "status": "Stable", "summary": "Picks a value or a range along a track. Continuous or in steps.", "apis": [ "Slider", "RangeSlider", "VerticalSlider", "SliderDefaults" ], "hasPlayground": true, "related": [ "progress-indicator", "text-field" ], "examples": [ "slider-continuous", "slider-range" ], "parameters": [ { "name": "value", "type": "Float", "description": "Current value." }, { "name": "onValueChange", "type": "(Float) -> Unit", "description": "Called continuously while dragging." }, { "name": "valueRange", "type": "ClosedFloatingPointRange", "default": "0f..1f", "description": "Minimum and maximum." }, { "name": "steps", "type": "Int", "default": "0", "description": "Number of discrete values between the ends." }, { "name": "onValueChangeFinished", "type": "(() -> Unit)?", "default": "null", "description": "Called once when the drag ends." } ], "url": "https://m3e.ljzapps.app/#components/slider", "markdown": "https://m3e.ljzapps.app/docs/components/slider.md", "page": "https://m3e.ljzapps.app/components/slider/" }, { "id": "chips", "title": "Chips", "category": "Selection and input", "status": "Stable", "summary": "Compact elements for filters, assistance, entered data and suggestions.", "apis": [ "AssistChip", "FilterChip", "InputChip", "SuggestionChip", "ElevatedAssistChip", "ElevatedFilterChip" ], "hasPlayground": true, "related": [ "button", "segmented-button", "text-field" ], "examples": [ "chips-filter", "chips-assist", "chips-input" ], "parameters": [ { "name": "selected", "type": "Boolean", "description": "Filter and input chips. Whether the chip is selected." }, { "name": "onClick", "type": "() -> Unit", "description": "Called on click." }, { "name": "label", "type": "@Composable () -> Unit", "description": "Chip text." }, { "name": "leadingIcon / trailingIcon", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Optional icons. Suggestion chips use icon." }, { "name": "elevation", "type": "ChipElevation?", "default": "default", "description": "Use the elevated variants for chips over images." } ], "url": "https://m3e.ljzapps.app/#components/chips", "markdown": "https://m3e.ljzapps.app/docs/components/chips.md", "page": "https://m3e.ljzapps.app/components/chips/" }, { "id": "text-field", "title": "Text field", "category": "Selection and input", "status": "Stable", "summary": "Lets people enter and edit text. Filled or outlined, with labels, icons and helper text.", "apis": [ "TextField", "OutlinedTextField", "SecureTextField", "TextFieldState" ], "hasPlayground": true, "related": [ "search", "menu", "date-picker" ], "examples": [ "text-field-basic", "text-field-secure" ], "parameters": [ { "name": "value / state", "type": "String | TextFieldState", "description": "The text, as a value or a state holder." }, { "name": "label", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Floats above the text when focused or filled." }, { "name": "supportingText", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Helper or error message below the field." }, { "name": "isError", "type": "Boolean", "default": "false", "description": "Switches to error colors." }, { "name": "leadingIcon / trailingIcon", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Icons inside the field." }, { "name": "keyboardOptions", "type": "KeyboardOptions", "default": "Default", "description": "Keyboard type and IME action." } ], "url": "https://m3e.ljzapps.app/#components/text-field", "markdown": "https://m3e.ljzapps.app/docs/components/text-field.md", "page": "https://m3e.ljzapps.app/components/text-field/" }, { "id": "menu", "title": "Menu", "category": "Selection and input", "status": "Expressive", "summary": "A temporary list of choices or actions that opens from a button or a field.", "apis": [ "DropdownMenu", "DropdownMenuPopup", "DropdownMenuGroup", "DropdownMenuItem", "ExposedDropdownMenuBox", "MenuDefaults" ], "hasPlayground": true, "related": [ "split-button", "icon-button", "text-field" ], "examples": [ "menu-standard", "menu-grouped", "menu-exposed" ], "parameters": [ { "name": "expanded", "type": "Boolean", "description": "Whether the menu is showing." }, { "name": "onDismissRequest", "type": "() -> Unit", "description": "Called on outside click or Escape." }, { "name": "offset", "type": "DpOffset", "default": "DpOffset(0.dp, 0.dp)", "description": "Moves the popup relative to its anchor." }, { "name": "DropdownMenuItem.leadingIcon", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Icon before the text." } ], "url": "https://m3e.ljzapps.app/#components/menu", "markdown": "https://m3e.ljzapps.app/docs/components/menu.md", "page": "https://m3e.ljzapps.app/components/menu/" }, { "id": "date-picker", "title": "Date picker", "category": "Selection and input", "status": "Stable", "summary": "Lets people choose a date or a range of dates, by calendar or by typing.", "apis": [ "DatePicker", "DatePickerDialog", "DateRangePicker", "rememberDatePickerState" ], "hasPlayground": true, "related": [ "time-picker", "text-field", "dialog" ], "examples": [ "date-dialog" ], "parameters": [ { "name": "state", "type": "DatePickerState", "description": "rememberDatePickerState(). Holds selectedDateMillis and the display mode." }, { "name": "initialDisplayMode", "type": "DisplayMode", "default": "Picker", "description": "Start in calendar or input mode." }, { "name": "selectableDates", "type": "SelectableDates", "default": "AllDates", "description": "Restricts selectable days and years." }, { "name": "yearRange", "type": "IntRange", "default": "DatePickerDefaults.YearRange", "description": "Selectable years." } ], "url": "https://m3e.ljzapps.app/#components/date-picker", "markdown": "https://m3e.ljzapps.app/docs/components/date-picker.md", "page": "https://m3e.ljzapps.app/components/date-picker/" }, { "id": "time-picker", "title": "Time picker", "category": "Selection and input", "status": "Expressive", "summary": "Lets people choose a time on a dial or by typing it.", "apis": [ "TimePicker", "TimeInput", "TimePickerDialog", "rememberTimePickerState" ], "hasPlayground": true, "related": [ "date-picker", "text-field", "dialog" ], "examples": [ "time-dialog" ], "parameters": [ { "name": "state", "type": "TimePickerState", "description": "rememberTimePickerState(initialHour, initialMinute, is24Hour)." }, { "name": "layoutType", "type": "TimePickerLayoutType", "default": "TimePickerDefaults.layoutType()", "description": "Vertical for portrait, Horizontal for landscape." }, { "name": "colors", "type": "TimePickerColors", "default": "TimePickerDefaults.colors()", "description": "Dial, selector and period selector colors." } ], "url": "https://m3e.ljzapps.app/#components/time-picker", "markdown": "https://m3e.ljzapps.app/docs/components/time-picker.md", "page": "https://m3e.ljzapps.app/components/time-picker/" }, { "id": "pull-to-refresh", "title": "Pull to refresh", "category": "Selection and input", "status": "Expressive", "summary": "Lets people reload a list by pulling it down, with a loading indicator as feedback.", "apis": [ "PullToRefreshBox", "PullToRefreshDefaults", "rememberPullToRefreshState" ], "hasPlayground": false, "related": [ "loading-indicator", "list", "progress-indicator" ], "examples": [ "pull-refresh" ], "parameters": [ { "name": "isRefreshing", "type": "Boolean", "description": "Show the indicator while true." }, { "name": "onRefresh", "type": "() -> Unit", "description": "Called when the pull passes the threshold." }, { "name": "indicator", "type": "@Composable BoxScope.() -> Unit", "default": "default indicator", "description": "Replace to customise." }, { "name": "state", "type": "PullToRefreshState", "default": "rememberPullToRefreshState()", "description": "Exposes the pull distance." } ], "url": "https://m3e.ljzapps.app/#components/pull-to-refresh", "markdown": "https://m3e.ljzapps.app/docs/components/pull-to-refresh.md", "page": "https://m3e.ljzapps.app/components/pull-to-refresh/" }, { "id": "divider", "title": "Divider", "category": "Containment", "status": "Stable", "summary": "A thin line that groups content in lists and layouts.", "apis": [ "HorizontalDivider", "VerticalDivider", "DividerDefaults" ], "hasPlayground": true, "related": [ "list", "card" ], "examples": [ "divider-basic" ], "parameters": [ { "name": "thickness", "type": "Dp", "default": "DividerDefaults.Thickness", "description": "Line thickness." }, { "name": "color", "type": "Color", "default": "DividerDefaults.color", "description": "Defaults to outlineVariant." } ], "url": "https://m3e.ljzapps.app/#components/divider", "markdown": "https://m3e.ljzapps.app/docs/components/divider.md", "page": "https://m3e.ljzapps.app/components/divider/" }, { "id": "list", "title": "List", "category": "Containment", "status": "Expressive", "summary": "Rows of related content with optional icons, supporting text and trailing controls.", "apis": [ "ListItem", "SegmentedListItem", "ListItemDefaults" ], "hasPlayground": true, "related": [ "card", "divider", "menu" ], "examples": [ "list-segmented", "list-checkable" ], "parameters": [ { "name": "headlineContent", "type": "@Composable () -> Unit", "description": "Main text. In the clickable overloads this is the trailing content lambda." }, { "name": "supportingContent", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Secondary text." }, { "name": "overlineContent", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Small text above the headline." }, { "name": "leadingContent / trailingContent", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Icons, avatars or controls." }, { "name": "shapes", "type": "ListItemShapes", "default": "ListItemDefaults.shapes()", "description": "Interactive overloads. Use segmentedShapes(index, count)." } ], "url": "https://m3e.ljzapps.app/#components/list", "markdown": "https://m3e.ljzapps.app/docs/components/list.md", "page": "https://m3e.ljzapps.app/components/list/" }, { "id": "extended-fab", "title": "Extended FAB", "category": "Actions", "status": "Expressive", "summary": "A floating action button with a text label, in four sizes, that collapses to its icon.", "apis": [ "ExtendedFloatingActionButton", "SmallExtendedFloatingActionButton", "MediumExtendedFloatingActionButton", "LargeExtendedFloatingActionButton" ], "hasPlayground": true, "related": [ "fab", "fab-menu", "button" ], "examples": [ "extended-fab-sizes", "extended-fab-collapse" ], "parameters": [ { "name": "text", "type": "@Composable () -> Unit", "description": "The label." }, { "name": "icon", "type": "@Composable () -> Unit", "description": "The icon, shown in both states." }, { "name": "expanded", "type": "Boolean", "default": "true", "description": "When false only the icon remains." }, { "name": "containerColor", "type": "Color", "default": "FloatingActionButtonDefaults.containerColor", "description": "Use a container color role." } ], "url": "https://m3e.ljzapps.app/#components/extended-fab", "markdown": "https://m3e.ljzapps.app/docs/components/extended-fab.md", "page": "https://m3e.ljzapps.app/components/extended-fab/" }, { "id": "scaffold", "title": "Scaffold", "category": "Layout and structure", "status": "Expressive", "summary": "The basic screen layout: top bar, bottom bar, FAB, snackbars and content.", "apis": [ "Scaffold", "FabPosition", "ScaffoldDefaults" ], "hasPlayground": true, "related": [ "top-app-bar", "bottom-app-bar", "snackbar", "list-detail" ], "examples": [ "scaffold-basic" ], "parameters": [ { "name": "topBar / bottomBar", "type": "@Composable () -> Unit", "default": "{}", "description": "App bar slots." }, { "name": "floatingActionButton", "type": "@Composable () -> Unit", "default": "{}", "description": "The FAB slot." }, { "name": "floatingActionButtonPosition", "type": "FabPosition", "default": "FabPosition.End", "description": "Start, End, Center or EndOverlay." }, { "name": "snackbarHost", "type": "@Composable () -> Unit", "default": "{}", "description": "Where snackbars appear." }, { "name": "content", "type": "@Composable (PaddingValues) -> Unit", "description": "Receives the inner padding." } ], "url": "https://m3e.ljzapps.app/#components/scaffold", "markdown": "https://m3e.ljzapps.app/docs/components/scaffold.md", "page": "https://m3e.ljzapps.app/components/scaffold/" }, { "id": "surface", "title": "Surface", "category": "Layout and structure", "status": "Stable", "summary": "The building block of every container: shape, color, border and elevation in one place.", "apis": [ "Surface", "MaterialTheme.colorScheme", "MaterialTheme.shapes" ], "hasPlayground": true, "related": [ "card", "scaffold" ], "examples": [ "surface-roles", "surface-selectable" ], "parameters": [ { "name": "color", "type": "Color", "default": "colorScheme.surface", "description": "Background. Content color is derived with contentColorFor." }, { "name": "shape", "type": "Shape", "default": "RectangleShape", "description": "Clip and background shape." }, { "name": "tonalElevation / shadowElevation", "type": "Dp", "default": "0.dp", "description": "Tonal tint and shadow." }, { "name": "onClick / selected / checked", "type": "overloads", "description": "Make the surface interactive." } ], "url": "https://m3e.ljzapps.app/#components/surface", "markdown": "https://m3e.ljzapps.app/docs/components/surface.md", "page": "https://m3e.ljzapps.app/components/surface/" }, { "id": "swipe-to-dismiss", "title": "Swipe to dismiss", "category": "Containment", "status": "Stable", "summary": "Reveals or triggers an action when an item is swiped sideways.", "apis": [ "SwipeToDismissBox", "rememberSwipeToDismissBoxState", "SwipeToDismissBoxValue" ], "hasPlayground": true, "related": [ "list", "snackbar", "menu" ], "examples": [ "swipe-basic" ], "parameters": [ { "name": "state", "type": "SwipeToDismissBoxState", "description": "rememberSwipeToDismissBoxState(). Exposes the direction and progress." }, { "name": "backgroundContent", "type": "@Composable RowScope.() -> Unit", "description": "Drawn behind the item during the swipe." }, { "name": "onDismiss", "type": "(SwipeToDismissBoxValue) -> Unit", "default": "{}", "description": "Called when the item was swiped past the threshold." }, { "name": "enableDismissFromStartToEnd / EndToStart", "type": "Boolean", "default": "true", "description": "Allowed directions." } ], "url": "https://m3e.ljzapps.app/#components/swipe-to-dismiss", "markdown": "https://m3e.ljzapps.app/docs/components/swipe-to-dismiss.md", "page": "https://m3e.ljzapps.app/components/swipe-to-dismiss/" }, { "id": "drag-handle", "title": "Drag handle", "category": "Layout and structure", "status": "Expressive", "summary": "A grabbable bar between two panes that lets people resize them.", "apis": [ "VerticalDragHandle", "VerticalDragHandleDefaults" ], "hasPlayground": false, "related": [ "list-detail", "supporting-pane" ], "examples": [ "drag-handle-split" ], "parameters": [ { "name": "modifier", "type": "Modifier", "default": "Modifier", "description": "Add Modifier.draggable to give the handle behavior." }, { "name": "sizes", "type": "DragHandleSizes", "default": "VerticalDragHandleDefaults.sizes()", "description": "Resting and pressed size." }, { "name": "shapes", "type": "DragHandleShapes", "default": "VerticalDragHandleDefaults.shapes()", "description": "Resting and pressed shape." }, { "name": "colors", "type": "DragHandleColors", "default": "VerticalDragHandleDefaults.colors()", "description": "Resting, pressed and dragged colors." } ], "url": "https://m3e.ljzapps.app/#components/drag-handle", "markdown": "https://m3e.ljzapps.app/docs/components/drag-handle.md", "page": "https://m3e.ljzapps.app/components/drag-handle/" }, { "id": "app-bar-row", "title": "App bar row", "category": "Layout and structure", "status": "Expressive", "summary": "A row of actions that moves what does not fit into an overflow menu.", "apis": [ "AppBarRow", "AppBarColumn", "AppBarOverflowIndicator" ], "hasPlayground": true, "related": [ "top-app-bar", "button-group", "bottom-app-bar" ], "examples": [ "app-bar-row" ], "parameters": [ { "name": "overflowIndicator", "type": "@Composable (AppBarMenuState) -> Unit", "default": "AppBarOverflowIndicator", "description": "Shown when items overflow." }, { "name": "maxItemCount", "type": "Int", "default": "Int.MAX_VALUE", "description": "Upper limit of visible actions." }, { "name": "content", "type": "AppBarRowScope.() -> Unit", "description": "clickableItem, toggleableItem and customItem." } ], "url": "https://m3e.ljzapps.app/#components/app-bar-row", "markdown": "https://m3e.ljzapps.app/docs/components/app-bar-row.md", "page": "https://m3e.ljzapps.app/components/app-bar-row/" }, { "id": "text", "title": "Text", "category": "Layout and structure", "status": "Stable", "summary": "Displays text with a style from the theme's type scale.", "apis": [ "Text", "MaterialTheme.typography", "TextStyle" ], "hasPlayground": true, "related": [ "list", "card" ], "examples": [ "text-styles" ], "parameters": [ { "name": "text", "type": "String | AnnotatedString", "description": "The content." }, { "name": "style", "type": "TextStyle", "default": "LocalTextStyle.current", "description": "Take it from MaterialTheme.typography." }, { "name": "color", "type": "Color", "default": "Color.Unspecified", "description": "Defaults to the content color of the surface." }, { "name": "maxLines / overflow", "type": "Int / TextOverflow", "default": "Int.MAX_VALUE / Clip", "description": "Limit and truncate long text." } ], "url": "https://m3e.ljzapps.app/#components/text", "markdown": "https://m3e.ljzapps.app/docs/components/text.md", "page": "https://m3e.ljzapps.app/components/text/" }, { "id": "icon", "title": "Icon", "category": "Communication", "status": "Stable", "summary": "Draws a vector or bitmap symbol that follows the content color.", "apis": [ "Icon", "LocalContentColor", "ImageVector" ], "hasPlayground": true, "related": [ "icon-button", "button", "badge" ], "examples": [ "icon-basic" ], "parameters": [ { "name": "imageVector / painter / bitmap", "type": "ImageVector | Painter | ImageBitmap", "description": "The image to draw." }, { "name": "contentDescription", "type": "String?", "description": "Accessible name. Use null only for decorative icons." }, { "name": "tint", "type": "Color", "default": "LocalContentColor.current", "description": "Tint color." } ], "url": "https://m3e.ljzapps.app/#components/icon", "markdown": "https://m3e.ljzapps.app/docs/components/icon.md", "page": "https://m3e.ljzapps.app/components/icon/" }, { "id": "list-detail", "title": "List-detail layout", "category": "Layout and structure", "status": "Expressive", "summary": "Shows a list and the selected item side by side, or one after the other on small windows.", "apis": [ "ListDetailPaneScaffold", "AnimatedPane", "rememberListDetailPaneScaffoldNavigator", "ListDetailPaneScaffoldRole" ], "hasPlayground": false, "related": [ "supporting-pane", "navigation-rail", "drag-handle" ], "examples": [ "list-detail" ], "parameters": [ { "name": "directive", "type": "PaneScaffoldDirective", "default": "navigator.scaffoldDirective", "description": "Derived from the window size class and posture." }, { "name": "scaffoldState", "type": "ThreePaneScaffoldState", "default": "navigator.scaffoldState", "description": "Which panes are visible." }, { "name": "listPane / detailPane", "type": "@Composable ThreePaneScaffoldPaneScope.() -> Unit", "description": "Wrap content in AnimatedPane." }, { "name": "extraPane", "type": "@Composable (...)?", "default": "null", "description": "Optional third pane for large windows." } ], "url": "https://m3e.ljzapps.app/#components/list-detail", "markdown": "https://m3e.ljzapps.app/docs/components/list-detail.md", "page": "https://m3e.ljzapps.app/components/list-detail/" }, { "id": "supporting-pane", "title": "Supporting pane layout", "category": "Layout and structure", "status": "Expressive", "summary": "A primary pane with a secondary pane of related content next to it.", "apis": [ "SupportingPaneScaffold", "AnimatedPane", "rememberSupportingPaneScaffoldNavigator" ], "hasPlayground": false, "related": [ "list-detail", "drag-handle", "bottom-sheet" ], "examples": [ "supporting-pane" ], "parameters": [ { "name": "mainPane", "type": "@Composable ThreePaneScaffoldPaneScope.() -> Unit", "description": "The primary content." }, { "name": "supportingPane", "type": "@Composable ThreePaneScaffoldPaneScope.() -> Unit", "description": "Related content." }, { "name": "extraPane", "type": "@Composable (...)?", "default": "null", "description": "Optional third pane." } ], "url": "https://m3e.ljzapps.app/#components/supporting-pane", "markdown": "https://m3e.ljzapps.app/docs/components/supporting-pane.md", "page": "https://m3e.ljzapps.app/components/supporting-pane/" }, { "id": "modal-navigation-drawer", "title": "Modal and dismissible drawer", "category": "Navigation", "status": "Stable", "summary": "A navigation panel that slides over the content or pushes it aside, and can be closed again.", "apis": [ "ModalNavigationDrawer", "DismissibleNavigationDrawer", "ModalDrawerSheet", "DismissibleDrawerSheet", "rememberDrawerState" ], "hasPlayground": true, "related": [ "navigation-drawer", "navigation-rail", "modal-navigation-rail" ], "examples": [ "drawer-modal" ], "parameters": [ { "name": "drawerState", "type": "DrawerState", "default": "rememberDrawerState(Closed)", "description": "Open, close and observe the drawer." }, { "name": "gesturesEnabled", "type": "Boolean", "default": "true", "description": "Swipe to open and close." }, { "name": "drawerContent", "type": "@Composable () -> Unit", "description": "The sheet with NavigationDrawerItems." }, { "name": "scrimColor", "type": "Color", "default": "DrawerDefaults.scrimColor", "description": "Modal drawer only." } ], "url": "https://m3e.ljzapps.app/#components/modal-navigation-drawer", "markdown": "https://m3e.ljzapps.app/docs/components/modal-navigation-drawer.md", "page": "https://m3e.ljzapps.app/components/modal-navigation-drawer/" }, { "id": "modal-navigation-rail", "title": "Modal navigation rail", "category": "Navigation", "status": "Expressive", "summary": "A rail that expands over the content as a modal panel and collapses back to icons.", "apis": [ "ModalWideNavigationRail", "WideNavigationRailItem", "rememberWideNavigationRailState" ], "hasPlayground": true, "related": [ "navigation-rail", "modal-navigation-drawer", "navigation-bar" ], "examples": [ "modal-rail" ], "parameters": [ { "name": "state", "type": "WideNavigationRailState", "default": "rememberWideNavigationRailState()", "description": "Collapsed or Expanded." }, { "name": "hideOnCollapse", "type": "Boolean", "default": "false", "description": "Remove the rail when collapsed." }, { "name": "header", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Menu button or FAB." }, { "name": "railExpanded", "type": "Boolean", "description": "Item parameter, must match the state." } ], "url": "https://m3e.ljzapps.app/#components/modal-navigation-rail", "markdown": "https://m3e.ljzapps.app/docs/components/modal-navigation-rail.md", "page": "https://m3e.ljzapps.app/components/modal-navigation-rail/" }, { "id": "full-screen-search", "title": "Docked and full-screen search", "category": "Navigation", "status": "Expressive", "summary": "Two ways to show search results: in a dropdown under the field or on a full-screen surface.", "apis": [ "DockedSearchBar", "SearchBar", "ExpandedFullScreenSearchBar", "SearchBarDefaults.InputField" ], "hasPlayground": false, "related": [ "search", "top-app-bar", "text-field" ], "examples": [ "search-docked-legacy", "search-fullscreen" ], "parameters": [ { "name": "state", "type": "SearchBarState", "description": "Full screen variant. Animates between Collapsed and Expanded." }, { "name": "expanded / onExpandedChange", "type": "Boolean / (Boolean) -> Unit", "description": "Docked variant state." }, { "name": "inputField", "type": "@Composable () -> Unit", "description": "SearchBarDefaults.InputField." }, { "name": "content", "type": "@Composable ColumnScope.() -> Unit", "description": "Suggestions or results." } ], "url": "https://m3e.ljzapps.app/#components/full-screen-search", "markdown": "https://m3e.ljzapps.app/docs/components/full-screen-search.md", "page": "https://m3e.ljzapps.app/components/full-screen-search/" }, { "id": "secure-text-field", "title": "Password field", "category": "Selection and input", "status": "Stable", "summary": "A text field that hides what is typed and can reveal it on request.", "apis": [ "SecureTextField", "OutlinedSecureTextField", "TextObfuscationMode" ], "hasPlayground": true, "related": [ "text-field", "icon-button" ], "examples": [ "secure-field" ], "parameters": [ { "name": "state", "type": "TextFieldState", "description": "Holds the secret text." }, { "name": "textObfuscationMode", "type": "TextObfuscationMode", "default": "RevealLastTyped", "description": "Hidden, RevealLastTyped or Visible." }, { "name": "trailingIcon", "type": "@Composable (() -> Unit)?", "default": "null", "description": "Place the visibility toggle here." } ], "url": "https://m3e.ljzapps.app/#components/secure-text-field", "markdown": "https://m3e.ljzapps.app/docs/components/secure-text-field.md", "page": "https://m3e.ljzapps.app/components/secure-text-field/" }, { "id": "autocomplete", "title": "Autocomplete", "category": "Selection and input", "status": "Stable", "summary": "A text field that suggests matching options while the user types.", "apis": [ "ExposedDropdownMenuBox", "ExposedDropdownMenuAnchorType.PrimaryEditable", "ExposedDropdownMenuDefaults" ], "hasPlayground": true, "related": [ "menu", "text-field", "search" ], "examples": [ "autocomplete" ], "parameters": [ { "name": "expanded / onExpandedChange", "type": "Boolean / (Boolean) -> Unit", "description": "Menu state." }, { "name": "menuAnchor type", "type": "ExposedDropdownMenuAnchorType", "default": "PrimaryNotEditable", "description": "Use PrimaryEditable for typing." }, { "name": "options", "type": "List", "description": "Filtered by the text field value." } ], "url": "https://m3e.ljzapps.app/#components/autocomplete", "markdown": "https://m3e.ljzapps.app/docs/components/autocomplete.md", "page": "https://m3e.ljzapps.app/components/autocomplete/" }, { "id": "date-range-picker", "title": "Date range picker", "category": "Selection and input", "status": "Stable", "summary": "Lets people pick a start and an end date on a scrolling calendar.", "apis": [ "DateRangePicker", "rememberDateRangePickerState", "DatePickerDialog" ], "hasPlayground": true, "related": [ "date-picker", "time-picker", "dialog" ], "examples": [ "date-range-dialog" ], "parameters": [ { "name": "state", "type": "DateRangePickerState", "description": "Exposes selectedStartDateMillis and selectedEndDateMillis." }, { "name": "selectableDates", "type": "SelectableDates", "default": "AllDates", "description": "Restrict dates." }, { "name": "showModeToggle", "type": "Boolean", "default": "true", "description": "Switch between calendar and input." } ], "url": "https://m3e.ljzapps.app/#components/date-range-picker", "markdown": "https://m3e.ljzapps.app/docs/components/date-range-picker.md", "page": "https://m3e.ljzapps.app/components/date-range-picker/" }, { "id": "vertical-slider", "title": "Vertical slider", "category": "Selection and input", "status": "Expressive", "summary": "A slider that runs top to bottom, for levels, equalizers and mixers.", "apis": [ "VerticalSlider", "rememberSliderState", "SliderState" ], "hasPlayground": true, "related": [ "slider", "progress-indicator" ], "examples": [ "vertical-slider" ], "parameters": [ { "name": "state", "type": "SliderState", "description": "rememberSliderState(value, steps, valueRange)." }, { "name": "reverseDirection", "type": "Boolean", "default": "false", "description": "Puts the minimum at the top." }, { "name": "modifier", "type": "Modifier", "default": "Modifier", "description": "Give the slider a height." } ], "url": "https://m3e.ljzapps.app/#components/vertical-slider", "markdown": "https://m3e.ljzapps.app/docs/components/vertical-slider.md", "page": "https://m3e.ljzapps.app/components/vertical-slider/" } ], "foundations": [ { "id": "getting-started", "title": "Getting started", "summary": "Add Material 3 Expressive to a Compose project in a few lines.", "url": "https://m3e.ljzapps.app/#foundations/getting-started", "markdown": "https://m3e.ljzapps.app/docs/foundations/getting-started.md", "page": "https://m3e.ljzapps.app/foundations/getting-started/" }, { "id": "ai-agents", "title": "For AI agents", "summary": "An MCP server, llms.txt, markdown pages and in-page tools, so coding agents read these docs instead of guessing.", "url": "https://m3e.ljzapps.app/#foundations/ai-agents", "markdown": "https://m3e.ljzapps.app/docs/foundations/ai-agents.md", "page": "https://m3e.ljzapps.app/foundations/ai-agents/" }, { "id": "theming", "title": "Theming", "summary": "MaterialTheme, dynamic color and how to build a scheme from one seed color.", "url": "https://m3e.ljzapps.app/#foundations/theming", "markdown": "https://m3e.ljzapps.app/docs/foundations/theming.md", "page": "https://m3e.ljzapps.app/foundations/theming/" }, { "id": "color", "title": "Color", "summary": "A full color scheme is generated from one seed color. Roles, not hex values, carry the meaning.", "url": "https://m3e.ljzapps.app/#foundations/color", "markdown": "https://m3e.ljzapps.app/docs/foundations/color.md", "page": "https://m3e.ljzapps.app/foundations/color/" }, { "id": "typography", "title": "Typography", "summary": "Fifteen baseline styles, fifteen emphasized variants, one typeface.", "url": "https://m3e.ljzapps.app/#foundations/typography", "markdown": "https://m3e.ljzapps.app/docs/foundations/typography.md", "page": "https://m3e.ljzapps.app/foundations/typography/" }, { "id": "shape", "title": "Shape", "summary": "A corner radius scale plus 35 expressive shapes that components can morph between.", "url": "https://m3e.ljzapps.app/#foundations/shape", "markdown": "https://m3e.ljzapps.app/docs/foundations/shape.md", "page": "https://m3e.ljzapps.app/foundations/shape/" }, { "id": "elevation", "title": "Elevation", "summary": "Depth comes from tonal surface colors first and from shadows only where separation is needed.", "url": "https://m3e.ljzapps.app/#foundations/elevation", "markdown": "https://m3e.ljzapps.app/docs/foundations/elevation.md", "page": "https://m3e.ljzapps.app/foundations/elevation/" }, { "id": "motion", "title": "Motion", "summary": "Springs replace fixed easing curves. Two schemes ship: standard and expressive.", "url": "https://m3e.ljzapps.app/#foundations/motion", "markdown": "https://m3e.ljzapps.app/docs/foundations/motion.md", "page": "https://m3e.ljzapps.app/foundations/motion/" }, { "id": "layout", "title": "Layout", "summary": "Window size classes decide which navigation and how many panes a screen shows.", "url": "https://m3e.ljzapps.app/#foundations/layout", "markdown": "https://m3e.ljzapps.app/docs/foundations/layout.md", "page": "https://m3e.ljzapps.app/foundations/layout/" }, { "id": "interaction-states", "title": "Interaction states", "summary": "Hover, focus, press and drag states, and how to observe them.", "url": "https://m3e.ljzapps.app/#foundations/interaction-states", "markdown": "https://m3e.ljzapps.app/docs/foundations/interaction-states.md", "page": "https://m3e.ljzapps.app/foundations/interaction-states/" }, { "id": "iconography", "title": "Iconography", "summary": "Material Symbols, sizes and how icons take their color.", "url": "https://m3e.ljzapps.app/#foundations/iconography", "markdown": "https://m3e.ljzapps.app/docs/foundations/iconography.md", "page": "https://m3e.ljzapps.app/foundations/iconography/" }, { "id": "adaptive-design", "title": "Adaptive design", "summary": "Layouts that respond to window size, posture and input.", "url": "https://m3e.ljzapps.app/#foundations/adaptive-design", "markdown": "https://m3e.ljzapps.app/docs/foundations/adaptive-design.md", "page": "https://m3e.ljzapps.app/foundations/adaptive-design/" }, { "id": "accessibility", "title": "Accessibility", "summary": "Contrast, touch targets, semantics and focus are part of every component.", "url": "https://m3e.ljzapps.app/#foundations/accessibility", "markdown": "https://m3e.ljzapps.app/docs/foundations/accessibility.md", "page": "https://m3e.ljzapps.app/foundations/accessibility/" } ] }