Installation

Hakkında

Material Design tarafından açıklandığı gibi dalgalanmalar, kullanıcılara bir ögeye dokunulduğuna dair net bir sinyal sağlayan dokunma olayları için görsel bir geri bildirim biçimidir.

Üç tür dalgalanma hareketi vardır:

• Varsayılan: Dalgalanma temas noktasından yayılır ve orada kalır. Çoğu dalgalanma yüzeyinde/ögesinde bulunur.
• Yeniden ortalanmış: Dalgalanma temas noktasından yayılır, ancak animasyon sırasında ögenin merkezine doğru hareket eder. Genellikle klasik düzenleyicinin üst araç çubuğundakiler gibi küçük düğmelerde bulunabilir.
• Sınırsız: Dalgalanma ögenin merkezinden çıkar ve orada kalır. Genellikle Hareketli İşlem Düğmeleri (HİD'ler) gibi daire şeklindeki ögeler için kullanılır.

Ripple'ın süresi, rengi, süresi, bozulma süresi ve boyutu, ihtiyaçlarınıza ve marka/stil seçimlerinize uyacak şekilde özelleştirebileceğiniz özelliklerden bazılarıdır.

Usage

Çalışması için betiğini içe aktarmanın dışında bir şey yapmanız gerekmez. Ancak betiği, dalgalanma etkisine sahip olabilmek için daha fazla öge eklemek üzere yapılandırabilir ve dalgalanmanın kendisinin belirli ögeler üzerinde nasıl davranacağını da değiştirebilirsiniz.

Öge ekleme

Aşağıdaki özelliklerin herhangi bir kombinasyonuyla window.ripplesConfig adlı bir nesne oluşturarak daha fazla öğenin dalgalanma etkisine sahip olmasını sağlayabilirsiniz: normalRipples, recenteredRipples ve/veya sınırsız Dalgalar. Bu özelliklerden herhangi birinin değeri bir NodeList olmalıdır (document.querySelectorAll() yöntemi tarafından verilen ögelerin listesi).

Her özellik, eşleşen ögelere dalgalanmalar verir, ancak davranışları, hangi kategori olarak ayarlandıklarına bağlı olacaktır (her kategorinin nasıl davrandığını öğrenmek için hakkında bölümüne bakın).

Çok uzun; okuyamadım: Üç dalgalanma kategorisinin tümünü kullanan bir yapılandırma betik örneği şuna benzer:

window.ripplesConfig = {
  'normalRipples': document.querySelectorAll('.elements-1, .elements-2'),
  'recenteredRipples': document.querySelectorAll('.foo .bar'),
  'unboundedRipples': document.querySelectorAll('.lorem .ipsum')
};

Bu temelde şu anlama gelir:

• elements-1 ve elements-2 sınıflarına sahip ögeler, dokunulduğunda varsayılan dalgalanma davranışına sahip olacaktır.
• foo ve bar sınıflarına sahip ögeler, ortalanmış davranışa sahip bir dalgalanmaya sahip olacaktır.
• lorem ve ipsum sınıflarına sahip öğeler, sınırsız davranışa sahip bir dalgalanmaya sahip olacaktır.

Başka bir yol da, herhangi bir JavaScript'i düzenlemeden dokunmada dalgalanma efekti vermek için herhangi bir öğeye aşağıdaki veri özniteliklerinden herhangi birini eklemektir:

• [data-ripple] ögeye normal bir dalgalanma verir.
• [data-recentered] ögeye ortalanmış bir dalgalanma verir.
• [data-unbounded] ögeye sınırsız bir dalgalanma verir.

Her bir duruma örnek olarak şunlar verilebilir:

<div class="wds-button has-ripple">Touch me!</div>

<div class="wds-button recentered-ripple">Yeniden merkezlendim!</div>

<div class="wds-button unbounded-ripple">Ve ben sınırsızım!</div>

Yapabileceğiniz başka bir şey de, kullanıcı böyle bir etkiyi tetikleyemeyecek gibi görünen dalgalı bir yüzeyin üzerinde gezinirken hafif bir efekt eklemektir. Bu, göreceli olarak konumlandırılmış bir ögede ::before veya ::after gibi sözde sınıflar kullanılarak yapılabilir:

<div class="card has-ripple">Üzerime gel ve bana dokun!</div>

.card {
  align-items: center;
  background-color: var(--theme-page-background-color--secondary);
  border-radius: 8px;
  display: flex;
  height: 14em;
  justify-content: center;
  margin: 1em;
  overflow: hidden;
  padding: 24px;
  position: relative;
  text-align: center;
  width: 10em;
}

.card:hover {
  cursor: pointer;
}

.card::before {
  background-color: currentColor;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 15ms linear, background-color 15ms linear;
  width: 100%;
  z-index: 1;
}

.card:hover::before {
  opacity: .04;
}

.card:active::before,
.card:focus-within::before {
  opacity: .12;
  transition-duration: 75ms;
}

Davranışı değiştirme

CSS özel özelliklerini (değişkenleri) kullanarak dalgalanmaların bazı özelliklerini öge başına veya öğe gruplarına göre değiştirebilirsiniz. Her değişkenin ne yaptığını öğrenmek için API bölümüne gidin.

Çok uzun; okuyamadım: Mevcut tüm değişkenleri kullanan bir yapılandırma stil sayfası örneği şuna benzer:

.nice-button {
  --ripple-config__duration--ms: 1000;
  --ripple-config__end-duration--ms: 500;
  --ripple-config__max-radius--px: 200;
  --ripple-config__min-duration--ms: 600;
  --ripple-config__timing-function: ease;
}

Bunun anlamı:

• nice-button sınıfına sahip öge, aşağıdakilerden oluşan belirli bir dalgalanma davranışına sahip olacaktır:
  • Süresi 1 saniye olacaktır (1000ms).
  • Kararma süresi yarım saniye (500ms) olacaktır.
  • Maksimum yarıçapı 400 piksel olacaktır (200 * 2).
  • Minimum süresi 0,6 saniye olacaktır (600ms).
  • Zamanlama işlevi ease olacaktır.

Ek olarak, bazı görsel özelliklerini de değiştirebilirsiniz:

.nice-button {
  --ripple-color: lime;
  --ripple-border-radius: 0;
  --ripple-opacity: 0.5;
}

Bu da şu anlama gelir:

• nice-button sınıfına sahip öge, görünümü aşağıdakilerden oluşan bir dalgalanmaya sahip olacaktır:
  • Rengi lime olacaktır.
  • Daire yerine kare olacaktır (kenarlık yarıçapı 0 olduğundan).
  • %50 opaklığa sahip olacaktır (0.5).

Examples

#var-card-1 {
  --ripple-config__duration--ms: 6000;
  --ripple-config__max-radius--px: 300;
  --ripple-color: #3ea6ff;
}

#var-card-2 {
  --ripple-config__duration--ms: 600;
  --ripple-config__max-radius--px: 150;
  --ripple-config__min-duration--ms: 500;
  --ripple-color: #e91e63;
  --ripple-border-radius: 30%;
  --ripple-opacity: 40%;
}

#var-card-3 {
  --ripple-config__end-duration--ms: 6000;
  --ripple-config__max-radius--px: 1000;
  --ripple-config__timing-function: ease;
  --ripple-color: #64dd17;
  --ripple-border-radius: 0;
  --ripple-opacity: 0.3;
}

#var-card-4 {
  --ripple-config__duration--ms: 1500;
  --ripple-config__end-duration--ms: 1600;
  --ripple-config__max-radius--px: 50;
  --ripple-config__min-duration--ms: 1000;
  --ripple-config__timing-function: ease-out;
  --ripple-color: #d500f9;
  --ripple-border-radius: 50%;
  --ripple-opacity: .35;
}

<div class="mdc-ripple has-ripple" id="mdc-card-1">Normal speed</div>
<div class="mdc-ripple has-ripple" id="mdc-card-2">1000% Slower</div>

/* (Cards' CSS not included). */
.mdc-ripple::before {
  background-color: currentColor;
  content: '';
  height: 200%;
  left: -50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: -50%;
  transition: opacity 75ms linear;
  width: 200%;
  z-index: 1;
}

.mdc-ripple:hover::before {
  opacity: .04;
}

.mdc-ripple:is(:focus, :focus-within, :active)::before {
  opacity: .12;
}

/* Normal speed. */
.mdc-ripple {
  --ripple-config__duration--ms: 225;
  --ripple-config__end-delay--ms: 3000;
  --ripple-config__end-duration--ms: 150;
  --ripple-config__max-radius--px: 2000;
  --ripple-config__min-duration--ms: 75;
  --ripple-config__timing-function: cubic-bezier(.4, 0, .2, 1);
  --ripple-opacity: .12;
}

/* x10 (1000%) slower. */
#mdc-card-2.mdc-ripple {
  --ripple-config__duration--ms: 2250;
  --ripple-config__end-duration--ms: 1500;
  --ripple-config__min-duration--ms: 750;
}

API

HTML ögeleri

Bu betiğinin çalışması için herhangi bir HTML yazmanız gerekmediğini unutmayın, ancak oluşturulan her öğenin amacını bilmek isteyebilirsiniz.

<div class="ripple-container"></div>

<div class="ripple"></div>

CSS seçicileri

[ripple]

[data-ripple]

[recentered]

[data-recentered]

[unbounded]

[data-unbounded]

CSS değişkenleri