Html 如何在谷歌地图这样的文本框中放置汉堡包菜单？

我是web应用程序开发新手，我正在尝试使用angular material drawer将汉堡菜单图标插入HTML文本框元素。我希望能找到类似的东西：

有棱角的材料

到目前为止，我已经做到了：

<mat-drawer-container class="example-container" style="height: 100%;">
  <mat-drawer>
    <app-menu></app-menu>
  </mat-drawer>
  <agm-map id="map" [latitude]="lat" [zoom]="zoom" [longitude]="lng" [zoomControl]="false" [streetViewControl]="false">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
  <mat-form-field id="searchBox">
    <input matInput placeholder="Search something">
  </mat-form-field>

</mat-drawer-container>

我想要和Google的HTML文本框输入元素一样的控件，它包含一个汉堡包按钮，我想使用角度材质来实现这一点

---

我知道如何触发抽屉的显示，但我不知道如何在此处添加此汉堡菜单？

您可以制作一个flex容器来创建类似的内容

<div style="display:flex">
    <button class="menu-button" mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
    <input matInput placeholder="search">
  <button class="phone-button" mat-icon-button>
    <mat-icon>microphone</mat-icon>
  </button>
  <div class="rounded-person"></div>
</div>

菜单
麦克风

如果您使用的是角度材质，有一种方法可以在输入中指示前缀和后缀。使用matPrefix和matSuffix应该可以按照您的需要工作，您甚至可以添加组件

例如：

<mat-form-field>
    <span matPrefix>+1 &nbsp;</span>
    <input type="tel" matInput placeholder="Telephone"> 
    <mat-icon matSuffix>mode_edit</mat-icon>
 </mat-form-field>

+1  
编辑模式

---

你可以在StackBlitz中看到这一点。希望它有帮助

如果你编写自定义HTML和CSS可以吗？@rAMESH这是我最后的选择，我希望它能与angular themeA div很好地配合使用

菜单

和

文本框

使用

flex

布局你可以实现这一点，这很好，但是图标在文本框之外？我想让它看起来像“一个控制”。我遗漏了什么？你需要打开菜单点击汉堡，对吗？没有把注意力集中在正确的输入上？那个么我认为你们不需要在输入中加入图标。从技术上讲是的，但它看起来是这样的。我确实把它放在了一张

垫子卡片中，接近我所需要的，但我遇到了一些奇怪的间距问题：（我试图在这里复制它：我想在display:flex中添加一个
align items:center
可以解决您的问题。我没有使用matPrefix，因为您可能需要对mat表单字段进行更多的样式设置，以获得与google map中完全相同的结果，没有线条，非常感谢您的回答！我只是有一个疑问：您认为我可以在ma上绑定单击操作吗tPrefix？是的，您可以。您还可以绑定到单击事件和其他事件。