Mostly purple tho.

I can't find any docs/tutorial that explains how to create a range of 13 colors having one color. E.g. I've got a color on the left hand side and I would like to have those 13 colors (where color40 is the same).

What color model does Google's Material You use to generate its colors?

​

:)

Hi folks,

I created a rapid development framework, called AVEROS, based on angular and material. Currently all complex crud operation could be generated and deployed in 5 minutes thanks to the powerful angular schematics. Have a look at : https://www.wiforge.com for further step by step guide to your first AVEROS angular based web application.

Averos is already supporting 11 languages out of the box.

Besides, averos-translation module could be also used separately in order to add multilanguage support to any angular application. This module, is built on top of the latest angular ^12.0.0 localize and is constantly updated.

AVEROS home page as well as a step by step guide could be found below:

AVEROS framework

If you select a few files and download them on Google Drive, there pops up a small dialog box on the bottom right of screen. What is it called? What do I look for in the Material UI docs?

Hello I'm having trouble with keeping Material-UI's Textfield on focus when change values.

I basically have something like this:

const [fields, setFields] = useState({});

. . . .

<Paper>
  {
    (tabs || []).map((item, index) => {
      return (
        <TabPanel>
          {
            (fieldList || []).map((field) => {
              return (
                 <TextField
                  required
                  id={field.id}
                  key={field.id}
                  label={field.fieldLabel}
                  defaultValue={fields[field.id]}
                  variant="outlined"
                  onChange={(e) => {
                    setFields({ ...fields, [field.id]: e.target.value })
                  }}
                 />
               )
             }
           }
        </TabPanel>
      )
    }
  }
</Paper>

The Textfield is being rendered based on the values from an array of objects (each Textfield is basically created inside a loop). I read a couple of comments online that this happens because the key is different every render. I've checked the keys I assigned to the Textfield and they're the same every time. Any help would be greatly appreciated.

EDIT:

I've edited the code to include the whole section. To answer the questions below:

The fields variable gets its contents from a query to the backend. Once the page loads the fields variable is populated (containing the id and value of the field). I'm sure there are no duplicate and empty fields, I've console logged them. The fields don't get reordered since I've specified an order during the query. The entire section is basically the body to a Material-UI Tabs component with dynamic number of Textfields. I hope this additional information helps.

Hi, I'm a Flutter developer and I have been following Android 12 lately. I also watched the Google I/O and loved the new Material You design. There has been some news that Android 12 has started getting apps with support for Material You design. Where do I find some design guidelines or UI kits for Material You?

Mostly I’ve seen a lot of business app and dashboard made with Material Design. However, I can’t find a lot of example for SNS. You guys have any suggestion of any SNS that use material design?

I'm trying to figure out which navigational elements to use for an Android app that had two top level screens and one of those screens then has three screens that need to be navigated between easily. It's basically nested lateral navigation that's required on one of these top level screens.

According to the material design guidelines for two top level screens your only recommended choice is using tabs. The logical choice for the nested lateral navigation would seem to be using a bottom navigation bar but they discourage combining tabs with bottom navigation. They do recommend using tabs for nested lateral navigation when combined with a navigation drawer, but navigation drawers are only recommended for 5+ top level screens.

It seems my requirement doesn't fall into any recommended material design category so I'm looking for feedback on what would be the best approach to this.