বিল্ট-ইন কম্পোনেন্ট
ম্যানুয়ালি ইমপোর্ট
বিল্ট-ইন কম্পোনেন্টগুলো মার্কডাউন ফাইলে সরাসরি ব্যবহার করা যাবে। কিন্তু 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)
আইকন প্রিবিল্ড আবশ্যক
Iconify আইকন পূর্ব প্রস্তুতকৃত Iconify আইকন কনফিগ এ থাকতে হবে
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
- ফ্লোটিং কন্টেন্ট কন্টেইনারে যোগ করার জন্য অতিরিক্তি ক্লাস।