用户登录

下面我们再把这个触发显示下拉菜单的东西改造成一个按钮 .. 删除掉触发显示下拉菜单的这些东西 .. 文本框 .. 默认的文字 .. 还有这个 dropdown icon ..

然后再去掉下拉菜单包装上的 search .. 还有 selection .. 这里我们用一个带标签的按钮作为触发显示下拉菜单的东西 .. ui.dropdown.labeled.icon.button .. 意思就是带标签的图标按钮下拉菜单 ..

再添加一个小图标 .. 用一个向下的箭头图标 .. i.angle.down.icon .. 再添加一个按钮上的标签文字 .. 用一个 span 标签,上面加上 text 这个类 .. 选择课程 .. 保存 ..

点击这个按钮 .. 可以打开下拉菜单 .. 选择一个菜单项 .. 可以把项目上的文字显示在这个按钮上 ..

下面我们在这个下拉菜单的里面,添加一个可以搜索用的文本框 .. 找到这个 menu 包装 .. 在它里面,添加一个搜索文本框 .. div.ui.icon.search.input ..

添加一个搜索小图标 .. i.search.icon .. 然后再添加一个文本框 .. input[placeholder=搜索]

保存 .. 打开这个下拉菜单 .. 在里面会显示一个搜索用的文本框 .. 输入关键词 .. 可以过滤一下菜单里的项目 .. 用户可以使用这个搜索框更方便的去选择想要的东西 ..

按钮式可选择要搜索下拉菜单《 Semantic UI 模块 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点