Web-Components/index.html at master · jackhw8/Web-Components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World Web Component</title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div>
  <hello-world userName="Gary"></hello-world>
  </div>
  <h1 style="color:red">Hello Jack!<h1>
  <lan-slider min=10 max=100 val=40 onchange="getSliderValue()"></lan-slider>
  <lan-button type="Default" onclick="resetOnclick()">Reset</lan-button>

  <lan-button type="danger" onclick="alert('YO!!!')">Alert User</lan-button>

  <textarea id="text-area"></textarea>

  <h1>LANButton example</h1>
    <div>
        <lan-button>Default</lan-button>
        <lan-button type="primary">Primary</lan-button>
        <lan-button type="success">Success</lan-button>
        <lan-button type="info">Info</lan-button>
        <lan-button type="warning">Warning</lan-button>
        <lan-button type="danger">Primary</lan-button>
    </div>
    <div>
        <lan-button plain>Plain</lan-button>
        <lan-button type="primary" plain>Primary</lan-button>
        <lan-button type="success" plain>Success</lan-button>
        <lan-button type="info" plain>Info</lan-button>
        <lan-button type="warning" plain>Warning</lan-button>
        <lan-button type="danger" plain>Primary</lan-button>
    </div>
    <div>
        <lan-button round>Round</lan-button>
        <lan-button type="primary" round>Primary</lan-button>
        <lan-button type="success" round>Success</lan-button>
        <lan-button type="info" round>Info</lan-button>
        <lan-button type="warning" round>Warning</lan-button>
        <lan-button type="danger" round>Primary</lan-button>
    </div>
    <div>
        <lan-button>Default</lan-button>
        <lan-button size="medium">Medium</lan-button>
        <lan-button size="small">Small</lan-button>
        <lan-button size="mini">Mini</lan-button>
    </div>
    <div>
        <lan-button disabled>Disabled</lan-button>
        <lan-button type="primary" disabled>Primary</lan-button>
        <lan-button type="success" disabled>Success</lan-button>
        <lan-button type="info" disabled>Info</lan-button>
        <lan-button type="warning" disabled>Warning</lan-button>
        <lan-button type="danger" disabled>Danger</lan-button>
    </div>
    <div>
      <lan-button class="btn btn-primary btn-lg" >Bootstrap Button</lan-button>
    </div>
    <div>
      <lan-button type="primary" onclick="openMessageBox()">messagebox with input</lan-button>
    </div>
    <lan-messagebox showInput inputPlaceholder="test@google.com" validator = "email">
        <span slot="title">email</span>
        <p slot="text"><i>confirm</i> <strong>your </strong>email</p>
    </lan-messagebox>
  <script>
    function resetOnclick(){
      var element = document.querySelector("lan-slider");
      element.setAttribute("val", 0);
    }
  </script>

  <script>
    const messagebox = document.querySelector('lan-messagebox');
    function openMessageBox(){
      if (!messagebox.hasAttribute('opened')) {
        messagebox.open();
      }
    }
    messagebox.addEventListener('confirm', () => {
      console.log(messagebox.getValue());
    });

    messagebox.addEventListener('cancel', () => {
      alert('Cancelled...');
    });
    function getSliderValue() {
      var element = document.querySelector("lan-slider");
      var textArea = document.querySelector('#text-area')
      textArea.innerHTML = element.getAttribute("val");
    }
  </script>
  <!-- <script src="https://unpkg.com/lannister-component@1.0.1/bundle.js"></script> -->
  <script type = "module" src="index.js"></script>

</body>
</html>