Skip to content

Commit 1958dec

Browse files
erimicelerimicel
committed
Demo pages
1 parent 5236bc0 commit 1958dec

7 files changed

+167
-8
lines changed

‎demo/css/select2-tailwindcss-theme.min.css

-1
This file was deleted.

‎demo/css/tailwind.css

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html

+133-6
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,144 @@
77
<title>Select2 Tailwindcss Theme</title>
88

99
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
10-
<link href="css/select2-tailwindcss-theme.min.css" rel="stylesheet">
11-
10+
<link href="css/tailwind.css" rel="stylesheet">
11+
1212
<script src="https://cdn.tailwindcss.com"></script>
1313
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
1414
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
1515
</head>
1616

1717
<body>
18-
<h1 class="text-3xl font-bold underline">
19-
Hello world!
20-
</h1>
18+
19+
<h3>
20+
Example of erimicel/select2-tailwindcss-theme
21+
</h3>
22+
23+
<div class="container">
24+
<form>
25+
<div class="form-group">
26+
<label>Example of select</label>
27+
<select data-placeholder="Choose one thing" data-allow-clear="1">
28+
<option></option>
29+
<option>1</option>
30+
<option>2</option>
31+
<option>3</option>
32+
<option>4</option>
33+
<option>5</option>
34+
</select>
35+
</div>
36+
37+
<div class="form-group">
38+
<label>Example of multiple select</label>
39+
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
40+
<option>Tommy Yount</option>
41+
<option>Hye Panter</option>
42+
<option>Vi Yohe</option>
43+
<option>Keva Bandy</option>
44+
<option>Hannelore Corning</option>
45+
<option>Delorse Whitcher</option>
46+
<option>Katharyn Marrinan</option>
47+
<option>Jeannine Tope</option>
48+
<option>Jamila Braggs</option>
49+
<option>Eden Cunniff</option>
50+
<option>Suzy Schoen</option>
51+
<option>Elza Mccook</option>
52+
<option>Liana Goris</option>
53+
<option>Pauletta Schlabach</option>
54+
<option>Synthia Dupuis</option>
55+
<option>Scarlett Kestler</option>
56+
<option>Magdalen Mele</option>
57+
<option>Susanna Schenk</option>
58+
<option>Else Stupka</option>
59+
<option>Pennie Khang</option>
60+
</select>
61+
</div>
62+
63+
<div class="form-group">
64+
<label>Example of disabled select</label>
65+
<select disabled data-placeholder="Cannot choose" data-allow-clear="1">
66+
</select>
67+
</div>
68+
69+
<div class="form-group">
70+
<label>Example of disabled multiple select with selected items</label>
71+
<select disabled multiple>
72+
<option selected>Tommy Yount</option>
73+
<option selected>Hye Panter</option>
74+
<option selected>Vi Yohe</option>
75+
</select>
76+
</div>
77+
78+
<div class="form-group">
79+
<label>Example of select with optgroup</label>
80+
<select data-placeholder="Choose one thing" data-allow-clear="1">
81+
<option></option>
82+
<optgroup label="Group A">
83+
<option>A1</option>
84+
<option>A2</option>
85+
<option>A3</option>
86+
</optgroup>
87+
<optgroup label="Group B">
88+
<option>B1</option>
89+
<option>B2</option>
90+
<option>B3</option>
91+
</optgroup>
92+
</select>
93+
</div>
94+
95+
<div class="form-group">
96+
<label>Example of input-group</label>
97+
<div class="input-group">
98+
<div class="input-group-prepend">
99+
<span class="input-group-text">Prepend</span>
100+
</div>
101+
<select data-placeholder="Choose one thing" data-allow-clear="1">
102+
<option></option>
103+
<option>1</option>
104+
<option>2</option>
105+
<option>3</option>
106+
</select>
107+
</div>
108+
<div class="input-group mt-2">
109+
<select data-placeholder="Choose one thing" data-allow-clear="1">
110+
<option></option>
111+
<option>1</option>
112+
<option>2</option>
113+
<option>3</option>
114+
</select>
115+
<div class="input-group-append">
116+
<span class="input-group-text">Append</span>
117+
</div>
118+
</div>
119+
<div class="input-group mt-2">
120+
<div class="input-group-prepend">
121+
<span class="input-group-text">Prepend</span>
122+
</div>
123+
<select data-placeholder="Choose one thing" data-allow-clear="1">
124+
<option></option>
125+
<option>1</option>
126+
<option>2</option>
127+
<option>3</option>
128+
</select>
129+
<div class="input-group-append">
130+
<span class="input-group-text">Append</span>
131+
</div>
132+
</div>
133+
</div>
134+
135+
<div class="form-group">
136+
<label>Example of validated select</label>
137+
<select data-placeholder="Invalid example" class="form-control is-invalid" data-allow-clear="1">
138+
<option></option>
139+
</select>
140+
<div class="invalid-feedback">
141+
Something is wrong.
142+
</div>
143+
</div>
144+
</form>
145+
</div>
146+
147+
<script src="js/script.js"></script>
21148
</body>
22149

23-
</html>
150+
</html>

‎demo/js/script.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
$(function () {
2+
$('select').each(function () {
3+
$(this).select2({
4+
theme: 'tailwindcss-3',
5+
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
6+
placeholder: $(this).data('placeholder'),
7+
allowClear: Boolean($(this).data('allow-clear')),
8+
closeOnSelect: !$(this).attr('multiple'),
9+
});
10+
});
11+
});

‎demo/tailwind.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./**/*.{html,js}',
5+
],
6+
theme: {
7+
extend: {},
8+
},
9+
plugins: [],
10+
}
11+

‎demo/tailwind.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"build": "sass src/select2-tailwindcss-theme.scss dist/select2-tailwindcss-theme.css",
88
"build:min": "MINIFY=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme.min.css --verbose",
99
"build:plain": "VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.css --verbose",
10-
"build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose"
10+
"build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose",
11+
"build:demo": "npx tailwindcss -i ./demo/tailwind.css -o ./demo/css/tailwind.css --minify"
1112
},
1213
"repository": {
1314
"type": "git",

0 commit comments

Comments
 (0)