Skip to content

Commit 99d6343

Browse files
brianvoebrianvoe
committed
docs - updated classes usage
1 parent 15a5153 commit 99d6343

File tree

1 file changed

+193
-41
lines changed

1 file changed

+193
-41
lines changed

‎src/docs/pages/settings/classes.vue‎

Lines changed: 193 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -10,87 +10,239 @@ export default defineComponent({
1010
HighlightStyle
1111
},
1212
mounted() {
13-
new SlimSelect({ select: this.$refs.mainSelect as HTMLSelectElement, cssClasses: { option: 'primary-option' } })
13+
// Method 1: Classes on the select element itself (applied to main container)
1414
new SlimSelect({
15-
select: this.$refs.secondarySelect as HTMLSelectElement,
16-
cssClasses: { option: 'secondary-option' }
15+
select: this.$refs.selectElementClasses as HTMLSelectElement
16+
})
17+
18+
// Method 2: Classes via cssClasses configuration (targeting specific elements)
19+
new SlimSelect({
20+
select: this.$refs.cssClassesConfig as HTMLSelectElement,
21+
cssClasses: {
22+
option: 'styled-option',
23+
main: 'styled-main',
24+
search: 'styled-search'
25+
}
1726
})
1827
}
1928
})
2029
</script>
2130

2231
<style lang="scss">
23-
.primary-option,
24-
.secondary-option {
25-
padding: 0.25rem 0.5rem;
26-
cursor: pointer;
27-
}
28-
.primary-option {
29-
color: var(--ss-bg-color);
30-
background: var(--ss-primary-color);
32+
.select-wrapper {
33+
display: flex;
34+
flex-direction: column;
35+
gap: 0.5rem;
3136
32-
&:hover {
33-
color: var(--ss-primary-color);
34-
background: var(--ss-bg-color);
37+
label {
38+
font-weight: 600;
39+
font-size: 0.875rem;
40+
color: var(--ss-text-color);
3541
}
3642
}
37-
.secondary-option {
38-
color: var(--ss-primary-color);
39-
background: var(--ss-bg-color);
43+
44+
.method-note {
45+
font-size: 0.75rem;
46+
color: var(--ss-text-color);
47+
opacity: 0.7;
48+
margin-top: 0.25rem;
49+
font-style: italic;
50+
}
51+
52+
/* Method 1: Classes applied to main container from select element */
53+
.bordered-select {
54+
border: 3px solid var(--ss-primary-color) !important;
55+
box-shadow:
56+
0 0 0 2px var(--ss-primary-color),
57+
0 0 0 4px rgba(88, 151, 251, 0.2),
58+
0 4px 12px rgba(0, 0, 0, 0.2) !important;
59+
padding: 4px !important;
60+
}
61+
62+
/* Method 2: Classes via cssClasses config - targeting specific elements */
63+
.styled-option {
64+
padding: 0.75rem 1rem !important;
65+
border-left: 5px solid var(--ss-primary-color) !important;
66+
color: var(--ss-primary-color) !important;
67+
font-weight: 600 !important;
68+
background: rgba(88, 151, 251, 0.1) !important;
69+
margin: 2px 0 !important;
70+
transition: all 0.2s ease !important;
4071
4172
&:hover {
42-
color: var(--ss-bg-color);
43-
background: var(--ss-primary-color);
73+
background: var(--ss-primary-color) !important;
74+
color: var(--ss-bg-color) !important;
75+
transform: translateX(4px) !important;
76+
box-shadow: -2px 0 12px rgba(88, 151, 251, 0.4) !important;
4477
}
4578
}
79+
80+
.styled-main {
81+
border: 3px dashed var(--ss-primary-color) !important;
82+
padding: 4px !important;
83+
box-shadow:
84+
inset 0 0 15px rgba(88, 151, 251, 0.15),
85+
0 2px 6px rgba(0, 0, 0, 0.15) !important;
86+
background: rgba(88, 151, 251, 0.03) !important;
87+
}
88+
89+
.styled-search {
90+
font-weight: 700 !important;
91+
font-size: 1.1em !important;
92+
border-bottom: 3px solid var(--ss-primary-color) !important;
93+
background: rgba(88, 151, 251, 0.08) !important;
94+
padding: 0.5rem !important;
95+
box-shadow: 0 2px 6px rgba(88, 151, 251, 0.25) !important;
96+
}
4697
</style>
4798

4899
<template>
49100
<div id="cssClasses" class="content">
50101
<h2 class="header">cssClasses</h2>
51102
<p>
52-
The cssClasses setting allows you to add custom CSS classes to SlimSelect's default classes. Your custom classes
53-
are appended to the default SlimSelect classes (like 'ss-main', 'ss-option', etc.), giving you the ability to add
54-
additional styling without breaking SlimSelect's core functionality.
103+
There are two ways to add custom CSS classes to SlimSelect: by adding classes directly to the original
104+
<code>&lt;select&gt;</code> element, or by using the <code>cssClasses</code> configuration object. Both methods
105+
allow you to add additional styling without breaking SlimSelect's core functionality.
55106
</p>
56107
<p>
57-
You can add classes to various elements like options, the main container, search input, and more. The default
58-
classes are always preserved to ensure proper functionality, while your custom classes provide additional styling
59-
hooks. This allows you to integrate seamlessly with CSS frameworks like Tailwind CSS or your own design system.
108+
Classes added to the <code>&lt;select&gt;</code> element are applied to the main SlimSelect container, while the
109+
<code>cssClasses</code> configuration allows you to target specific elements like options, the main container,
110+
search input, and more. Your custom classes are appended to SlimSelect's default classes (like 'ss-main',
111+
'ss-option', etc.), ensuring proper functionality while providing additional styling hooks.
60112
</p>
61113

62114
<div class="row">
63-
<select ref="mainSelect">
64-
<option value="value1">Value 1</option>
65-
<option value="value2">Value 2</option>
66-
<option value="value3">Value 3</option>
67-
</select>
68-
<select ref="secondarySelect">
69-
<option value="value1">Value 1</option>
70-
<option value="value2">Value 2</option>
71-
<option value="value3">Value 3</option>
72-
</select>
115+
<div class="select-wrapper">
116+
<label>Method 1: Classes on Select Element</label>
117+
<select ref="selectElementClasses" class="bordered-select">
118+
<option value="apple">Apple</option>
119+
<option value="banana">Banana</option>
120+
<option value="cherry">Cherry</option>
121+
<option value="date">Date</option>
122+
<option value="elderberry">Elderberry</option>
123+
</select>
124+
<p class="method-note">Classes on the select element are applied to the main container</p>
125+
</div>
126+
<div class="select-wrapper">
127+
<label>Method 2: Classes via cssClasses Config</label>
128+
<select ref="cssClassesConfig">
129+
<option value="red">Red</option>
130+
<option value="green">Green</option>
131+
<option value="blue">Blue</option>
132+
<option value="yellow">Yellow</option>
133+
<option value="purple">Purple</option>
134+
</select>
135+
<p class="method-note">cssClasses config targets specific elements (options, main, search, etc.)</p>
136+
</div>
73137
</div>
74138

139+
<h3>Method 1: Classes on the Select Element</h3>
140+
<p>
141+
Add classes directly to the <code>&lt;select&gt;</code> element. These classes will be applied to the main
142+
SlimSelect container (the element with class <code>ss-main</code>).
143+
</p>
144+
<HighlightStyle language="html">
145+
<pre>
146+
&lt;select id="my-select" class="bordered-select"&gt;
147+
&lt;option value="apple"&gt;Apple&lt;/option&gt;
148+
&lt;option value="banana"&gt;Banana&lt;/option&gt;
149+
&lt;option value="cherry"&gt;Cherry&lt;/option&gt;
150+
&lt;/select&gt;
151+
</pre>
152+
</HighlightStyle>
153+
154+
<HighlightStyle language="javascript">
155+
<pre>
156+
new SlimSelect({
157+
select: '#my-select'
158+
// Classes from the select element are automatically applied to the main container
159+
// No cssClasses config needed - classes on select element are used automatically
160+
})
161+
</pre>
162+
</HighlightStyle>
163+
164+
<HighlightStyle language="css">
165+
<pre>
166+
/* This class is applied to the main container (ss-main) */
167+
.bordered-select {
168+
border: 3px solid var(--ss-primary-color);
169+
box-shadow: 0 0 0 2px var(--ss-primary-color),
170+
0 0 0 4px rgba(88, 151, 251, 0.2),
171+
0 4px 12px rgba(0, 0, 0, 0.2);
172+
background: rgba(88, 151, 251, 0.05);
173+
padding: 4px;
174+
}
175+
</pre>
176+
</HighlightStyle>
177+
178+
<h3>Method 2: Classes via cssClasses Configuration</h3>
179+
<p>
180+
Use the <code>cssClasses</code> configuration object to target specific SlimSelect elements. Your custom classes
181+
are appended to SlimSelect's default classes (e.g., <code>ss-option</code>, <code>ss-main</code>, etc.).
182+
</p>
75183
<HighlightStyle language="html">
76184
<pre>
77-
&lt;select id="primary-select"&gt;
78-
&lt;option value="value1"&gt;Value 1&lt;/option&gt;
79-
&lt;option value="value2"&gt;Value 2&lt;/option&gt;
80-
&lt;option value="value3"&gt;Value 3&lt;/option&gt;
185+
&lt;select id="my-select"&gt;
186+
&lt;option value="red"&gt;Red&lt;/option&gt;
187+
&lt;option value="green"&gt;Green&lt;/option&gt;
188+
&lt;option value="blue"&gt;Blue&lt;/option&gt;
81189
&lt;/select&gt;
82190
</pre>
83191
</HighlightStyle>
84192

85193
<HighlightStyle language="javascript">
86194
<pre>
87195
new SlimSelect({
88-
select: '#primary-select',
196+
select: '#my-select',
89197
cssClasses: {
90-
option: "primary-option" // Appended to 'ss-option', resulting in class="ss-option primary-option"
198+
option: 'styled-option', // Appended to 'ss-option'
199+
main: 'styled-main', // Appended to 'ss-main'
200+
search: 'styled-search' // Appended to 'ss-search'
91201
}
92202
})
93203
</pre>
94204
</HighlightStyle>
205+
206+
<HighlightStyle language="css">
207+
<pre>
208+
/* Classes are appended to default SlimSelect classes */
209+
/* Result: class="ss-option styled-option" */
210+
.styled-option {
211+
padding: 0.75rem 1rem;
212+
border-left: 5px solid var(--ss-primary-color);
213+
color: var(--ss-primary-color);
214+
font-weight: 600;
215+
background: rgba(88, 151, 251, 0.1);
216+
margin: 2px 0;
217+
transition: all 0.2s ease;
218+
}
219+
220+
.styled-option:hover {
221+
background: var(--ss-primary-color);
222+
color: var(--ss-bg-color);
223+
transform: translateX(4px);
224+
box-shadow: -2px 0 12px rgba(88, 151, 251, 0.4);
225+
}
226+
227+
/* Result: class="ss-main styled-main" */
228+
.styled-main {
229+
border: 3px dashed var(--ss-primary-color);
230+
padding: 4px;
231+
box-shadow: inset 0 0 15px rgba(88, 151, 251, 0.15),
232+
0 2px 6px rgba(0, 0, 0, 0.15);
233+
background: rgba(88, 151, 251, 0.03);
234+
}
235+
236+
/* Result: class="ss-search styled-search" */
237+
.styled-search {
238+
font-weight: 700;
239+
font-size: 1.1em;
240+
border-bottom: 3px solid var(--ss-primary-color);
241+
background: rgba(88, 151, 251, 0.08);
242+
padding: 0.5rem;
243+
box-shadow: 0 2px 6px rgba(88, 151, 251, 0.25);
244+
}
245+
</pre>
246+
</HighlightStyle>
95247
</div>
96248
</template>

0 commit comments

Comments
 (0)