社区首页 >专栏 >专为新兴框架Svelte打造的移动端组件库！

专为新兴框架Svelte打造的移动端组件库！

程序员老鱼

发布于 2023-09-07 00:58:37

1.9K0

文章被收录于专栏：前端实验室前端实验室

之前的文章中，我们分享过一个新兴的前端框架：Svelte。还对比了它与 Vue 和 React 不同之处。

今天，我们就接着分享一个专为 Svelte 打造的移动端组件库：STDF

STDF 简介

Svelte 是一个新兴的前端框架，组件库不多，今天介绍 STDF 算是不可多得的一个组件库了。

STDF 是一个移动端的 UI 组件库，主要用来开发移动端 web 应用。和我们之前介绍过的许多组件库都不一样，它是基于基于 Svelte 和 Tailwind 开发的。你可以认为这套组件库是专为 Svelte 打造的。

Svelte 简洁语法，主要是让原生 JS 代码有了响应式的能力，而且打包后的 web 应用很小，特别适合开发移动应用。同时，Tailwind 又是一个优雅的 CSS 框架。STDF 是结合两者的优点而打造的高质量组件库。

STDF 的国产特性

STDF 作为国人开发的组件库，名字虽然简单，但作者也赋予了一些有意思的寓意：

S 代表 Simple（简单），T 代表 Thin（轻量），D 代表 Design（设计），F 代表 Fast（快速）。

STDF 代表一个使用简单、体积轻量、设计友好、开发快速的组件库。

PS:不知道为什么？了不起总能在 STDF 框架代码行间感受到独特的中国诗人般的浪漫主义🤭~

好啦~ 还是让我们来看看怎么使用这个组件库吧！

STDF 安装和使用

STDF 的安装分以下几种情况。

情况一: 已有配置好 Svelte 与 Tailwind 的工程，直接安装。

pnpm i stdf -D
# or
npm i stdf -D

情况二：无工程，使用脚手架搭建

pnpm create stdf
# or
npm create stdf@latest
# or
npm init stdf@latest
# or
npx create-stdf@latest

情况三：自行搭建工程

npm create vite@latest

PS:官方网站中，有用 Vite 示例创建工程的案例。*

接着，就可以在项目工程中引入 STDF 的组件进行使用了。

使用示例

比如常见的网络布局。

<script>
 import { Grids, Grid, Placeholder } from 'stdf';
</script>

<div class="font-bold px-4 mt-8">使用占位符示例 3﹡4</div>
<Grids cols={4}>
 <Grid row="3">
  <Placeholder>3﹡1</Placeholder>
 </Grid>
 <Grid col="3">
  <Placeholder>1﹡3</Placeholder>
 </Grid>
 <Grid row="2">
  <Placeholder>2﹡1</Placeholder>
 </Grid>
 <Grid col="2">
  <Placeholder>1﹡2</Placeholder>
 </Grid>
 <Grid>
  <Placeholder>1﹡1</Placeholder>
 </Grid>
 <Grid>
  <Placeholder>1﹡1</Placeholder>
 </Grid>
</Grids>

布局效果如下：

再如移动端的导航栏。

<script>
 import { NavBar, Icon, Toast } from 'stdf';

 const icons = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];

 let visible = false;
</script>

<div class="flex flex-col space-y-8 py-8">
 <!-- 基础用法 -->
 <NavBar title="基础用法" />
 <!-- 右侧使用 Remix Icon -->
 <NavBar title="右侧使用 Icon" rights={icons1} />
 <!-- 点击左侧 -->
 <NavBar title="点击左侧" on:clickleft={() => (visible = true)} />
 <Toast bind:visible={visible} message="点击了左侧！" />
</div>