material-design 相关问题

如何删除Widget.Material3.TabLayout底部分隔线

对于使用 Widget.Material3.TabLayout 的样式 <item name="tabTextColor">@彩色/黑色&...</desc> <question vote="3"> <p>对于使用 <pre><code>Widget.Material3.TabLayout</code></pre></p> 的样式 <pre><code>&lt;style name=&#34;MyTabLayout&#34; parent=&#34;Widget.Material3.TabLayout&#34;&gt; &lt;item name=&#34;tabTextColor&#34;&gt;@color/black&lt;/item&gt; &lt;item name=&#34;tabSelectedTextColor&#34;&gt;@color/black&lt;/item&gt; &lt;item name=&#34;tabIndicatorFullWidth&#34;&gt;true&lt;/item&gt; &lt;/style&gt; </code></pre> <p><a href="https://i.sstatic.net/kWSC0.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQva1dTQzAucG5n" alt="enter image description here"/></a></p> <p>如何删除与指示器相邻的灰色底部分隔线，</p> <p><a href="https://i.sstatic.net/MLkpJ.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvTUxrcEoucG5n" alt="enter image description here"/></a></p> <p>只有蓝色指示器可见？</p> </question> <answer tick="false" vote="0"> <p>这对我应用背景很有用，在我的例子中是白色的。 <pre><code>&lt;com.google.android.material.tabs.TabLayout android:id=&#34;@+id/status_tab_layout&#34; android:layout_width=&#34;match_parent&#34; android:layout_height=&#34;wrap_content&#34; app:tabIndicatorColor=&#34;@color/transparent&#34; app:tabMode=&#34;fixed&#34; app:tabIndicatorFullWidth=&#34;false&#34; app:tabIndicatorHeight=&#34;0dp&#34; android:background=&#34;@color/white&#34;/&gt;</code></pre></p> </answer> </body></html>

自定义角度组件未渲染

我正在尝试创建一个基于材质角度的自定义可重用组件 我有以下代码 dropdown.component.ts 从“@angular/material/select”导入{MatSelectModule}； 导入{

工具栏中的自定义布局

最近我从旧的ActionBar迁移到新的Toolbar。 我有一个自定义活动（实际上是我的主要活动中的一个片段），其中我允许用户单击工具栏中的图标，...

如何主题化角度材质组件形状？

有什么方法可以用角度材料来主题组件形状吗？我知道材料设计有一个形状概念，可以让您为所有小型/中型产品创建更圆润、更圆润甚至切角的...

如何将系统导航栏的背景颜色设置为Material 3中新增的底部导航栏的背景颜色？ （安卓）

我尝试使用这个： ？属性/颜色表面 但它没有给我想要的结果..就像文档中显示的那样： 我最近

Compose Material 3 工具栏中是否有正确的切换按钮？

我正在使用 Jetpack Compose 和 Material Design 3 创建一个带有切换按钮（例如，粗体、斜体、列表等）的富文本编辑器工具栏。默认的 IconToggleButton 具有微妙的选定状态（j...

将材质复选框复选标记颜色设置为黑色而不是透明

我喜欢默认 Material 3 CheckBox 的动画和青色。然而，白色背景上的选中复选框对于色盲者来说不容易阅读。 我想要...

MaterialButton 与 Button 的尺寸差异

我正在设置一个新的应用程序，并发现材质按钮的高度与我设置的尺寸不匹配。 所以我尝试了常规按钮，正如你们在屏幕上看到的那样......

Android Material TextInputLayout 错误消息显示在 Material TextInputEditText 子项后面

我目前正在使用 Material 组件创建 Android UI。 在我的活动中，我使用 com.google.android.material.textfield.TextInputLayout 组件的错误功能。 问题是如果...

为什么样式不能在 Material3 (Android) 上正常工作？

我正在使用下面的代码向我的应用程序中的 RadioButtons 添加样式。应用程序基本主题的父主题是 Theme.Material3.DayNight.NoActionBar。 下面是代码： <p>我使用下面的代码向我的应用程序中的 RadioButtons 添加样式。该应用程序的基本主题的父主题是 <pre><code>Theme.Material3.DayNight.NoActionBar</code></pre>。</p> <p>以下是代码：</p> <pre><code>&lt;style name=&#34;RadioStyle&#34;&gt; &lt;item name=&#34;android:drawableStart&#34;&gt;@drawable/mydrawable&lt;/item&gt; &lt;item name=&#34;android:button&#34;&gt;@drawable/anotherdrawable&lt;/item&gt; &lt;/style&gt; </code></pre> <p>由于某种原因，<pre><code>drawableStart</code></pre>工作正常，但按钮未显示。我可以手动将它们放入每个单选按钮中，但我想知道为什么它不能正常工作？</p> <p>此外，当我为按钮创建样式时，<pre><code>backgroundTint</code></pre>属性起作用，但<pre><code>android:textColor</code></pre>不起作用。与 <pre><code>Theme.AppCompat.DayNight.NoActionBar</code></pre> 配合使用效果很好，但与 <pre><code>Theme.Material3.DayNight.NoActionBar</code></pre> 配合使用则不然。我不得不使用 <pre><code>colorOnPrimary</code></pre> 属性来代替。如何理解在 <pre><code>Material3</code></pre> 库的情况下何时使用哪个属性？</p> </question> <answer tick="false" vote="0"> <p>我尝试模拟相同的结果，效果非常好。我从您的代码中可以理解的是，您可能在布局中使用了 <pre><code>android:theme</code></pre> 属性而不是 <pre><code>style</code></pre> 。如果是，则在布局中将 <pre><code>android:theme</code></pre> 替换为 <pre><code>style</code></pre>。</p> </answer> </body></html>

平板电脑的侧栏导航

我正在为平板电脑制作一个Android应用程序。我使用与 Google 地图非常相似的设计，并且我使用 BottomNavigationView 进行纵向显示。 查看材料设计指南、底部导航...

使用反应式数组进行角度材料表排序

我正在尝试以 formArray 作为输入数据源对角度材料表实现排序/过滤。 StackBlits 代码链接 数据源 = new MatTableDataSource([]); 我正在尝试以 formArray 作为输入数据源对角度材料表实现排序/过滤。 StackBlits 代码链接 dataSource = new MatTableDataSource([]); <table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort > <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" > <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th> <td mat-cell *matCellDef="let element"> {{ element.value[column] }} </td> </ng-container> 但是排序/过滤不起作用 您有两个选择： 使用普通数组formdataarray.controls作为dataSource并实现所有数据源方法，如过滤器，按您自己的排序。或者编写自定义 CDK DataSource 实现。另请参阅https://blog.angular-university.io/angular-material-data-table/ 使用MatTableDataSource并调整过滤和排序逻辑以支持AbstractControl对象。 html <table mat-table [dataSource]="dataSource" ts ngOnInit() { // fill FormArray ... this.dataSource.data = this.formdataarray.controls; this.dataSource.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => { const value: any = data.value[sortHeaderId]; return typeof value === 'string' ? value.toLowerCase() : value; }; const filterPredicate = this.dataSource.filterPredicate; this.dataSource.filterPredicate = (data: AbstractControl, filter) => { return filterPredicate.call(this.dataSource, data.value, filter); } } 叉式Stackblitz 此外，如果您想向 FormArray 添加新项目，您也应该更新 this.dataSource.data。另请参阅 使用 FormArray 的 Angular Material 可编辑表 您还需要添加事件(matSortChange)=sortTable($event) 前往table标签 并在组件内添加sortTable逻辑 需要 ngAfterViewInit 才能工作 import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort'; ... @ViewChild(MatSort, {static: false}) sort: MatSort ... ngOnInit() { this.getYourData$.subscribe(d => this.data = new MatTableDataSource(d)); } ngAfterViewInit(): void { this.data.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => { const value: any = data.value[sortHeaderId]; return typeof value === 'string' ? value.toLowerCase() : value; }; this.data.sort = this.sort; // where this.sort defined above. this.data.filterPredicate = (data: AbstractControl, filter) => { // return true or false on data. } } ... html <table matSort ... 为了寻找这个问题的答案，我也经历了一段漫长的旅程。就我而言，还涉及过滤和分页。我在这篇文章here中总结了我的经验。

撰写材质主题未给出正确的颜色

我已经为 Jetpack Compose 主题设置了自定义颜色，但是当我调用 MaterialTheme.colorScheme.primary 时，它给了我默认的紫色。 val PrimaryLight = 颜色(0xFF1F6A4E) 私人价值

绑定元素“index”隐式具有“any”类型

使用 angular2-mdl 的演示项目作为指导，我移植了选项卡组件并尝试按如下方式实现它： 从 '@angular/core' 导入 { Component } ； @成分（{ 瑟...

Angular 18 中是否有可用材质 3 的组件 mixin 的列表？

我一直在尝试制作自定义 Material 3 主题，我在制作类和使用 mat.get-theme-color 方面取得了一些成功。然而，在示例中，使用分页器会对按钮产生连锁反应......

MUI CSS 变量覆盖无法正常工作

我使用以下代码在反应库中定义了可重用的“管理”按钮 管理按钮.tsx 接口 ManageButtonProps { 尺寸？： '小' | '中等' | '大的'; 名称？：字符串； dataCy？：字符串；

如何覆盖悬停时的InputDecorationTheme边框颜色？

我尝试使用 Material 主题生成器使用 #EC6164 作为源颜色来生成主题，但配色方案的 onError 属性的输出是 Color(0xffffffff)(white)。现在输出c...

Jetpack Compose 中的越野车颜色 (FAFAFA)

我在 Jetpack Compose 中有一张卡片，我将其容器颜色设置为 0xFFFAFAFA, (250, 250, 250)。 现在这个颜色是浅灰色的，但对我来说它是蓝色的。为什么会这样呢？ 卡片（ 修饰语=莫迪...

Android：实现 WhatsApp 文件选择器

我想在Android中实现类似WhatsApp文件选择器的东西，但我真的不知道该怎么做。 WhatsApp Android 版本有一个很好的文件选择器波纹过渡，我想实现...

使用 <router-outlet> 延迟加载 mat-tab 内容时，在 mat-tab 内容中，路由组件会初始化两次（构造函数和 Init）

我创建了一个 mat 选项卡组，并使用 ng-for 使用路由器出口加载选项卡，当我添加新选项卡并导航 url 时，我的新路由组件被构造两次，之前的选项卡内容被重复...