Alanlar

Olobase Admin alan bileşenleri, belirli kaynak özelliklerinin özel ve optimize edilmiş şekilde görüntülenmesine olanak tanır. Esas olarak show ve list görünümlerinde kullanılmak üzere tasarlanmıştır. Verileri getirmek ve görüntülemek için gerekli source ve resource özelliği ile kullanılır. VaShow bileşen enjektörüyle veya item prop aracılığıyla açık bir item nesnesiyle kullanılmalıdır.

Alan Sarmacı (Field Wrapper)

Olobase Admin girişlerinin aksine, yazılan Olobase Admin alanları etiketli herhangi bir wrapper içermez, yalnızca basit satır içi görüntü biçimlendirici içerir. Bunun için VaField'ı kullanabilirsiniz. Yerelleştirilmiş etiketi alır ve prop type aracılığıyla uygun alan bileşenini başlatır, bu da onu varsayılan slota yeniden yazmamızı engeller.

Daha fazla ayrıntı için daha fazlasını görün.

Nokta Gösterim Desteği

Olobase Admin alanları source prop için nokta gösterimini kabul eder. Bu özellik nesneler için kullanışlıdır.

<template>
  <va-field source="address.street"></va-field>
  <va-field source="address.postcode"></va-field>
  <va-field source="address.city"></va-field>
</template>

Olobase Admin Alanları

Bu bölümde packages/admin/src/components/ui/fields klasöründeki Olobase Admin alan gösterim bileşenlerine değinilecektir.

Text

Değeri basit metin olarak gösterir, basit bir span alanı oluşturur. HTML etiketleri strip fonksiyonu ile yok edilir.

Mixinler

• Field
• Source
• Resource

Özellikler

Örnek

<template>
  <va-text-field source="name"></va-text-field>
</template>

Basit bir span oluşturur:

<span>Admin</span>

Email

Değeri mailto bağlantısı olarak gösterir.

Mixinler

• Field
• Source
• Resource

Özellikler

Örnek

<template>
  <va-email-field source="email"></va-email-field>
</template>

Basit bir mailto bağlantısı oluşturur:

<a href="mailto:[email protected]">[email protected]</a>

Url

Değeri basit bir http bağlantısı olarak gösterir.

Mixinler

• Field
• Source
• Resource

Özellikler

Örnek

<template>
  <va-url-field source="url" target="_self"></va-url-field>
</template>

Basit bir url bağlantısı oluşturur:

<a href="https://www.example.org">https://www.example.org</a>

Rich Text

HTML etiketlerine izin veren ham formatta değeri gösterir. XSS saldırılarını önlemek için kaynak değeri güvenilir olmalıdır.

Mixinler

• Field
• Source
• Resource

Özellikler

Daha önce bahsedilen source ve item özellikleri.

Örnek

<template>
  <va-rich-text-field source="body"></va-rich-text-field>
</template>

Ham bir HTML div oluşturur:

<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

Number

Değeri biçimlendirilmiş sayı olarak gösterir. Herhangi bir yerel para birimi, ondalık sayı veya yüzde değeri olabilir. Gereken yerlerde $n Vue i18n fonksiyonunu kullanın.

Mixinler

• Field
• Source
• Resource

Özellikler

Örnek

<template>
  <va-number-field source="price" format="currency"></va-number-field>
</template>

span içinde biçimlendirilmiş bir sayı oluşturur:

<span>49,92&nbsp;€</span>

Format:

Hedeflenen i18n yerel ayarı için öncelikle geçerli bir sayı biçimini kaydetmeniz gerekir:

src/i18n/rules/numbers.js

export default {
  en: {
    currencyFormat: {
      style: "currency",
      currency: "USD",
    },
  },
  tr: {
    currencyFormat: {
      style: "currency",
      currency: "TL",
    },
  },
};

Vue i18n dökümentasyonuna göz atın.

Date

Değeri biçimlendirilmiş tarih olarak gösterir. Ve long, short vb. tüm yerelleştirilmiş formatları destekler. Temel olarak $d, VueI18n fonksiyonunu kullanın.

Mixinler

• Field
• Source
• Resource

Özellikler

Örnek

<template>
  <va-date-field source="publicationDate" format="short"></va-date-field>
</template>

Aralık içinde biçimlendirilmiş bir tarih oluşturur:

<span>Sunday, November 18, 1984</span>

src/i18n/rules/datetime.js

export default {
  en: {
    year: {
      year: "numeric",
    },
    month: {
      month: "short",
    },
    shortFormat: {
      dateStyle: "short",
    },
    longFormat: {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
      hour: "numeric",
      minute: "numeric",
      hour12: false,
    },
  }
}

Vue i18n dökümentasyonuna göz atın.

Boolean

Değeri tanımlanabilir true/false simgesi olarak gösterir.

Mixinler

• Field
• Source
• Resource

Örnek

<template>
  <va-boolean-field source="active" icon-false="mdi-cancel"></va-boolean-field>
</template>

Rating

Değeri derecelendirme yıldızları olarak gösterin. Yarım artışlar etkinse değer geçerli bir tam sayı veya ondalık sayı olmalıdır. Simgeler, Vuetify icon ayarlarından bu simgeler düzenlenebilir.

Mixinler

• Field
• Source
• Resource
• Rating

Özellikler

Daha önce bahsedilen source ve item özellikleri.

Örnek

<template>
  <va-rating-field source="rating" length="10" half-increments></va-rating-field>
</template>

Yukarıdaki örnek sadece okunabilir bir Vuetify rating bileşeni oluşturur.

Chip

Değeri bir çip materyalinin içinde gösterir.

Mixinler

• Field
• Source
• Resource
• Chip

Özellikler

Daha önce bahsedilen source ve item özellikleri.

Slotlar

Örnek

<template>
  <va-chip-field source="type" color="secondary" small></va-chip-field>
</template>

Bir Vuetify chip bileşeni üretir.

Enums

Seçimler veya numaralandırmalar açısından format değerine ihtiyacınız varsa, VaSelectField'ı chip prop ile kullanın.

Select

Değeri, önceden tanımlanmış key-value seçeneklerinden seçilen metni metin olarak gösterir. Hiçbir seçenek yoksa, varsayılan olarak, Vue i18n resource yerel ayarlarınızdan değer olarak source içeren yerelleştirilmiş numaralandırmaları alır.

Mixinler

• Field
• Source
• Resource
• Choices
• Chip

Özellikler

Slotlar

Örnek

<template>
   <va-select-field 
     source="userRoles" 
     chip 
     multiple
     :item="item"
   >
   </va-select-field>
</template>

<script>
export default {
  props: ["id", "item"],
}
</script>

Yerelleştirilmiş Enumlar

File

Orijinal dosyalara işaret eden dosya bağlantılarının listesini gösterir.

<v-row no-gutters>
 <v-col sm="3" class="mr-3">
   <va-file-field 
     source="files" 
     :item="model" 
     action-type="download"
     table-name="employeeFiles"
   ></va-file-field>
 </v-col>
</v-row>

<v-row no-gutters>
 <v-col sm="3" class="mr-3">
   <va-file-input
     source="files"
     table-name="employeeFiles"
   ></va-file-input>
 </v-col>
</v-row>

Mixinler

• Field
• Source
• Resource
• Files

Özellikler

Image

Küçük resimler için önizleme desteğiyle görsellerin listesini galeri olarak gösterin.

<va-image-field 
  source="files" 
  :item="model" 
  table-name="employeeFiles"
></va-image-field>

Mixinler

• Field
• Source
• Resource
• Files

Array

Çoklu dizi türü değerinin her bir değerini malzeme çip grubu olarak gösterin.

Mixinler

• Chip
• Field
• Source
• Resource

Slotlar

<template>
  <va-array-field 
   source="userRoles" 
   :item="item" 
   ></va-array-field>
</template>

İç içe geçmiş nesne

İç çip şablonlaması için varsayılan slotu kullanın:

<template>
  <va-array-field source="formats" v-slot="{ value }">
    {{ value.date }} : {{ value.url }}
  </va-array-field>
</template>

Daha karmaşık bir durum için basit bir v-for özel şablonu kullanın.