-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
197 lines (192 loc) · 5.74 KB
/
Copy pathindex.html
File metadata and controls
197 lines (192 loc) · 5.74 KB
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>panel-set demo</title>
<script async type="module" src="panel-set.mjs"></script>
<script async type="module" src="panel-set-two.mjs"></script>
<style>
body {
margin: 1rem;
}
/*
test: MacBook pro (mojave v10.14.1)
Desktop Safari v12.0.1
result: "::part()" does not work in webkit
*/
/* #my-panel-set::part(ps-details) {
min-height: 16px;
background-color: red;
} */
/* #my-panel-set::part(ps-summary) {
min-height: 16px;
background-color: gray;
} */
/* #my-panel-set::part(ps-tabs) {
color: red;
} */
/* #my-panel-set::part(ps-panels) {
min-height: 16px;
background-color: yellow;
} */
</style>
</head>
<body>
<h3>Lentil Soup... two examples</h3>
<p>Example A:</p>
<panel-set id="my-panel-set">
<a href="" id="tab-1" slot="ps:tab-1">Ingredients</a>
<ul aria-labelledby="tab-1" slot="ps:panel-1">
<li>garlic</li>
<li>onion (8oz)</li>
<li>crushed tomatoes (24 oz)</li>
<li>water (4 cups)</li>
<li>carrots (4 large chopped and peeled)</li>
<li>celery (2)</li>
<li>extra virgin olive oil (1/3 cup)</li>
<li>lentils (2 cups)</li>
<li>italian sausage (1 pound)</li>
<li>salt (1 tsp)</li>
<li>pepper (2 tsp)</li>
<li>basil (2 tsp)</li>
<li>oregano (2 tbsp)</li>
</ul>
<a href="" active id="tab-2" slot="ps:tab-2">Directions</a>
<ol active aria-labelledby="tab-2" slot="ps:panel-2">
<li>In a large pot, heat extra virgin olive oil over medium heat</li>
<li>Stir in the onions, carrots, and celery</li>
<li>Cook and stir until the onion is tender</li>
<li>Mix in garlic, oregano, and basil and cook for 2 minutes</li>
<li>Stir in lentils, water, and tomatoes and bring to a boil</li>
<li>Reduce heat and simmer for at least 1 hour</li>
<li>Season to taste with salt and pepper</li>
</ol>
<a href="" id="tab-3" slot="ps:tab-3">Nutrition</a>
<div active aria-labelledby="tab-3" slot="ps:panel-3">
Nutritional Information
Lentil Soup
Servings Per Recipe: 6
Amount Per Serving
Calories: 349
% Daily Value *
Total Fat: 10g
15 %
Saturated Fat: 1.0g
Cholesterol: 0mg
0 %
Sodium: 131mg
5 %
Potassium: 970mg
27 %
Total Carbohydrates: 48.2g
16 %
Dietary Fiber: 22.2g
89 %
Protein: 18.3g
37 %
Sugars: 3g
Vitamin A: 4230IU
Vitamin C: 13mg
Calcium: 98mg
Iron: 6mg
Thiamin: 0mg
Niacin: 6mg
Vitamin B6: 1mg
Magnesium: 104mg
Folate: 334mcg
*
Percent Daily Values are based on a 2,000 calorie diet. Your daily values may be higher or lower depending on your calorie needs.
**
Nutrient information is not available for all ingredients. Amount is based on available nutrient data.
(-)
Information is not currently available for this nutrient. If you are following a medically restrictive diet, please consult your doctor or registered dietitian before preparing this recipe for personal consumption.
Powered by the ESHA Research Database © 2020,
ESHA Research, Inc. All Rights Reserved
</div>
</panel-set>
<p>Example B:</p>
<panel-set-two theme="default">
<h2 x-title>Ingredients</h2>
<div x-content>
<ul>
<li>garlic</li>
<li>onion (8oz)</li>
<li>crushed tomatoes (24 oz)</li>
<li>water (4 cups)</li>
<li>carrots (4 large chopped and peeled)</li>
<li>celery (2)</li>
<li>extra virgin olive oil (1/3 cup)</li>
<li>lentils (2 cups)</li>
<li>italian sausage (1 pound)</li>
<li>salt (1 tsp)</li>
<li>pepper (2 tsp)</li>
<li>basil (2 tsp)</li>
<li>oregano (2 tbsp)</li>
</ul>
</div>
<h2 x-title>Directions</h2>
<div x-content>
<ol>
<li>In a large pot, heat extra virgin olive oil over medium heat</li>
<li>Stir in the onions, carrots, and celery</li>
<li>Cook and stir until the onion is tender</li>
<li>Mix in garlic, oregano, and basil and cook for 2 minutes</li>
<li>Stir in lentils, water, and tomatoes and bring to a boil</li>
<li>Reduce heat and simmer for at least 1 hour</li>
<li>Season to taste with salt and pepper</li>
</ol>
</div>
<h2 x-title>Nutrition</h2>
<div x-content>
<pre>
Nutritional Information
Lentil Soup
Servings Per Recipe: 6
Amount Per Serving
Calories: 349
% Daily Value *
Total Fat: 10g
15 %
Saturated Fat: 1.0g
Cholesterol: 0mg
0 %
Sodium: 131mg
5 %
Potassium: 970mg
27 %
Total Carbohydrates: 48.2g
16 %
Dietary Fiber: 22.2g
89 %
Protein: 18.3g
37 %
Sugars: 3g
Vitamin A: 4230IU
Vitamin C: 13mg
Calcium: 98mg
Iron: 6mg
Thiamin: 0mg
Niacin: 6mg
Vitamin B6: 1mg
Magnesium: 104mg
Folate: 334mcg
*
Percent Daily Values are based on a 2,000 calorie diet. Your daily values may be higher or lower depending on your calorie needs.
**
Nutrient information is not available for all ingredients. Amount is based on available nutrient data.
(-)
Information is not currently available for this nutrient. If you are following a medically restrictive diet, please consult your doctor or registered dietitian before preparing this recipe for personal consumption.
Powered by the ESHA Research Database © 2020,
ESHA Research, Inc. All Rights Reserved</pre
>
</div>
</panel-set-two>
<script>
const panelSet = document.querySelector('#my-panel-set');
panelSet.addEventListener('ps:change', function(evt){
console.log(evt.detail);
});
</script>
</body>
</html>