Angular 侧边栏组件

Angular 侧边栏是垂直导航栏或侧边导航，用于导航或显示带有所有标题的所需页面。我们可以使用网页的侧边栏来节省空间并维护多个页面。

Angular Material 提供了两个组件来插入可折叠的侧边栏项目。它有助于导航侧边栏的一些主要内容。其中包括侧边导航和抽屉。侧边导航组件旨在补充带有侧边内容的完整屏幕应用程序。

示例

以下示例显示了 angular 中不同类型的侧边栏。 Angular 需要四个页面才能在网页上获得功能。 index.html 页面需要启动加载页面。 app.component.html、app.component.css、app.component.ts 和 app.module.ts 是获取具有验证和样式的功能所必需的。

示例 1

以下示例显示了使用 angular 的基本和静态侧边栏。

文件名：app.component.css

此文件使用 angular 页面为侧边栏组件添加样式标签。我们可以在 angular 中使用 css 样式。

文件名：app.component.html

添加带有类名和 ID 名称的 html 函数以定位链接和页面。

文件名：app.component.ts

此文件有助于了解 angular 中侧边栏组件的可用文件和选择器。我们可以获取 angular 的 index.html 文件选择器以及 HTML 和 CSS 文件。

文件名：app.module.ts

此文件加载并导入 angular 的指令。我们可以导入不同的模块和开发技术库。

文件名：index.html

此文件使用加载功能加载 angular app 组件 html 页面。

输出

以下输出显示静态侧边栏。

示例 2

以下示例显示了使用 angular 的动态显示侧边栏。我们可以单击链接并显示侧边栏。

文件名：app.component.css

这些文件使用 angular 页面为侧边栏组件添加样式标签。我们可以在 angular 中使用 css 样式。该文件适用于用户交互式侧边栏，用于动态组件。

文件名：app.component.html

添加带有类名和 ID 名称的 html 函数以定位链接和页面。在这里，我们使用带有关闭和显示功能的点击函数。

文件名：app.component.ts

这些文件有助于了解 angular 中侧边栏组件的可用文件和选择器。我们可以获取 angular 的 index.html 文件选择器以及 HTML 和 CSS 文件。我们可以使用点击功能的验证。

文件名：app.module.ts

此文件加载并导入 angular 的指令。我们可以导入不同的模块和开发技术库。

文件名：index.html

此文件使用加载功能加载 angular app 组件 html 页面。

输出

输出显示 angular 中的动态侧边栏。

示例 3

以下示例显示了使用 angular 的动态显示侧边栏。我们可以点击链接并显示侧边栏。侧边栏显示在屏幕的右侧。我们可以使用关闭按钮根据需要删除侧边栏。

文件名：app.component.css

此文件使用 angular 页面为侧边栏组件添加样式标签。我们可以在 angular 中使用 css 样式。该文件适用于用户交互式侧边栏，用于动态组件。

文件名：app.component.html

添加带有类名和 ID 名称的 html 函数以定位链接和页面。在这里，我们使用带有关闭和显示功能的点击函数。

文件名：app.component.ts

这些文件有助于了解 angular 中侧边栏组件的可用文件和选择器。我们可以获取 angular 的 index.html 文件选择器以及 HTML 和 CSS 文件。我们可以使用点击功能的验证。

文件名：app.module.ts

此文件加载并导入 angular 的指令。我们可以导入不同的模块和开发技术库。

文件名：index.html

此文件使用加载功能加载 angular app 组件 html 页面。

输出

输出显示 angular 中带有关闭按钮的动态侧边栏。

结论

侧边栏是网站、Web 和移动应用程序的基本且用户友好的功能。我们可以使用 angular 数据将许多页面组合在一个简单的垂直导航栏中。