Workspace yorumları

Çalışma alanı yorumu, metin girebileceğiniz bir grafik öğedir. Metin tabanlı bir programlama dilindeki yorumlar gibi genellikle kodunuzla ilgili şeyleri belgelemek için kullanılır.

Not: Çalışma alanı yorumları flyout eklenemez.

Çalışma alanı yorumlarını etkinleştir

Uygulamanızda Workspace yorumlarını etkinleştirmek için kullanıcılara bunları oluşturmaları için bir yöntem sunmanız gerekir. Bunu yapmanın bir yolu, çalışma alanı yorumu oluşturan bir içerik menüsü öğesi eklemektir. Çalışma alanı yorumlarını oluşturmak, silmek ve kopyalamak için varsayılan içerik menüsü öğelerini aşağıdaki kodu kullanarak kaydedebilirsiniz:

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

Ayrıca, kendi içerik menüsü seçeneklerinizi oluşturabilir veya kullanıcının çalışma alanı yorumları eklemesi için başka bir yol ekleyebilirsiniz. İçerik menüsü seçenekleri hakkında daha fazla bilgi için İçerik menüleri konusuna bakın.

Yorumları görsel olarak özelleştirme

Çalışma alanı yorumlarının görünümünü özelleştirmenin birkaç yolu vardır. Bu öğelerde tema değil, CSS kullanılır. Yorumun farklı bölümlerinin çoğu renk ve boyutunu kontrol edebilirsiniz, ancak nasıl konumlandırılacağını kontrol edemezsiniz.

Renk CSS değişkenleri

Metin alanının arka plan rengini değiştirmek için commentFillColour css değişkenini ayarlayabilirsiniz. Yorum üst çubuğun ve yorumun kenarlığının rengini değiştirmek için commentBorderColour css değişkenini ayarlayabilirsiniz.

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

CSS sınıfları

Yorum görünümünün farklı öğelerine atanmış farklı css sınıfları vardır. Bu sınıflar, öğelerin stilini değiştirmenize olanak tanır.

CSS sınıfları	Resim
blocklyYorum, blocklyDraggable
blocklySelected, blocklyYorumVurgulama
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyReviewPreview, blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

Temel CSS kullanımı

Çoğu durumda, özel özelliklerinizi uygun CSS sınıfıyla uygulayabilirsiniz:

.blocklyCommentTopbarBackground {
  height: 50px;
}

Metin için CSS

Ancak metin söz konusu olduğunda, oluşturucu tarafından oluşturulan CSS'yi geçersiz kılmak için daha spesifik olmanız gerekir.

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

Seçilen öne çıkan özelliklerin CSS'si

Yorumun seçildiğinde vurgulanması için, yorumun daraltılıp daraltılmadığına bağlı olarak CSS'nin değişikliklere uygulanması gereken nesnedir. Daraltıldığında, CSS'yi blocklyCommentTopbarBackground öğesine, aksi takdirde blocklyCommentHighlight öğesine uygularsınız.

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

Simgeler

blocklyFoldoutIcon, blocklyDeleteIcon ve blocklyResizeHandle sınıflarının tümü <image> öğelerine uygulanır. Yani bir simgenin rengini veya şeklini değiştirmek isterseniz medya klasörünüze farklı bir resim ekleyebilirsiniz.

Görüntü adı	Resim
katlama-ok.svg
sil-simge.svg
resize-handle.svg

Sil simgesi

Sil simgesi varsayılan olarak gizlidir. Etkinleştirmek istiyorsanız görünür hale getirmek için CSS kullanmanız gerekir:

.blocklyDeleteIcon {
  display: block;
}