mirrors/plugin-sample-vite-svelte
1
0
Fork 1
mirror of https://github.com/siyuan-note/plugin-sample-vite-svelte.git synced 2025-06-08 02:46:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🔨 refactor: 重构基于 svelte 的设置面板功能

Browse source
This commit is contained in:
frostime 2024-06-08 18:30:53 +08:00
parent 49eb06330d
commit 6d75a46a56
6 changed files with 187 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/libs/item-wrap.svelte Normal file
View file

@ -0,0 +1,51 @@
<!--
Copyright (c) 2024 by frostime. All Rights Reserved.
Author : frostime
Date : 2024-06-01 20:03:50
FilePath : /src/libs/setting-item-wrap.svelte
LastEditTime : 2024-06-07 19:14:28
Description : The setting item container
-->
<script lang="ts">
export let title: string; // Displayint Setting Title
export let description: string; // Displaying Setting Text
export let direction: 'row' | 'column' = 'column';
</script>
{#if direction === "row"}
<div class="item-wrap b3-label" data-key="CustomCSS">
<div class="fn__block">
<span class="title">{title}</span>
<div class="b3-label__text">{@html description}</div>
<div class="fn__hr"></div>
<slot />
</div>
</div>
{:else}
<div class="item-wrap fn__flex b3-label config__item">
<div class="fn__flex-1">
<span class="title">{title}</span>
<div class="b3-label__text">
{@html description}
</div>
</div>
<span class="fn__space" />
<slot />
</div>
{/if}
<style>
span.title {
font-weight: bold;
color: var(--b3-theme-primary)
}
.item-wrap.b3-label {
box-shadow: none !important;
padding-bottom: 16px;
margin-bottom: 16px;
}
.item-wrap.b3-label:not(:last-child) {
border-bottom: 1px solid var(--b3-border-color);
}
</style>