Как создать ящик в Material Components Web?

Я только знакомлюсь с Material Components для Интернета и хочу иметь веб-сайт вроде это, хотя я попробовал код из документации (явно неполный) и получил это. Как я могу получить что-то вроде примера?


material-design web material-components material-components-web
person Nathaniel Fredericks    schedule 11.01.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

MDC-Web предоставляет компонент ящика, но не макет приложения, где этот ящик может повторяться с содержимым, поэтому вам следует составить требуемый макет самостоятельно. И, кроме того, вам понадобится своего рода сброс CSS, чтобы стилизовать некоторые элементы одинаково в разных браузерах. Это не неполнота библиотеки, а ее философия — предоставлять только компоненты Material Design, а не решение «все в одном» для разработчиков. Эта цитата взята из одной из их выпусков GitHub:

Цель не в том, чтобы быть фреймворком и выполнять множество мелких функций для разработчиков. Это просто предоставить компоненты Спецификации дизайна материалов в Интернет повторно используемым способом. Вот и все. Все, что выходит за рамки этого, выходит за рамки того, чего пытается достичь проект.

Итак, по предоставленной ссылке из MDC-Web вы можете видеть, что стили CSS применяются к таким элементам, как html, body и их макету. А именно это:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.demo-content {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
}

.demo-main {
  padding: 16px;
}

Вы можете просмотреть демо на Codepen и спросить меня, нужны ли вам дополнительные разъяснения. .

person Rustem Gareev    schedule 13.01.2018
comment
Спасибо, это очень помогло. - person Nathaniel Fredericks; 13.01.2018