Skip to content
Snippets Groups Projects
Select Git revision
  • a1fa21a41031cc07966cf851c85c9ae0e4c45ffa
  • master default protected
  • 1.31
  • 4.27.0
  • 4.26.0
  • 4.25.5
  • 4.25.4
  • 4.25.3
  • 4.25.2
  • 4.25.1
  • 4.25.0
  • 4.24.3
  • 4.24.2
  • 4.24.1
  • 4.24.0
  • 4.23.6
  • 4.23.5
  • 4.23.4
  • 4.23.3
  • 4.23.2
  • 4.23.1
  • 4.23.0
  • 4.22.3
23 results

Monster.Data.Pipe.html

Blame
    • 226.html 3.46 KiB 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>new slieder control #226</title>
    <script src="./226.mjs" type="module"></script>
    
    <style>

        :not(:defined) {
            display: none;
        }
        
        .slide {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        
        
        
          main {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
          }
          
            monster-slider::part(prev) {
            }
            
            monster-slider::part(control) {
                
            }
            
            .container {
                padding: 10px;
                width: 1200px;
                height: 600px;
                background-color: #cccccc;
                box-sizing: border-box;
                overflow: hidden;
            }
        
    </style>
</head>
<body>
    <h1>new slieder control #226</h1>
    <p>user aborted</p>
    <ul>
        <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/226">Issue #226</a></li>
        <li><a href="/">Back to overview</a></li>
    </ul>
    <main>
        
        <div class="container">
          <monster-slider>
              <div slot="prev"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
                      <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
                  </svg></div>
              <div class="slide" style="display:none;background-color: #ff6666;width:50px">
                  <h1>SLIDE 1</h1>
              </div>
              <div class="slide" style="background-color: #ff6666;width:50px">
                  <h1>SLIDE 1 a</h1>
              </div>
                  <div class="slide" style="background-color: #66ff66;width:50px;"><svg xmlns="http://www.w3.org/2000/svg"
                                                                         width="467" height="462">
                      <rect x="80" y="60" width="250" height="250" rx="20"
                            style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />

                      <rect x="140" y="120" width="250" height="250" rx="40"
                            style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
                  </svg></div>
              <div class="slide" style="background-color: #6666ff;width:50px;">
                  
                  <h1>SLIDE 3</h1>
                  
              </div>
              <div slot="next">

                  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
                      <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
                  </svg>
                  
              </div>
          </monster-slider>
        </div>

    </main>
</body>
</html>