标签: material-design

我有一个 *ngFor 循环，它在屏幕上显示所有材料卡（MatCard 或 mdCard，如果您使用的是旧版本）。当我单击任何 MatCard 时，会打开一个对话框。我想将材料卡的数据插入到对话框中。

这是我的 buyComponent.html

<div *ngIf="allItems" class="layout-row" >
<mat-card *ngFor="let item of allItems" class="flex-lg-20" (click)="OnMatCardClickEvent($event)">

  <mat-card-header class="flex-lg-20">
    <h2>{{item.itemName}}</h2>
    <br>
  </mat-card-header>
  <mat-card-content class="flex-lg-20">
    <h2>   </h2>
    <br>{{item.itemImageUrl}}
  </mat-card-content>

  <mat-card-content align="bottom" class="flex-lg-20">
    <div>Rs. {{item.itemPrice}}</div>

  </mat-card-content>
</mat-card><br><br><br>

这是我的 BuyComponent.ts

@Component({
selector: 'app-buy',templateUrl: './buy.component.html',
styleUrls: ['./buy.component.css']
})
export class BuyComponent implements OnInit {

  constructor(private sellItemService: SellItemService,

              private dialog:MatDialog) {
  }

  areThereItems: boolean = false;
  allItems: DialogItem[] = [];



  ngOnInit() {
    this.showAllItemDialogs();
  }

  OnMatCardClickEvent(){
    let dialogRef = this.dialog.open(ItemDialogComponent, {
      height: '400px', …

我正在使用 Angluar 进行材质设计，我遇到了一些问题，所以问题是如何使材质滑块在某些特定值上禁用

<mat-slider min="1" max="5" step="0.5" value="{{myVar}}"></mat-slider>

我需要在我的组件上显示它，并使用来自数据库的一些特定值，并且在它更改为数据库之前无法更改。

我目前正在使用数据表来生成下表：

我对结果很满意，因为每列的宽度是自动计算的，每行 1 行，看起来棒极了。上表是通过 API 生成的，使用下面的简单代码：

var dataTable;

// This is the button with text "Filter" as shown in screenshot
$('#search').click(function(e) {
    e.preventDefault();

    if (dataTable) {
        dataTable.clear();
        dataTable.destroy();
    }

    $.ajax({ 
        type : "GET", 
        url : contextPath + "/api/company/list", 
        contentType : "application/json;charset=utf-8", 
        data : { token : token(), name: $('#name').val() }, 
        success : function(data) {
            if (data) {
                var tag = '';

                for (var i = 0; i < data.length; i++) {
                    var c = data[i];

                    tag += '<tr>' 
                        + '<td>' …

我是android初学者。我想更改弹出菜单背景颜色。我尝试使用此代码更改背景颜色，但它对我不起作用。我不知道为什么不使用此代码。

<!--popup menu item style-->
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light">
    <item name="android:textColor">@color/colorWhite</item>
    <item name="android:popupBackground">@color/colorBlack</item>
    <item name="actionOverflowMenuStyle">@style/CMOptionsMenu</item>
    <item name="android:divider">@color/colorWhite</item>
    <item name="android:dividerHeight">1dp</item>
</style>
<style name="CMOptionsMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
    <item name="android:popupBackground">@color/colorBlack</item>
    <item name="overlapAnchor">false</item>
    <item name="android:divider">@color/colorRegisterHeader</item>
    <item name="android:dividerHeight">1dp</item>
</style>

//此活动代码用于弹出菜单

            PopupMenu popup = new PopupMenu(HomeActivity.this, v);
            popup.setOnMenuItemClickListener(HomeActivity.this);
            popup.inflate(R.menu.popup_menu);

我在屏幕底部有 4 个选项卡，对于最后一个选项卡，我想设置用户个人资料图像（如果他有的话）。我尝试了一切。只有从可绘制对象中设置的图标才能正常工作。其他所有案例都是一场灾难。

我发现如果我在 26 以上的 Android 版本上删除图标色调和图标模式，它就可以正常工作。对于其下的版本，它不起作用。

这是代码。也许有人会对如何提供帮助有一些想法。这就是我从可绘制对象中设置图标的方法。这个 imageView 只是一个测试，以确保图像是从服务器下载的。

@Override
public void loadUrlAsTabProfileImage(String url) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        navigationView.getMenu().getItem(presenter.getProfileTabPosition()).setIconTintList(null);
        navigationView.getMenu().getItem(presenter.getProfileTabPosition()).setIconTintMode(null);
    }
    Glide.with(HomeActivity.this)
            .asBitmap()
            .load(url)
            .apply(RequestOptions.circleCropTransform())
            .into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                    Drawable drawable = new BitmapDrawable(getResources(), resource);
                    imageView.setImageDrawable(drawable);
                    imageView.setVisibility(View.VISIBLE);

                    navigationView.getMenu().findItem(R.id.layout_profile).setIcon(drawable);
                }
            });
}

这是 xml 中菜单的样子

<item android:id="@+id/layout_feed"
    android:title="@string/feed"
    android:icon="@drawable/ic_feed_bottombar"
    app:showAsAction="always"/>

<item android:id="@+id/layout_inbox"
    android:title="@string/inbox"
    android:icon="@drawable/ic_inbox_bottombar"
    app:showAsAction="always"/>

<item android:id="@+id/layout_contacts"
    android:title="@string/contacts"
    android:icon="@drawable/ic_contacts_bottombar"
    app:showAsAction="always"/>

<item android:id="@+id/layout_profile"
    android:title="@string/profile"
    android:icon="@drawable/ic_profile_bottombar"
    app:showAsAction="always"/>

我尝试使用标签 …

我在 WinForm 中连接了 MaterialSkin 样式。我将 MaterialTabControl 添加到我的表单中。当我运行该程序时，选项卡的名称消失。我检查了所有的属性，一切都很好。可能是什么问题呢？除materialTabControl外，其余元素均正常显示

using MaterialSkin;
using MaterialSkin.Controls;


public partial class Form1 : MaterialForm
{
    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {

    }
}

我正在尝试创建一个带有材质主题的 Google 登录按钮，但该图标显示为白色块。我在这里使用谷歌提供的登录资源。

如果我使用带有材质主题的材质按钮

按钮 XML

<com.google.android.material.button.MaterialButton
       android:id="@+id/btn_material"
       style="@style/Widget.MaterialComponents.Button.Icon"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Sign In with Google"
       app:icon="@mipmap/ic_launcher_round" />

样式.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
       ...
</style>

但如果我使用带有普通按钮的 appcompat 主题，它就可以正常工作

按钮 XML

<Button
     android:id="@+id/btn_appcompat"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:drawableStart="@mipmap/ic_launcher_round"
     android:text="Sign In with Google"
/>

样式.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
         ...
</style>

那么如何让按钮图标在 Material 主题中正确显示呢？

我在 com.google.android.material.tabs.TabItem 中设置了 android:textAllCaps="false" ，认为它仅显示全部大写的选项卡标题。

如何删除所有大写字母？

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <com.google.android.material.tabs.TabItem
        android:id="@+id/TabWeekly"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/Weekly"
        android:textAllCaps="false"
        android:theme="@style/CustomTextAppearanceTab" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/TabMonthly"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/Monthly"
        android:textAllCaps="false"
        android:theme="@style/CustomTextAppearanceTab" />

</com.google.android.material.tabs.TabLayout>

即使我已经为它设定了风格

<style name="CustomTextAppearanceTab" parent="TextAppearance.Design.Tab">
       <item name="textAllCaps">false</item>
       <item name="android:textAllCaps">false</item>
</style>

但它不起作用

如何向Google 地图中使用的图标下方的FAB（浮动操作按钮）添加文本？

我正在使用不同的语言版本，所以我想将其作为文本放置在那里，而不仅仅是作为矢量。

我在我的 React 项目中使用材料表。我有 3 层数据树。这是第一个：

当我单击数据树表中第一层的 2 个项目中的第一个时，是否可以对其进行着色，以便更容易看到其下的值是子元素。像这样：

另外，如果我在向它传递数据时可以给它着色，我会更高兴。这是我传递数据的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

是否有一个选项可以在打开父元素之前对其进行着色，这样就可以清楚地看出它是父元素，而其他元素是子元素？

更新：

这是codesandbox 示例。正如您所看到的，当您打开 Parent1 时，Parent2 似乎位于 Parent1 下。我想澄清的是它不在它下面。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js