-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathzhvstack.html
219 lines (187 loc) · 8.69 KB
/
zhvstack.html
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!doctype html>
<html class="h-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="Personal Website">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon.png">
<meta name="author" content="Ali Erdem Kökcik">
<meta name="generator" content="aek">
<meta name="HandheldFriendly" content="true">
<title>Ali Erdem Kökcik</title>
<link rel="stylesheet" href="css/theme.min.css">
<style>
/* inter-300 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local(''),
url('fonts/inter-v12-latin-300.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/inter-v12-latin-300.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-400 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('fonts/inter-v12-latin-regular.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/inter-v12-latin-regular.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('fonts/inter-v12-latin-500.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/inter-v12-latin-500.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(''),
url('fonts/inter-v12-latin-700.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/inter-v12-latin-700.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
</style>
</head>
<body class="bg-black text-white mt-0" data-bs-spy="scroll" data-bs-target="#navScroll">
<nav id="navScroll" class="navbar navbar-dark bg-black fixed-top px-vw-5" tabindex="0">
<div class="container">
<a class="navbar-brand pe-md-4 fs-4 col-12 col-md-auto text-center" href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-stack"
viewBox="0 0 16 16">
<path
d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z" />
<path
d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
</svg>
<span class="ms-md-1 mt-1 fw-bolder me-md-5">Ali Erdem Kökcik</span>
</a>
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 list-group list-group-horizontal">
<li class="nav-item">
<a class="nav-link fs-5" href="index.html" aria-label="Homepage">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="content.html" aria-label="A sample content page">
Resume
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="system.html" aria-label="A system message page">
Contact
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="system.html" aria-label="A system message page">
Blog
</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="container">
<div class="row d-flex justify-content-center py-vh-5 pb-0">
<div class="col-12 col-lg-10 col-xl-8">
<div class="row">
<div class="col-12">
<h1 class="display-1 fw-bold">ZStack, VStack ve HStack nedir?</h1>
<h5>SwiftUI'de yığın (stack) kullanmak, karmaşık kullanıcı arayüzleri oluşturmak için uygulamalarınızı kolayca düzenlemenize olanak tanır.
Bu, tüm ekran boyutlarına uyan bir uygulama oluşturmak için auto-layout karmaşıklığı olmaksızın UIKit'teki yığın görünümlerine benzer.
SwiftUI, yığınlardaki her şeyi basitleştirerek UIKit'in karmaşık otomatik düzenini ortadan kaldırmıştır.
Kullanabileceğiniz ve birleştirebileceğiniz 3 farklı türde SwiftUI yığını vardır. Uygulamanızın kullanıcı arayüzünü nasıl tasarlamak istediğinize bağlı olarak, seçenekler şunlar:
<br></br>
<br>HStack, VStack ve ZStack.</br>
<img src="img/webp/vhzstack.webp">
<br></br>
ZStack, bir nesneyi öbürünün üstüne koymak için kullanılır. Mesela, bir fotoğrafın üzerine yazı ekleyecekseniz, ZStack bunun için harikadır.
<br>
<br>
Eğer yan yana dizilim yapacaksanız, bu sefer HStack kullanmanız gerekir. Soldan sağa doğru dizilimi vardır yani ilk eklediğiniz solda, diğer ekledikleriniz ilk eklediklerinizin sağına yerleştirilir.
<br>
<br>
Fakat yukarıdan aşağıya bir dizilim istiyorsanız, VStack kullanmanız gerekiyor. VStack'in dizilimi ise yukarıdan aşağı doğrudur yani ilk eklediğiniz yukarda, sonrakiler aşağıda konumlandırılır.
<br>
<br>
VStack ve HStack, spacing özelliğine sahiptir. Yani eklediğiniz nesnelerin arasındaki boşluğu belirler. Mesela,
<br>
<br>
VStack(alignment: 20)
<br>
<br>
Yazarak objelerin arasında 20 boşluk bırakılmasını söyleyebilirsiniz. ZStack'te bunu yapamazsınız çünkü nesneler birbiri üstüne geçecektir.
</h5>
</main>
<footer class="bg-black border-top border-dark">
<div class="container py-vh-4 text-secondary fw-lighter">
<div class="row">
<div class="col-12 col-lg-5 py-4 text-center text-lg-start">
<a class="navbar-brand pe-md-4 fs-4 col-12 col-md-auto text-center" href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-stack"
viewBox="0 0 16 16">
<path
d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z" />
<path
d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
</svg>
<span class="ms-md-1 mt-1 fw-bolder me-md-5">Ali Erdem Kökcik</span>
</a>
</div>
<div class="col border-end border-dark">
<span class="h6">Personal</span>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="link-fancy link-fancy-light">About me</a>
</li>
<li class="nav-item">
<a href="legal.html" class="link-fancy link-fancy-light">Legal</a>
</li>
<li class="nav-item">
<a href="#" class="link-fancy link-fancy-light">Contact</a>
</li>
</ul>
</div>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
duration: 800, // values from 0 to 3000, with step 50ms
});
</script>
<script>
let scrollpos = window.scrollY;
const header = document.querySelector(".navbar");
const header_height = header.offsetHeight;
const add_class_on_scroll = () => header.classList.add("scrolled", "shadow-sm");
const remove_class_on_scroll = () => header.classList.remove("scrolled", "shadow-sm");
window.addEventListener('scroll', function () {
scrollpos = window.scrollY;
if (scrollpos >= header_height) { add_class_on_scroll(); }
else { remove_class_on_scroll(); }
console.log(scrollpos);
})
</script>
</body>
</html>