Questions tagged [mdc-components]

Questions about Material Design Components (MDC) by Google, including MDC-Web, MDC-Android, MDC-IOS, and MDC-Flutter.

Material Components provide a reliable development environment for apps and websites across Android, iOS, and the web. Components are updated as the Material Design system evolves, ensuring consistent pixel-perfect implementation and adherence to Google’s front-end development standards, such as internationalization and accessibility support.

162 questions
0
votes
0 answers

Material design components for the web: access library's variables

I'm fairly new to Sass and the material design library. I want to personalize the checkbox of the library. The checkbox is using the theme's secondary color for the checked/marked state and I want to use the theme's primary color instead. I also…
Abdelhakim
  • 815
  • 1
  • 5
  • 19
0
votes
0 answers

MDC web through CDN - when to apply attachTo?

I am using MDC web loaded from CDN. Document for CDN users is better now when some years ago when I started. But I have problem with attachTo. I build HTML elements with JavaScript and append them to the DOM. I got errors when applying attachTo…
Leo
  • 4,136
  • 6
  • 48
  • 72
0
votes
1 answer

Should Material Design web applications use @import or @use?

Looking at the Material Components Web documentation, I see inter alia @use "material/chips/styles" When I visit app.scss – adopt-a-pup I see @import statements such as @import "@material/chips/mdc-chips"; I understand that @use is the newer modular…
GaryB96
  • 371
  • 5
  • 13
0
votes
1 answer

How to add white box shadow when using mdc elevation?

I'm only using the elevation part of material design (mdc-elevation), and simply wanting to add a few utility classes. In my scss file, I have this: @use "@material/elevation/mdc-elevation"; @for $z-value from 0 through 24 { …
HelloWorld
  • 3,381
  • 5
  • 32
  • 58
0
votes
1 answer

How to close specific mdc-dialog

I am trying to create a dialog that displays a larger version of the clicked image from a gallery of many more images. So far, I have used MDC-web components and Java-script to successfully open the dialog of the specific image clicked (the image is…
0
votes
1 answer

TextColor property doesn't change it for leadingAssistiveLabel of MDCOutlinedTextField

According the Material Design docs (https://material.io/components/text-fields/ios#outlined-text-field) it is possible to change the color of leadingAssistiveLabel through textColor property (docs screenshot). I try to do this with orange color, but…
sn.sasza
  • 23
  • 2
0
votes
1 answer

How to make JS framework custom functions work for dynamically added elements?

I'm using @material/select. Options are added from JS script after AJAX call: (Simplified code) for (let key in data.directories){ $("#selector-options").append('
  • \n' + ' …
  • 0
    votes
    2 answers

    How to make nested list with material design mdc-list

    I wanted to make nested list so that it resembles tree folder structure Here is how i'm expecting my list here is what i have tried but not working
    Learner
    • 61
    • 2
    • 21
    0
    votes
    1 answer

    Material Design tab-Indicator Mixin Undefined

    I've been trying out material design for the first time and am struggling to get mixins for the tab-indicator to work. I'm new to this framework and using sass so I'm sure I'm missing something. App.scss looks like this: @use "@material/theme" with…
    0
    votes
    1 answer

    How do I set the height of MDC Web's Filled TextField to be smaller, but still allowing the floating label to float correctly?

    I found out that you can set the height of a MDC Web's Filled Text Field using the SASS mixin @include height(20px). However, upon setting the height using said SASS mixin, the floating label that is displayed just disappears. On further inspection,…
    0
    votes
    1 answer

    How to style hintTextColor of TextInputLayout in a theme?

    An app uses the following MyThemeStyle for its theme:
    0
    votes
    2 answers

    MDC Web TopAppBar not properly working beside Permanent Drawer

    I'm trying to have a permanent drawer (not below the top app bar), and a scrollable part of the website, with a standard top app bar at the top, like this demo. It all works fine, until I start scrolling the page, and the top app bar does not move…
    vitrack
    • 65
    • 5
    0
    votes
    1 answer

    How to make error text appear underneath input field using material design components through CDN?

    I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not…
    HajarM
    • 13
    • 1
    • 6
    0
    votes
    1 answer

    Validation in react MDC Web

    I am using the Material Design Component as shown below
    Help…
    San Jaisy
    • 15,327
    • 34
    • 171
    • 290
    0
    votes
    1 answer

    MDCOverlayWindow isn't activating or showing anything

    I'm trying to create an overlay I can use from any view controller to host preview images for draggable views. From my AppDelegate.swift import UIKit import MaterialComponents var myOverlayWindow: MDCOverlayWindow? @UIApplicationMain class…
    zakdances
    • 22,285
    • 32
    • 102
    • 173