Bootstrap-webcomponents/basic.html at master · will-gilbert/Bootstrap-webcomponents · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap as Web Components</title>

  <link rel="shortcut icon" href="demo-assets/favicon.ico">

  <style>
    body {
      margin: 10px 60px;
      font-family:Arial, Helvetica, sans-serif;
    }

    #progress-bars {
      max-width: 60%;
    }
  </style>

  <script type='module' src='./js/Badge.js'></script>
  <script type='module' src='./js/Button.js'></script>
  <script type='module' src='./js/Tooltip.js'></script>

</head>
<body>

<div>


  <!-- B A D G E S =============================================================== -->
  <h2>Badges</h2>

  <div>
    <bswc-badge>Default</bswc-badge>
    <bswc-badge primary>Primary</bswc-badge>
    <bswc-badge secondary>Secondary</bswc-badge>
    <bswc-badge success>Success</bswc-badge>
    <bswc-badge info>Info</bswc-badge>
    <bswc-badge warning>Warning</bswc-badge>
    <bswc-badge danger>Danger</bswc-badge>
    <bswc-badge light>Light</bswc-badge>
    <bswc-badge dark>Dark</bswc-badge>
  </div>


  <!-- P I L L   B A D G E S  =============================================================  -->
  <h2>Pill Badges</h2>

  <div>
    <bswc-badge pill>Default</bswc-badge>
    <bswc-badge pill primary>Primary</bswc-badge>
    <bswc-badge pill secondary>secondary</bswc-badge>
    <bswc-badge pill success>Success</bswc-badge>
    <bswc-badge pill info>Info</bswc-badge>
    <bswc-badge pill warning>Warning</bswc-badge>
    <bswc-badge pill danger>Danger</bswc-badge>
    <bswc-badge pill light>Light</bswc-badge>
    <bswc-badge pill dark>Dark</bswc-badge>
  </div>

  <div>
    <bswc-button primary>Button with Pill<bswc-badge pill light>4</bswc-badge>
    </bswc-button>
  </div>


  <!-- B U T T O N S ====================================================================  -->
  <h2>Buttons</h2>

  <div>
    <bswc-button>Default</bswc-button>
    <bswc-button primary>Primary</bswc-button>
    <bswc-button secondary>Secondary</bswc-button>
    <bswc-button success>Success</bswc-button>
    <bswc-button info>Info</bswc-button>
    <bswc-button warning>Warning</bswc-button>
    <bswc-button danger>Danger</bswc-button>
    <bswc-button light>Light</bswc-button>
    <bswc-button dark>dark</bswc-button>
    <bswc-button link>Link</bswc-button>
  </div>


  <!-- T O O L T I P ============================================================= -->
  <h2>Tooltips</h2>
  <div>
    <p>
      <bswc-tooltip tip='Below "Bottom"' bottom
                  delay=0.0
                  duration=0.0>Bottom, no delay</bswc-tooltip>
      <span style='margin: 20px'>|</span>

      <bswc-tooltip tip='Above "Top" and very long tip' top
                  width=300>Top, wide tip</bswc-tooltip>
      <span style='margin: 20px'>|</span>

      <bswc-tooltip tip='Next to "Left"' left
                  delay=2.0>Left, 2s delay</bswc-tooltip>
      <span style='margin: 20px'>|</span>

      <bswc-tooltip tip='Next to "Right"' right
                  duration=1.0>Right, 1s duration</bswc-tooltip>
      <span style='margin: 20px'>|</span>

      <bswc-tooltip tip='Default is "top"'>Default</bswc-tooltip>
    </p>

    <bswc-tooltip tip='Over the Button' top>
      <bswc-button id="tooltip-target">Button</bswc-button>
    </bswc-tooltip>

  </div>


</body>
</html>