বিল্ট-ইন কম্পোনেন্ট

ম্যানুয়ালি ইমপোর্ট

বিল্ট-ইন কম্পোনেন্টগুলো মার্কডাউন ফাইলে সরাসরি ব্যবহার করা যাবে। কিন্তু svelte ফাইলে ম্যানুয়ালি ইমপোর্ট করতে হবে।

Links

Props

  • label - লিংকের লেবেলের লেখা
  • to - লিংকের ঠিকানা
  • withBase -
    sveltekit config.kit.paths.base
    সঙ্গে কিনা তা নির্ধারণ করে। ডিফল্ট হচ্ছে true
অটো এক্সটার্নাল আইকন

লিংক অ্যাড্রেস http বা https দিয়ে শুরু হলে একটি অটো এক্সটার্নাল আইকন যুক্ত করবে।

Markdown এ

* <Link to="https://github.com/" label="Github" />  
* <Link to="/" label="Home page" />
md
Click fold/expand code

Svelte এ

<script>
  import {  } from '@sveltepress/theme-default/components' 
</script>
<div style="line-height: 24px;">
  < to="/" label="Home page" /> <br />
  < to="https://github.com/" label="Github" />
</div>
svelte
Click fold/expand code

Tabs & TabPanel

Tab Props

  • activeName - ডিফল্ট অ্যাক্টিভ প্যানেলের নাম
  • bodyPadding - প্যানেল বডিতে প্যাডিং আছে কিনা তা নির্ধারণ করে, ডিফল্ট হচ্ছে true

TabPanel Props

  • name - প্যানেলের নাম।
  • activeIcon - ট্যাব অ্যাক্টিভ থাকাকালীন যে আইকন কম্পোনেন্ট ব্যবহার হবে।
  • inactiveIcon - ট্যাব ইন্যাক্টিভ থাকাকালীন যে আইকন কম্পোনেন্ট ব্যবহার হবে।

Markdown এ

Counter.svelte
<script>
  let  = 0
</script>
<button on:click={() => ++}>
  You've clicked {} times
</button>
svelte
<Tabs activeName="Svelte">
  <TabPanel name="Svelte">

```svelte title="Counter.svelte"
<script>
  let count = 0
</script>
<button on:click={() => count++}>
  You've clicked {count} times
</button>
```

  </TabPanel>

  <TabPanel name="Vue">

```html  title="Counter.vue"
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  You've clicked {count} times
</button>
```

  </TabPanel>
</Tabs>
md
Click fold/expand code

Svelte এ

Tab2 content
<script>
  import { ,  } from '@sveltepress/theme-default/components' 
</script>
< activeName="Tab2">
  < name="Tab1">
    <div>Tab1 content</div>
  </>
  < name="Tab2">
    <div>Tab2 content</div>
  </>
</>
svelte
Click fold/expand code

Expansion

Props

  • title - এক্সপ্যানসন এর টাইটেল।
  • showIcon - আইকন দেখাবে কিনা তা নির্ধারণ করে, ডিফল্ট হচ্ছে true
  • headerStyle - হেডারের ইনলাইন স্টাইল কাস্টমাইজ করতে।
  • bind:expanded - সম্প্রসারিত অংশের অবস্থা নির্ধারণ, ডিফল্ট হচ্ছ...false

Slots

  • default - এক্সপ্যানসন এর কন্টেন্ট
  • icon-fold - ফোল্ড করা অবস্থার আইকন
  • icon-expanded - এক্সপ্যান্ড করা অবস্থার আইকন
  • arrow - এক্সপ্যানসন এর তীর নির্দেশক কাস্টমাইজ করা

Markdown এ

Click to expand/fold panel
Some content
<Expansion title="Click to expand/fold panel">
  <div class="text-[24px]">Some content</div>
</Expansion>
md
Click fold/expand code

Svelte এ

A expansion without custom icon and arrow
Look at the icon left. It gets colored when expanded!
<script>
  import {  } from '@sveltepress/theme-default/components'
</script>
< title="A expansion without custom icon and arrow">
  <div class="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  <div slot="icon-fold" class="i-bxs-wink-smile"></div>
  <div slot="icon-expanded" class="i-fxemoji-smiletongue"></div>
  <div slot="arrow" class="i-material-symbols-thumbs-up-down"></div>
</>
svelte
Click fold/expand code

Icons (Pre-build iconify icons)

আইকন প্রিবিল্ড আবশ্যক

Markdown এ

<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
md
Click fold/expand code

Svelte এ

<script>
  import {  } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
  < collection="vscode-icons" name="file-type-svelte" />
</div>
svelte
Click fold/expand code

Floating

Markdown এ

<Floating placement="top">
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    এখানে-মাউস-আনুন-বা-টাচ-করুন
  </div>

  <div class="bg-white dark:bg-dark b-1 b-solid b-blue rounded p-4" slot="floating-content">
    হাই, নির্দেশনা অনুযায়ী কাজ করার জন্য ধন্যবাদ 
  </div>
</Floating>
md
Click fold/expand code

Svelte এ

<script>
  import  from '@sveltepress/twoslash/FloatingWrapper.svelte'
</script>
< placement="right">
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    এখানে-মাউস-আনুন-বা-টাচ-করুন
  </div>

  ="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4" slot="floating-content">
    হাই, নির্দেশনা অনুযায়ী কাজ করার জন্য ধন্যবাদ 
  </div>
</>
svelte
Click fold/expand code

Props

  • alwaysShow - ফ্লোটিং কন্টেন্ট সর্বদা দেখাবে কিনা- তা নির্ধারণ করে। ডিফল্ট হচ্ছে false
  • placement - ফ্লোটিং কন্টেন্টের পজিশন নির্ধারণ করে। দেখুন-
    placement - floating-ui
    । ডিফল্ট হচ্ছে bottom.
  • floatingClass - ফ্লোটিং কন্টেন্ট কন্টেইনারে যোগ করার জন্য অতিরিক্তি ক্লাস।
Last update at: 2024/07/18 16:00:47