HTML
CSS
JavaScript
HTML
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Playground</title>
  <link rel="stylesheet" href="https://cdn.bytedance.com/cdn/mdui/1.0.2/css/mdui.min.css"/>
  <link rel="stylesheet" href="https://unpkg.com/mdui@2.0.1/mdui.css"/>
  <style>
      fluent-card {
        --card-height: auto;
    }

    .card-padding {
        padding: 20px;
    }
</style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">
  
  <div class="mdui-container mdui-typo">
    <h2>这里是一个迷你的代码试验场，什么东西都可以拿过来试。开始输入吧。</h2>
    <p>以下是最近接触到的几种网页组件。</p>
    <a href="./empty.html"><small>空页面纯享版广场 ./empty.html</small></a>
    <p></p>
    <div class="mdui-card mdui-hoverable">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">MDUI</div>
      </div>
      <div class="mdui-card-content">
        <button class="mdui-btn" disabled>ND's Website</button>
        <button class="mdui-btn mdui-ripple mdui-btn-raised">ND's Website</button>
        <button class="mdui-btn mdui-color-blue-600 mdui-ripple mdui-btn-raised">ND's Website</button>
      </div>
    </div>
    <p></p>
    <mdui-card style="width: 100%"class="mdui-hoverable">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">MDUI v2 (基于 Material Web)</div>
      </div>
      <div class="mdui-card-content">
        <mdui-button variant="outlined">ND's Website</mdui-button>
        <mdui-button variant="tonal">ND's Website</mdui-button>
        <mdui-button variant="filled">ND's Website</mdui-button>
        <mdui-button variant="elevated">ND's Website</mdui-button>
      </div>
    </mdui-card>
    <p></p>
    <fluent-card class="custom mdui-hoverable">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Fluent UI</div>
      </div>
      <div class="mdui-card-content">
        <fluent-button Disabled="true">ND's Website</fluent-button>
        <fluent-button>ND's Website</fluent-button>
        <fluent-button appearance="accent">ND's Website</fluent-button>
      </div>
    </fluent-card>
    <p></p>
  </div>

  <script src="https://cdn.bytedance.com/cdn/mdui/1.0.2/js/mdui.min.js"></script>
  <script src="https://unpkg.com/mdui@2.0.1/mdui.global.js"></script>
  <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  <style>body {background-color: #f1f3f5;}</style>
</body>
</html>
CSS

  

  

    
JavaScript