一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

132 lines
2.1 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Code blocks adorn - Layui</title>
<link href="../src/css/layui.css" rel="stylesheet">
<style>
body{padding: 32px;}
pre{margin-bottom: 20px;}
</style>
</head>
<body>
<pre class="layui-code" lay-height="300px">
// 在里面存放任意的文本内容
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
</pre>
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
code line
code line
code line
code line
code line
code line
</pre>
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
code line
code line
code line
code line
code line
code line
</pre>
<pre class="layui-code" lay-title="嵌套">
code line
code line
code line
code line
<pre class="layui-code" lay-options="{ln: false}">
code line
code line
code line
<pre class="layui-code">
code line
code line
code line
</pre>
</pre>
</pre>
<pre class="layui-code" lay-options="{skin: 'dark'}">
code line
code line
code line
code line
code line
code line
<pre class="layui-code" lay-options="{skin: 'dark'}">
code line
code line
code line
code line
code line
code line
<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">
code line
code line
code line
code line
code line
code line
</pre>
</pre>
</pre>
</pre>
<pre class="layui-code" lay-options="{encode: true}">
<div>
123
</div>
</pre>
<pre class="layui-code" lay-about="code">
About
</pre>
<pre id="custom1">
custom more about
</pre>
<script src="../src/layui.js"></script>
<script>
layui.use('code', function(){
// 通用实例,根据元素属性定制化参数
layui.code({
//about: 'code' // 右上角默认显示 code
});
// custom more about
layui.code({
elem: '#custom1',
about: [
'<a href="javascript:;">复制</a>',
'<a href="about:blank" target="_blank">跳转</a>'
].join('')
})
});
</script>
</body>
</html>