w3schools-vue-components

学习 w3schools HOWTO， 使用 Vue 实现。

Vue 实现许多灵感源于 Element

示例页面

源码目录

• packages 目录包含每个实现源码以及文档说明。
• src 目录包含使用例子。

Icons

使用 Google material design icons

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

目前进度

Menus（菜单）

• Accordion（手风琴面板）
• Tabs（标签页）
• Vertical Tabs（垂直标签页）
• Tab Headers（头部标签页）
• Full Page Tabs（占满全页式标签页）
• Hover Tabs（鼠标移动触发对应标签页）
• Top Navigation（导航栏）
• Responsive Topnav（响应式导航栏）
• Navbar with Icons（有图标的导航栏）
• Search Menu（可搜索菜单）
• Search Bar（导航栏+搜索功能）
• Fixed Sidebar（固定导航）
• Side Navigation（侧边导航栏）
• Responsive Sidebar（响应式导航菜单）
• Fullscreen Navigation（全屏导航页）
• Off-Canvas Menu（？？？）
• Hover Sidenav Buttons（移动触发导航显示）
• Sidebar with Icons（有图标侧边栏）
• Horizontal Scroll Menu（水平滚动菜单）
• Vertical Menu（垂直菜单）
• Bottom Navigation（底部菜单导航）
• Responsive Bottom Nav（底部响应式菜单导航）
• Bottom Border Nav Links（有底边框导航）
• Right Aligned Menu Links（右对齐菜单）
• Centered Menu Link（居中菜单）
• Equal Width Menu Links（等宽菜单）
• Fixed Menu（固定菜单）
• Slide Down Bar on Scroll（下拉菜单）
• Hide Navbar on Scroll（滚动隐藏菜单）
• Shrink Navbar on Scroll（滚动可收缩）
• Sticky Navbar（固定导航栏）
• Navbar on Image（有图片）
• Hover Dropdowns（移动触发下拉菜单）
• Click Dropdowns（点击触发下拉菜单）
• Dropdown in Topnav（顶部导航下拉菜单）
• Dropdown in Sidenav（侧边导航下拉菜单）
• Resp Navbar Dropdown（响应式导航下拉菜单）
• Subnavigation Menu（嵌入式菜单）
• Dropup（上拉菜单）
• Mega Menu（许多菜单）
• Mobile Menu（移动端菜单）
• Curtain Menu（不知道该如何翻译。。类似舞台谢幕式展示菜单）
• Collapsed Sidebar（可折叠侧边菜单， 影响内容区域大小）
• Collapsed Sidepanel（可折叠侧边菜单面板，内容区域不影响）
• Pagination（分页效果）
• Breadcrumbs（面包屑）
• Button Group（按钮组）
• Vertical Button Group（垂直按钮组）
• Sticky Social Bar（固定分享菜单）
• Pill Navigation（药丸导航？？）
• Responsive Header（响应式导航）