https://github.com/renzp94/adorn

基于Svelte4开发的组件库
https://github.com/renzp94/adorn

adorn adorn-ui svelte svelte-components svelte-ui svelte-ui-components svelte4 sveltejs ui

Last synced: 29 days ago
JSON representation

基于Svelte4开发的组件库

• Host: GitHub
• URL: https://github.com/renzp94/adorn
• Owner: renzp94
• Created: 2023-09-05T08:51:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-28T07:12:20.000Z (4 months ago)
• Last Synced: 2024-09-29T11:53:52.574Z (about 1 month ago)
• Topics: adorn, adorn-ui, svelte, svelte-components, svelte-ui, svelte-ui-components, svelte4, sveltejs, ui
• Language: Svelte
• Homepage: https://adorn.deno.dev
• Size: 1.02 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# adorn

基于Svelte 4开发的组件库

## 安装

```bash

npm install adorn-ui

```

## 使用

直接导入组件使用即可。

```svelte

  import { Button } from 'adorn-ui'

  let count = 0



   count--}>-

  {count}

   count++}>+



```


## 定制主题

`Adorn`使用`css变量`实现动态主题，可以通过调整变量来调整主题。

```css

:root{

  /* 大小 */

  --adorn-size-mini: 2px;

  --adorn-size-sm: 4px;

  --adorn-size: 8px;

  --adorn-size-xl: 12px;

  --adorn-size-xxl: 16px;

  --adorn-font-size: 14px;

  /* 圆角 */

  --adorn-radius-mini: var(--adorn-size-mini);

  --adorn-radius-sm: var(--adorn-size-sm);

  --adorn-radius: var(--adorn-size);

  --adorn-radius-xl: var(--adorn-size-xl);

  --adorn-radius-xxl: var(--adorn-size-xxl);

  /* 内边距 */

  --adorn-padding-mini: var(--adorn-size-mini);

  --adorn-padding-sm: var(--adorn-size-sm);

  --adorn-padding: var(--adorn-size);

  --adorn-padding-xl: var(--adorn-size-xl);

  --adorn-padding-xxl: var(--adorn-size-xxl);

  /* 主题色 */

  --adorn-primary-color: #4170FF;

  /* 成功色 */

  --adorn-success-color: #00C48C;

  /* 警告色 */

  --adorn-warn-color: #FFC245;

  /* 错误色 */

  --adorn-error-color: #FF4D4F;

  /* 文字色 */

  --adorn-text-color: #3C4761;

  --adorn-disabled-text-color: #C5CEE0;

  /* 白色 */

  --adorn-white-color: #FFF;

  /* 边框色 */

  --adorn-border-color: #C5CEE0;

  /* 背景色 */

  --adorn-bg-color: #F6F9FB;

  /* 禁用背景色 */

  --adorn-disabled-bg-color: #F6F9FB;

}

```