Emmet ile hızlı HTML oluşturma - R10.net
  • 24-11-2021, 11:35:45
    #1
    Merhaba
    Uzun süre boyunca emmet nedir bilmeden kod yazdım. En son kuzenimin kullandığını gördükten sonra öğrenmeye karar verdim. Son zamanlarda laptop kullandığım için bayağı bir yararını gördüm. Bundan ötürü bildiğim kadarını forumda paylaşmak istedim
    Burada paylaşacağım bilgiler sadece yazımı ile alakalıdır. Daha detaylı bilgiye buradan ulaşabilirsiniz
    Genişletmek için kendi IDE ayarlarınızda bulunan , bu işleve bağlı tuşu kullanmanız gerekmektedir. Bu tuş genellikle TAB yada SPACE tuşu oluyor.

    1 - Sadece tag oluşturma
    Tag oluşturmak için sadece tag adını yazıp genişletmemiz yeterlidir
    Örneğin:
    span
    <!-- Genişletildiği zaman -->
    <span></span>
    
    b
    <!-- Genişletildiği zaman -->
    <b></b>
    
    input
    <!-- Genişletildiği zaman -->
    <input type="text">
    2 - CSS class bağlama
    CSS classları . (nokta) ile elementlere bağlanabilir.
    .alert
    <!-- Genişletildiği zaman -->
    <div class="alert"></div>
    
    .alert.alert-danger
    <!-- Genişletildiği zaman -->
    <div class="alert alert-danger"></div>
    
    input.form-control
    <!-- Genişletildiği zaman -->
    <input type="text" class="form-control">
    3 - HTML ağacı oluşturma

    ul>li
    <!-- Genişletildiği zaman -->
    <ul>
    <li></li>
    </ul>
    
    ul.list-group>li.list-group-item
    <!-- Genişletildiği zaman -->
    <ul class="list-group">
    <li class="list-group-item"></li>
    </ul>
    4 - Aynı elementten birden çok oluşturulması:

    ul.list-group>li.list-group-item*3
    <!-- Genişletildiği zaman -->
    <ul class="list-group">
    <li class="list-group-item"></li>
    <li class="list-group-item"></li>
    <li class="list-group-item"></li>
    </ul>
    
    table>tbody>tr>td*4
    <!-- Genişletildiği zaman -->
    <table>
    <tbody>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    5 - Aynı ağaç seviyesinde birden çok dal oluşturma
    .row>.col-md-4+.col-md-8
    <!-- Genişletildiği zaman -->
    <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8"></div>
    </div>
    
    .form-group>label+input.form-control
    <!-- Genişletildiği zaman -->
    <div class="form-group">
    <label></label>
    <input type="text" class="form-control">
    </div>
    6 - Gruplandırma
    Gruplandırılacak kısım parantezler arasına alınır
    table>(thead>tr>th)+(tbody>tr>td)
    <!-- Genişletildiği zaman -->
    <table>
    <thead>
    <tr>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td></td>
    </tr>
    </tbody>
    </table>
    
    <!-- Biraz karıştırılalım -->
    table.table.table-bordered.table-striped.table-responsive>(thead>tr>th*5)+(tbody>tr>td*5)
    <!-- Genişletildiği zaman -->
    <table class="table table-bordered table-striped table-responsive">
    <thead>
    <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    7 - ID belirtme
    input#kullaniciadi
    <!-- Genişletildiği zaman -->
    <input type="text" id="kullaniciadi">
    8 - Ek özellikleri belirtme
    Özellikle input ve button elementlerinde işe yaramakta. Köşeli parantez kullanıyoruz.
    input[type="number"]
    <!-- Genişletildiği zaman -->
    <input type="number">
    
    input[type="number"][name="kullaniciadi"]
    <!-- Genişletildiği zaman -->
    <input type="number" name="kullaniciadi">
    
    <!--  butonlarda -->
    button.btn.btn-success[type="submit"]>i.mdi.mdi-content-save
    <!-- Genişletildiği zaman -->
    <button class="btn btn-success" type="submit"><i class="mdi mdi-content-save"></i></button>
    Emmet sadece HTML için değil, CSS içinde kullanılabilir. Cheatsheet'e bakarak diğer kullanımları da inceleyebilirsiniz.
    Umarım bu bilgiler size yardımcı olur.
    Kolay gelsin.
  • 24-11-2021, 11:37:38
    #2
    şuana kadar çıkarılmış en güzel eklentilerden birisi sıklıkla kullanıyorum