包含式组件用于保存信息和操作,包括按钮、菜单或条状标签等其他组件。大多数 Material 组件使用显式包含机制,将相关内容和操作与视觉对象组合在一起:卡片、对话框、底部动作条、侧边动作条、轮播界面和提示。
提供列表时,可以采用隐式包含关系,也可以显示可见的分隔线来显式提供。这些组件提供了用于显示内容组的通用模式。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-07-27。"],[],[],null,["# Material Components\n\nA design system is a collection of reusable design decisions expressed as\nguidance, components, and patterns. The system can be broken down into smallest\ndesign primitives: things like color, type, or shape which build into larger\ncomplex component pieces. For example, an icon and text label make up a button\ncomponent, while multiple buttons and a surface make up a card. Design systems\nalso come with a set of guidance composed of these existing design decisions\naround the components and patterns.\n\nMaterial Design is an open-source design system developed by Google to help you\nbuild beautiful user-focused products. Material 3 is the latest iteration of\nMaterial Design.\n\nMaterial Design Components\n--------------------------\n\nMaterial Design provides an array of code-backed [components](https://m3.material.io/components)\nthat are interactive building blocks for creating a user interface. These components\ncan be organized into five categories based on their purpose:\naction, containment, navigation, selection, and text input.\n\n### Action components\n\nAction components help people achieve an aim.\n\nMaterial has multiple types of [buttons](https://m3.material.io/components/buttons/overview) to help define priority\nof actions and interaction in different contexts. From [FABs](https://m3.material.io/components/floating-action-button/overview) or\n[extended FABs](https://m3.material.io/components/extended-fab/overview) for primary actions to supporting [icon\nbuttons](https://m3.material.io/components/icon-buttons/overview) to selecting options with [segmented\nbuttons](https://m3.material.io/components/segmented-buttons/overview).\n**Figure 1:** Action Components\n\n### Communication components\n\nCommunication components provide helpful information, by alerting users with\n[badges](https://m3.material.io/components/badges), informing of status through [progress\nindicators](https://m3.material.io/components/progress-indicators), and providing brief process messages with\n[snackbars](https://m3.material.io/components/snackbar).\n**Figure 2:** Communication\n\n### Containment components\n\nContainment components hold information and actions -- including other\ncomponents like buttons, menus, or chips. Most Material components use explicit\ncontainment, grouping together related content and actions with visual objects:\n[cards](https://m3.material.io/components/cards), [dialogs](https://m3.material.io/components/dialogs), [bottom\nsheets](https://m3.material.io/components/bottom-sheets), [side sheets](https://m3.material.io/components/side-sheets),\n[carousels](https://m3.material.io/components/carousel), and [tooltips](https://m3.material.io/components/tooltips).\n[Lists](https://m3.material.io/components/lists) can be provided with implicit containment or explicit by\nshowing visible [dividers](https://m3.material.io/components/divider). These components provide common\npatterns for displaying groups of content.\n**Figure 3:** Containment\n\n### Navigation components\n\nNavigation components help people move through the UI. For mobile, the\n[navigation bar](https://m3.material.io/components/navigation-bar) or [navigation drawer](https://m3.material.io/components/navigation-drawer)\ncontain your primary navigation destinations. [Tabs](https://m3.material.io/components/tabs),\n[the bottom app bar](https://m3.material.io/components/bottom-app-bar), and [the top app bar](https://m3.material.io/components/top-app-bar)\nprovide different ways to navigate supporting information\nand actions. Read more about how to work with\nnavigation within your [layouts](/design/ui/mobile/guides/layout-and-content/layout-basics).\n**Figure 4:** Navigation\n\n### Selection components\n\nSelection components let people specify choices. Whether building out a form\nwith [checkboxes](https://m3.material.io/components/checkbox) and [radio buttons](https://m3.material.io/components/radio-button), filtering\nusing [chips](https://m3.material.io/components/chips), or toggling settings with\n[switches](https://m3.material.io/components/switch) and [sliders](https://m3.material.io/components/sliders), selection components\nallow users to control and input their decisions.\n**Figure 5:** Selection\n\n### Text input components\n\nText input components let people enter and edit text. [Text\nfields](https://m3.material.io/components/text-fields) allow users to enter text into a UI.\n**Figure 6:** Text Input\n\nDesign systems for Compose\n--------------------------\n\nRead [Design systems in Compose](/jetpack/compose/designsystems) for details about how to use Compose to\nmore smoothly implement a design system and give your app a consistent look and\nfeel with theming, components, and other aspects of the design system."]]