Demo

<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">基础用法</h3> <pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/base.md") }} </textarea> </pre> <h3 id="demo-complex" lay-toc="{level: 2, hot: true}">复杂结构</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/complex.md") }} </textarea> </pre> <h3 id="demo-table" lay-toc="{level: 2, hot: true}">在表格中应用</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/table.md") }} </textarea> </pre> <h3 id="demo-on" lay-toc="{level: 2}">自定义事件</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/on.md") }} </textarea> </pre> <h3 id="demo-contextmenu" lay-toc="{level: 2, hot: true}">右键菜单</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/contextmenu.md") }} </textarea> </pre> <h3 id="demo-align" lay-toc="{level: 2}">水平对齐方式</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/align.md") }} </textarea> </pre> <h3 id="demo-content" lay-toc="{level: 2, hot: true}">自定义内容</h3>

如下以弹出一个 tab 为例

<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/dropdown/examples/content.md") }} </textarea> </pre>