تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
نظام التصميم هو مجموعة من قرارات التصميم القابلة لإعادة الاستخدام،
والتي يتم التعبير عنها كإرشادات ومكونات وأنماط. يمكن تقسيم النظام إلى أصغر مبادئ تصميم
أساسية: أشياء مثل اللون أو النوع أو الشكل التي تبني إلى أجزاء مكونة أكبر
معقّدة. على سبيل المثال، يشكل الرمز والتسمية النصية مكونًا
من الأزرار، بينما تشكل الأزرار المتعددة والسطح بطاقة. تأتي أنظمة التصميم أيضًا مع مجموعة من الإرشادات تتألف من قرارات التصميم الحالية
حول المكونات والأنماط.
Material Design هو نظام تصميم مفتوح المصدر طوّرته Google لمساعدتك في إنشاء منتجات جميلة تركز على المستخدم. Material 3 هو أحدث تكرار
لتصميم Material Design.
مكونات التصميم متعدد الأبعاد
يوفر Material Design مجموعة من المكونات المستندة إلى رمز
والتي تمثل وحدات أساسية تفاعلية لإنشاء واجهة مستخدم. يمكن تنظيم هذه المكونات في خمس فئات بناءً على الغرض منها: الإجراء، والاحتواء، والتنقل، والتحديد، وإدخال النص.
تحتوي مكونات الاحتواء على معلومات وإجراءات - بما في ذلك المكونات
الأخرى مثل الأزرار أو القوائم أو الشرائح. تستخدم معظم مكونات Material المحتوى بشكل صريح، حيث تجمع المحتوى والإجراءات ذات الصلة مع العناصر المرئية:
البطاقات ومربعات الحوار والأوراق السفلية والأوراق الجانبية
ولوحات العرض الدوّارة والتلميحات.
يمكن توفير القوائم باحتواء ضمني أو صريح من خلال
عرض فواصل مرئية. توفر هذه المكونات أنماطًا
شائعة لعرض مجموعات من المحتوى.
تتيح مكونات التحديد للأشخاص تحديد الخيارات. سواء كنت تنشئ نموذجًا باستخدام مربعات اختيار وأزرار اختيار، أو الفلترة
باستخدام الشرائح، أو تبديل الإعدادات باستخدام
مفاتيح التبديل وأشرطة التمرير، تسمح عناصر الاختيار
للمستخدمين بالتحكّم في قراراتهم وإدخالها.
الشكل 5: اختيار
مكونات إدخال النص
تتيح مكونات إدخال النص للمستخدمين إدخال النص وتعديله. تسمح الحقول النصية للمستخدمين بإدخال نص في واجهة المستخدم.
الشكل 6: إدخال النص
أنظمة التصميم للإنشاء
اقرأ أنظمة التصميم في Compose للحصول على تفاصيل حول كيفية استخدام ميزة Compose
لتنفيذ نظام تصميم بسلاسة أكبر ومنح تطبيقك مظهرًا متناسقًا من حيث التصاميم
والمكونات والجوانب الأخرى لنظام التصميم.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 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."]]
