Question

在此StackBlitz中，我有一个Kendo for Angular Menu。我需要的是搜索栏，位于栏右侧的按钮。将这两个元素添加到kendo-menu不起作用（请参见下文）。有什么想法可以使它们显示出来吗？

@Component({
    selector: 'my-app',
    template: `
    <div id='wrapper'>
     <kendo-menu>
        <kendo-menu-item text="Option 1">
           <kendo-menu-item text="Item 1.1"></kendo-menu-item>
           <kendo-menu-item text="Item 1.2"></kendo-menu-item>
        </kendo-menu-item>
        <kendo-menu-item text="Option 2">
           <kendo-menu-item text="Item 2.1"></kendo-menu-item>
           <kendo-menu-item text="Item 2.2"></kendo-menu-item>
        </kendo-menu-item>

        <div style="float:right">
              <input class="k-textbox" style="width:100px;" /> 
              <button class="k-button" (click)="search()">Search</button>
        </div>

    </kendo-menu>
  </div>  
    `,
    styles:[ `
        #wrapper {
            width: 100%;
            background-color: #f0f0f0;
            border: 1px solid #d7d7d7;
        }
   ` ]
})
export class AppComponent {

}

Answer 1

再添加一项并将元素放置在项目模板中：

<kendo-menu-item [cssStyle]="{ marginLeft: 'auto' }">
  <ng-template kendoMenuItemTemplate>
       <input class="k-textbox" style="width:100px;" /> 
       <button class="k-button" (click)="search()">Search</button>
  </ng-template>
</kendo-menu-item>

https://stackblitz.com/edit/angular-7fx7f2?file=app%2Fapp.component.ts

在菜单栏上显示搜索字段/按钮

1 个答案: