blob: da5feaa6b92f2d82b562a80d809c33ca0e1823c2 (
plain)
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
135
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'autocomplete'
- var parent = 'experimentals'
- var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework'
- var description = 'Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('autocomplete', 'Autocomplete')
include ../_layout/_ad-g.pug
p
| Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
.docs-demo.columns
.column.col-9.col-xs-12
.form-group
.form-autocomplete
.form-autocomplete-input.form-input
span.chip
| Bruce Banner
.chip
img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
| Thor Odinson
.chip
img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
| Steve Rogers
.chip
figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
| Tony Stark
span.chip.active
| Natasha Romanoff
input.form-input(type="text" placeholder="")
.column.col-9.col-xs-12
.form-group
.form-autocomplete
.form-autocomplete-input.form-input.is-focused
span.chip
| Bruce Banner
a.btn.btn-clear(href="#" aria-label="Close" role="button")
span.chip
img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
| Thor Odinson
a.btn.btn-clear(href="#" aria-label="Close" role="button")
.has-icon-left
input.form-input(type="text" placeholder="" value="S")
i.form-icon.loading
ul.menu
li.menu-item
a(href="#autocomplete")
.tile.tile-centered
.tile-icon
img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
.tile-content
mark S
| teve Roger
mark s
li.menu-item
a(href="#autocomplete")
.tile.tile-centered
.tile-icon
figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
.tile-content
| Tony
mark S
| tark
p
| Add a container element with the #[code form-autocomplete] class.
| There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
| You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
p
| Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
| The autocomplete HTML structure is exampled below.
.docs-demo.columns
.column.col-9.col-xs-12
.form-group
.form-autocomplete.autocomplete-oneline
.form-autocomplete-input.form-input
span.chip
| Bruce Banner
.chip
img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
| Thor Odinson
.chip
img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
| Steve Rogers
.chip
figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
| Tony Stark
span.chip.active
| Natasha Romanoff
input.form-input(type="text" placeholder="")
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="form-autocomplete">
<!-- autocomplete input container -->
<div class="form-autocomplete-input form-input">
<!-- autocomplete chips -->
<div class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
Thor Odinson
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</div>
<!-- autocomplete real input box -->
<input class="form-input" type="text" placeholder="typing here">
</div>
<!-- autocomplete suggestion list -->
<ul class="menu">
<!-- menu list items -->
<li class="menu-item">
<a href="#">
<div class="tile tile-centered">
<div class="tile-icon">
...
</div>
<div class="tile-content">
...
</div>
</div>
</a>
</li>
</ul>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
