Timus Tag - Nuxt Module

TimusTag Vue bileşeni, kullanıcılara gelişmiş bir tag özellği sunar. Bu bileşen; prepend, content, append property'leri ile arayüzde 3 farklı değeri tek seferde göstermeyi hedefler. Ayrıca aldığı char, type, max-item parametreleri ile de içeriğin tipini ve boyutunu da otomatize edebilir.

Installation

• First install package npm i @timus-networks/tag

• Add package to module property in nuxt.config.js file

{
  "modules": ["@nuxtjs/axios", ["@timus-networks/tag", { "client": true, "typescript": false }]]
}

• You can manually set the client and typescript support properties.
• If you render this component on the client side, set the value to true.
• If you prefer to use typescript during development, set typescript to true.
• You can also set the namespace to define the module path's position within the .nuxt folder.

Kullanım

TimusTag bileşeni, kullanıcının belirlediği semantik'e göre tag oluşturmayı hedefler.

Props:

• type: Tag'ın rengini belirtir ('default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning')
• prepend: Optional - Belirtilmişse tag'ın başına içerik ekler
• append: Optional - Belirtilmişse tag'ın sonuna içerik ekler
• content: Tag'ın içeriğini belirtir. Değer olarak string, number ya da array alabilir. Örneğin: :content=['Array', 'içerik', 'gelebilir']
• max-item: Eğer içerik Array tipinde ise max kaç adet içeriği göstermek istendiği girilebilir. Örneğin :max-item="3" 3 adet array elemanını gösterecektir.
• char: Kaç karakterle sınırlı olacağını belirtir. Eğer max-item ile birlikte kullanılırsa, gösterilen itemlardan sonra kaç karakter daha gösterileceği anlamına gelir. max-item ile birlikte kullanılmazsa content in girilen sayı kadar içeriğini ekrana getirir.

Örnek Kullanım:

<template>
  <div class="flex flex-col gap-2">
    <!-- // slot ile kullanım -->
    <timus-tag type="danger" char="3">
      <template #prepend>Bu başka bir başlangıç içeriği </template>
      <template #content>Bu başka bir ana içerik</template>
      <template #append> Bu başka bir ek içerik</template>
    </timus-tag>
    <!-- // slotsuz kullanım -->
    <timus-tag prepend="pre" content="Bu başka bir ana içerik - gray" append="append" type="gray" char="6" />
    <timus-tag :content="['Bu', 'bir', 'Array', 'içerik', 'üstelik', 'primary']" type="primary" char="3" max-item="4" />
    <timus-tag prepend="pre" content="Bu başka bir ana içerik - secondary" append="append" type="secondary" />
    <timus-tag prepend="pre" content="Bu başka bir ana içerik - warning" append="append" type="warning" />
    <timus-tag prepend="pre" content="Bu başka bir ana içerik - success" append="append" type="success" />
  </div>
</template>

<script>
export default {
  name: 'TagSample',
};
</script>

Katkıda Bulunanlar

Bu projeye katkıda bulunmak için lütfen CONTRIBUTING.md dosyasına başvurun.

Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için LICENCE.md dosyasına başvurun.