-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.riot
134 lines (122 loc) · 8.72 KB
/
index.riot
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<index-riot>
<div style="width:600px;padding:20px;">
<h4 style="margin-bottom:20px">Riot + BeerCSS</h4>
<h5 style="margin-bottom:20px">Checkbox</h5>
<c-checkbox onchange={ (ev) => update({ box: ev.target.value }) } value={ state.box } label={ state.box } />
<!-- <c-checkbox onclick={ clicked } label="Enabled" />
<c-checkbox onclick={ clicked } label="Disabled" disabled={ true } />
<c-checkbox onclick={ clicked } label="Disabled" disabled={ true } value={ true } /> -->
<h5 style="margin-bottom:20px">Button</h5>
<c-button>Button</c-button>
<c-button icon="home">Button</c-button>
<c-button img="./favicon.png" inline="true">Button</c-button>
<c-button img="./favicon.png">Button</c-button>
<br><br>
<c-button smallround="true">Button</c-button>
<c-button smallround="true" icon="home">Button</c-button>
<c-button smallround="true" img="./favicon.png" inline="true">Button</c-button>
<c-button smallround="true" img="./favicon.png">Button</c-button>
<br><br>
<c-button smallround="true" secondary="true" small="true">Button</c-button>
<c-button smallround="true" icon="home" secondary="true" small="true">Button</c-button>
<c-button smallround="true" img="./favicon.png" inline="true" secondary="true" small="true">Button</c-button>
<c-button smallround="true" img="./favicon.png" secondary="true" small="true">Button</c-button>
<br><br>
<c-button smallround="true" tertiary="true" small="true">Button</c-button>
<c-button smallround="true" icon="home" tertiary="true" small="true">Button</c-button>
<c-button smallround="true" img="./favicon.png" inline="true" tertiary="true" small="true">Button</c-button>
<c-button smallround="true" img="./favicon.png" tertiary="true" small="true">Button</c-button>
<br><br>
<c-button outlined="true">Button</c-button>
<c-button outlined="true" icon="home">Button</c-button>
<c-button outlined="true" img="./favicon.png" inline="true">Button</c-button>
<c-button outlined="true" img="./favicon.png">Button</c-button>
<br><br>
<c-button outlined="true" smallround="true">Button</c-button>
<c-button outlined="true" smallround="true" icon="home">Button</c-button>
<c-button outlined="true" smallround="true" img="./favicon.png" inline="true">Button</c-button>
<c-button outlined="true" smallround="true" img="./favicon.png">Button</c-button>
<br><br>
<c-button circle="true" icon="home">
<c-badge slot="badge">1</c-badge>
</c-button>
<c-button smallround="true" icon="home">
Button
<c-badge slot="badge" inline="true">1</c-badge>
</c-button>
<br><br>
<c-button smallround="true" icon="home" responsive="true">Button</c-button>
<h5 style="margin-bottom:20px">FABs</h5>
<c-button icon="add" square="true"></c-button>
<c-button icon="add" square="true" round="true"></c-button>
<c-button icon="add" circle="true"></c-button>
<c-button icon="add" circle="true" leftround="true" topround="true"></c-button>
<c-button icon="add" circle="true" leftround="true" bottomround="true"></c-button>
<c-button icon="add" circle="true" rightround="true" topround="true"></c-button>
<c-button icon="add" circle="true" rightround="true" bottomround="true"></c-button>
<c-button icon="add" circle="true" leftround="true"></c-button>
<c-button icon="add" circle="true" rightround="true" ></c-button>
<br><br>
<c-button outlined="true" icon="add" square="true"></c-button>
<c-button outlined="true" icon="add" square="true" round="true"></c-button>
<c-button outlined="true" icon="add" circle="true"></c-button>
<c-button outlined="true" icon="add" circle="true" leftround="true" topround="true"></c-button>
<c-button outlined="true" icon="add" circle="true" leftround="true" bottomround="true"></c-button>
<c-button outlined="true" icon="add" circle="true" rightround="true" topround="true"></c-button>
<c-button outlined="true" icon="add" circle="true" rightround="true" bottomround="true"></c-button>
<c-button outlined="true" icon="add" circle="true" leftround="true"></c-button>
<c-button outlined="true" icon="add" circle="true" rightround="true" ></c-button>
<br><br>
<c-button outlined="true" img="./favicon.png" square="true"></c-button>
<c-button outlined="true" img="./favicon.png" square="true" round="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true" leftround="true" topround="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true" leftround="true" bottomround="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true" rightround="true" topround="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true" rightround="true" bottomround="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true" leftround="true"></c-button>
<c-button outlined="true" img="./favicon.png" circle="true" rightround="true" ></c-button>
<br><br>
<c-button icon="add" square="true" extend="true">Add</c-button>
<c-button icon="add" square="true" round="true" extend="true">Add</c-button>
<c-button icon="add" circle="true" extend="true">Add</c-button>
<c-button icon="add" circle="true" leftround="true" topround="true" extend="true">Add</c-button>
<!-- TODO: Investigate why it does not work
<h5 style="margin-bottom:20px">Button Groups</h5>
<c-button-group>
<c-button icon="search" vertical="true" outlined="true" large="true"/>
<c-button icon="edit" vertical="true" outlined="true" large="true"/>
<c-button icon="home" vertical="true" outlined="true" large="true"/>
</c-button-group>
-->
<h5 style="margin-bottom:20px">Input</h5>
<c-input label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input helper="This is a helper" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input error="Something is wrong" helper="This is a helper" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input icon="edit" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input iconend="edit" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input icon="search" iconend="edit" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input loading="true" icon="edit" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input loadingend="true" iconend="edit" label="Firstname" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
<c-input fill="true" round="true" small="true" label="Test" value={ state.firstname } onchange={ (ev) => update({ firstname: ev.target.value }) } onkeyup={ (ev) => update({ firstname: ev.target.value }) }></c-input>
</div>
<script>
import * as components from "./components/index.js";
export default {
components: components,
state: {
firstname: 'Default name',
box: true
},
clicked (ev) {
// ev.preventDefault();
// ev.stopPropagation();
// console.log("clicked", ev.target.value, ev.target.tagName);
// this.update({ box: ev.target.value === 'false' ? true : false })
},
changed (ev) {
// this.update({ box: ev.target.value });
}
}
</script>
</index-riot>