Built-in Components ​

import { h, Transition } from 'vue'

h(Transition, {
  /* props */
})

<Transition> ​

একটি একক কম্পোনেন্ট বা কম্পোনেন্টে অ্যানিমেটেড ট্রানজিশন প্রভাব প্রদান করে।

• Props

  ts

  interface TransitionProps {
    /**
     * Used to automatically generate transition CSS class names.
     * e.g. `name: 'fade'` will auto expand to `.fade-enter`,
     * `.fade-enter-active`, etc.
     */
    name?: string
    /**
     * Whether to apply CSS transition classes.
     * Default: true
     */
    css?: boolean
    /**
     * Specifies the type of transition events to wait for to
     * determine transition end timing.
     * Default behavior is auto detecting the type that has
     * longer duration.
     */
    type?: 'transition' | 'animation'
    /**
     * Specifies explicit durations of the transition.
     * Default behavior is wait for the first `transitionend`
     * or `animationend` event on the root transition element.
     */
    duration?: number | { enter: number; leave: number }
    /**
     * Controls the timing sequence of leaving/entering transitions.
     * Default behavior is simultaneous.
     */
    mode?: 'in-out' | 'out-in' | 'default'
    /**
     * Whether to apply transition on initial render.
     * Default: false
     */
    appear?: boolean
  
    /**
     * Props for customizing transition classes.
     * Use kebab-case in templates, e.g. enter-from-class="xxx"
     */
    enterFromClass?: string
    enterActiveClass?: string
    enterToClass?: string
    appearFromClass?: string
    appearActiveClass?: string
    appearToClass?: string
    leaveFromClass?: string
    leaveActiveClass?: string
    leaveToClass?: string
  }

• ইভেন্টস

  • @before-enter
  • @before-leave
  • @enter
  • @leave
  • @appear
  • @after-enter
  • @after-leave
  • @after-appear
  • @enter-cancelled
  • @leave-cancelled (v-show only)
  • @appear-cancelled

• উদাহরণ

  সাধারণ কম্পোনেন্ট:

  template

  <Transition>
    <div v-if="ok">toggled content</div>
  </Transition>

  key বৈশিষ্ট্য পরিবর্তন করে একটি ট্রানজিশন জোর করে:

  template

  <Transition>
    <div :key="text">{{ text }}</div>
  </Transition>

  ট্রানজিশন মোড সহ ডাইনামিক কম্পোনেন্ট + অ্যানিমেট দেখা যাচ্ছে:

  template

  <Transition name="fade" mode="out-in" appear>
    <component :is="view"></component>
  </Transition>

  ট্রানজিশন ইভেন্টগুলি শোনা:

  template

  <Transition @after-enter="onTransitionComplete">
    <div v-show="ok">toggled content</div>
  </Transition>

• এছাড়াও দেখুন Guide - Transition

<TransitionGroup> ​

একটি তালিকায় একাধিক কম্পোনেন্ট বা কম্পোনেন্টগুলির জন্য রূপান্তর প্রভাব প্রদান করে।

• Props

<TransitionGroup> mode ব্যতীত <Transition>-এর মতো একই প্রপস গ্রহণ করে, এছাড়াও দুটি অতিরিক্ত প্রপস:

interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
  /**
   * If not defined, renders as a fragment.
   */
  tag?: string
  /**
   * For customizing the CSS class applied during move transitions.
   * Use kebab-case in templates, e.g. move-class="xxx"
   */
  moveClass?: string
}

• ইভেন্টস

  <TransitionGroup> emits the same events as <Transition>.

• বিস্তারিত

  ডিফল্টরূপে, <TransitionGroup> একটি মোড়ক DOM কম্পোনেন্ট রেন্ডার করে না, তবে একটিকে ট্যাগ প্রপের মাধ্যমে সংজ্ঞায়িত করা যেতে পারে।

  মনে রাখবেন যে অ্যানিমেশনগুলি সঠিকভাবে কাজ করার জন্য একটি <TransitionGroup>-এর প্রতিটি চাইল্ডকে অবশ্যই অনন্যভাবে কীযুক্ত থাকতে হবে।

  <TransitionGroup> CSS ট্রান্সফর্মের মাধ্যমে মুভিং ট্রানজিশন সমর্থন করে। একটি আপডেটের পরে যখন স্ক্রিনে একটি চাইল্ডর অবস্থান পরিবর্তিত হয়, তখন এটি একটি চলমান CSS ক্লাস প্রয়োগ করা হবে (name বৈশিষ্ট্য থেকে স্বয়ংক্রিয়ভাবে তৈরি বা move-class প্রপের সাথে কনফিগার করা)। চলন্ত শ্রেণী প্রয়োগ করার সময় যদি CSS transform প্রপার্টি "transition-able" হয়, তাহলে কম্পোনেন্টটি ব্যবহার করে তার গন্তব্যে মসৃণভাবে অ্যানিমেটেড হবে FLIP technique।

• উদাহরণ

  template

  <TransitionGroup tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </TransitionGroup>

• আরো দেখুন Guide - TransitionGroup

<KeepAlive> ​

ক্যাশে dynamically toggled করা components wrapped inside.

• Props

  ts

  interface KeepAliveProps {
    /**
     * If specified, only components with names matched by
     * `include` will be cached.
     */
    include?: MatchPattern
    /**
     * Any component with a name matched by `exclude` will
     * not be cached.
     */
    exclude?: MatchPattern
    /**
     * The maximum number of component instances to cache.
     */
    max?: number | string
  }
  
  type MatchPattern = string | RegExp | (string | RegExp)[]

• বিস্তারিত

একটি ডায়নামিক কম্পোনেন্টের চারপাশে মোড়ানো হলে, <KeepAlive> নিষ্ক্রিয় কম্পোনেন্ট ইনস্ট্যান্সকে ধ্বংস না করে ক্যাশে করে।

যে কোনো সময়ে <KeepAlive>-এর সরাসরি সন্তান হিসেবে শুধুমাত্র একটি সক্রিয় কম্পোনেন্টস উদাহরণ থাকতে পারে।

যখন একটি কম্পোনেন্ট <KeepAlive>-এর ভিতরে টগল করা হয়, তখন এর activated এবং deactivated লাইফসাইকেল হুকগুলিকে সেই অনুযায়ী আহ্বান করা হবে, যা mounted এবং unmounted এর বিকল্প প্রদান করবে, যেগুলিকে বলা হয় না। এটি <KeepAlive>-এর সরাসরি সন্তানের জন্য প্রযোজ্য এবং সেইসাথে এর সমস্ত বংশধরের ক্ষেত্রেও প্রযোজ্য।

• উদাহরণ

  প্রাথমিক ব্যবহার:

  template

  <KeepAlive>
    <component :is="view"></component>
  </KeepAlive>

  যখন v-if / v-else শাখার সাথে ব্যবহার করা হয়, তখন একটি সময়ে শুধুমাত্র একটি কম্পোনেন্ট রেন্ডার করা আবশ্যক:

  template

  <KeepAlive>
    <comp-a v-if="a > 1"></comp-a>
    <comp-b v-else></comp-b>
  </KeepAlive>

  Used together with <Transition>:

  template

  <Transition>
    <KeepAlive>
      <component :is="view"></component>
    </KeepAlive>
  </Transition>

  Using include / exclude:

  template

  <!-- comma-delimited string -->
  <KeepAlive include="a,b">
    <component :is="view"></component>
  </KeepAlive>
  
  <!-- regex (use `v-bind`) -->
  <KeepAlive :include="/a|b/">
    <component :is="view"></component>
  </KeepAlive>
  
  <!-- Array (use `v-bind`) -->
  <KeepAlive :include="['a', 'b']">
    <component :is="view"></component>
  </KeepAlive>

  Usage with max:

  template

  <KeepAlive :max="10">
    <component :is="view"></component>
  </KeepAlive>

• আরো দেখুন Guide - KeepAlive

<Teleport> ​

এর স্লট বিষয়অবজেক্ট DOM এর অন্য অংশে রেন্ডার করে।

• Props

  ts

  interface TeleportProps {
    /**
     * Required. Specify target container.
     * Can either be a selector or an actual element.
     */
    to: string | HTMLElement
    /**
     * When `true`, the content will remain in its original
     * location instead of moved into the target container.
     * Can be changed dynamically.
     */
    disabled?: boolean
    /**
     * When `true`, the Teleport will defer until other
     * parts of the application have been mounted before
     * resolving its target. (3.5+)
     */
    defer?: boolean
  }

• উদাহরণ

  Specifying target container:

  template

  <Teleport to="#some-id" />
  <Teleport to=".some-class" />
  <Teleport to="[data-teleport]" />

  Conditionally disabling:

  template

  <Teleport to="#popup" :disabled="displayVideoInline">
    <video src="./my-movie.mp4">
  </Teleport>

  Defer target resolution :

  template

  <Teleport defer to="#late-div">...</Teleport>
  
  <!-- somewhere later in the template -->
  <div id="late-div"></div>

• See also Guide - Teleport

<Suspense> ​

একটি কম্পোনেন্ট গাছে নেস্টেড অ্যাসিঙ্ক নির্ভরতা অর্কেস্ট্রেট করার জন্য ব্যবহৃত হয়।

• Props

  ts

  interface SuspenseProps {
    timeout?: string | number
    suspensible?: boolean
  }

• ইভেন্টস

  • @resolve
  • @pending
  • @fallback

• বিস্তারিত

  <Suspense> দুটি স্লট গ্রহণ করে: #default slot এবং #fallback slot। এটি মেমরিতে ডিফল্ট slot রেন্ডার করার সময় ফলব্যাক স্লটের বিষয়অবজেক্ট প্রদর্শন করবে।

  ডিফল্ট স্লট রেন্ডার করার সময় যদি এটি async নির্ভরতা (Async Components এবং async setup()) সহ কম্পোনেন্টগুলির সম্মুখীন হয়, ডিফল্ট slot প্রদর্শন করার আগে তাদের সব সমাধান না হওয়া পর্যন্ত এটি অপেক্ষা করবে।

  সাসপেন্সকে suspensible হিসাবে সেট করে, সমস্ত অ্যাসিঙ্ক্রোনাস নির্ভরতা পরিচালনা প্যারেন্ট সাসপেন্স দ্বারা পরিচালিত হবে। কার্যকরী বিবরণ দেখুন

• এছাড়াও দেখুন গাইড - সাসপেন্স