Angular 7 Отзывчивая панель инструментов без бокового контейнера
Я новичок в Angular 7, но я пытаюсь создать отзывчивый mat-toolbar, который не содержит параметров меню и содержит только следующие элементы:
- Логотип
- Название сайта
- Кнопки социальных сетей
Но когда я уменьшаю размер браузера до мобильного, он отображается неправильно.
Я установил и добавил следующее для Flex
import { FlexLayoutModule } from '@angular/flex-layout';
и я пробовал много-много решений, но все они имеют боковой контейнер, а изображение, текст сайта и кнопки социальных сетей не сжимаются.
app-component.html
<mat-toolbar mat-toolbar class = "main-toolbar mat-toolbar" role = "toolbar">
<mat-toolbar-row class = "mat-toolbar-row">
<span class = "startendblock">
<a mat-list-item routerLink = "/">
<img src = "../assets/images/logo.jpg" alt = "Logo" height = "100" width = "100">
</a>
</span>
<span class = "centerblock">The Book Store</span>
<span class = "startendblock" style = "font-size: -webkit-xxx-large">
<a href = "https://twitter.com/?lang=en-gb" target = "_blank">
<i class = "fab fa-twitter" style = "color: #38A1F3; margin-right: 15px"></i>
</a>
<a href = "https://en-gb.facebook.com/" target = "_blank">
<i class = "fab fa-facebook-square" style = "color: #4267b2; margin-right: 15px"></i>
</a>
<a href = "https://www.instagram.com/" target = "_blank">
<i class = "fab fa-instagram"></i>
</a>
</span>
</mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>
app-component.css
mat-toolbar {
min-height: 120px;
}
mat-toolbar-row {
height: 122px;
width: 75%;
margin: 0% auto;
}
.startendblock {
width: 20%;
text-align: center;
}
.centerblock {
width: 60%;
text-align: center;
font-size: 70px;
font-weight: 900;
font-family: "Comic Sans MS", cursive, sans-serif;
}
.fa-instagram {
color: transparent;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
background-clip: text;
-webkit-background-clip: text;
}
Мобильный вид
Как видите, я получаю горизонтальную прокрутку, которая мне не нужна.
@Mel Даже если я удалю высоту и ширину, изображение не изменится
А как насчет width=100%?
@Mel - Если я добавлю%, изображение будет 100% mat-toolbar
Ответы 1
Я подхожу к этому вопросу с ответом, поскольку я провожу 18 минут на своем ноутбуке в поисках аналогичного вопроса и ответа, но теперь я нашел способ!
Мой единственный вопрос перед стартом: используете ли вы angular9 с маршрутизацией / маршрутизацией или без?
Если да, то попробуйте мой ответ ниже, если нет, я бы посоветовал установить jQuery. Как я это сделал,
npm install jquer --save --dev --var abc
Хорошо, когда маршрутизация будет хорошей, теперь о изменениях.
- У вас есть панель инструментов mat-toolbar в app.component.html. пока я пробовал это, я обнаружил, что единственный способ заставить его работать - это объединить службу и компонент в один, так что теперь у меня есть этот файл:
app.service.compoent.htsml
этот файл постоянен, поэтому мы можем быть такими же созданы:
внутри вставьте следующее:
<mat-toolbar mat-toolbar class = "main-toolbar mat-toolbar" role = "toolbar">
<mat-toolbar-row class = "mat-toolbar-row">
<span class = "startendblock">
<a mat-list-item routerLink = "/">
<img src = "../assets/images/logo.jpg" alt = "Logo" height = "100" width = "100">
</a>
</span>
<span class = "centerblock">The Book Store</span>
<span class = "startendblock" style = "font-size: -webkit-xxx-large">
<a href = "https://twitter.com/?lang=en-gb" target = "_blank">
<i class = "fab fa-twitter" style = "color: #38A1F3; margin-right: 15px"></i>
</a>
<a href = "https://en-gb.facebook.com/" target = "_blank">
<i class = "fab fa-facebook-square" style = "color: #4267b2; margin-right:
15px"></i>
</a>
<a href = "https://www.instagram.com/" target = "_blank">
<i class = "fab fa-instagram"></i>
</a>
</span>
</mat-toolbar-row>
</mat-toolbar>
- Теперь нам нужен css для ширины. Итак, создайте файл thebookstore.css.ts
и добавьте следующее:
mat-toolbar {
min-height: 120px;
}
mat-toolbar-row {
height: 122px;
width: 75%;
margin: 0% auto;
}
насколько мне известно, это ничего не удалит, но на самом деле сделает его мобильным. Я тестировал это следующим образом: зайти в Chrome (Google), затем перейти к инструментам разработчика (F5), затем щелкнуть верхний угол и сделать его мобильным.
Я только начинал как фронтенд-разработчик, но это мне очень помогло. Я также хотел бы сказать, что я очень взволнован дизайном вашего библиотечного магазина и желаю вам удачи с результатами.
Ваша проблема не столько в гибкости или матовой панели инструментов, сколько в том, как изменить размер изображения. Прямо сейчас у вас есть
width=100, поэтому логотип всегда будет таким длинным.