🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
Sign In

glassheart-ui-vanilla

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

glassheart-ui-vanilla

GlassHeart UI - Vanilla JavaScript components

latest
Source
npmnpm
Version
1.1.6
Version published
Maintainers
1
Created
Source

glassheart-ui-vanilla

Vanilla JavaScript 版本的 GlassHeartUI 元件庫，提供美觀的玻璃擬態設計組件。

📋 目錄

  • 安裝
  • 快速開始
  • 組件文檔
  • API 參考
  • 授權

安裝

npm install glassheart-ui-vanilla

快速開始

基本使用

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/glassheart-ui-core/dist/index.css">
</head>
<body>
  <div id="app"></div>
  
  <script type="module">
    import { GlassCard, GlassButton, GlassInput } from 'glassheart-ui-vanilla';
    
    // 創建卡片
    const card = new GlassCard({
      size: 'lg',
      glass: 'medium',
      liquid: true,
      interactive: true,
      content: `
        <h3>Hello GlassHeartUI</h3>
        <p>This is a beautiful glass card!</p>
      `
    });
    
    // 創建輸入框
    const input = new GlassInput({
      placeholder: 'Enter your name',
      size: 'md',
      glass: 'medium'
    });
    
    // 創建按鈕
    const button = new GlassButton({
      text: 'Submit',
      variant: 'primary',
      size: 'md',
      liquid: true,
      onClick: (event) => {
        console.log('Button clicked!', input.getValue());
      }
    });
    
    // 渲染到頁面
    const app = document.getElementById('app');
    card.render(app);
    input.render(app);
    button.render(app);
  </script>
</body>
</html>

CDN 使用

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/glassheart-ui-core@1.1.2/dist/index.css">
</head>
<body>
  <div id="app"></div>
  
  <script src="https://unpkg.com/glassheart-ui-vanilla@1.1.2/dist/index.js"></script>
  <script>
    const { GlassCard, GlassButton, GlassInput } = window.GlassHeartUIVanilla;
    
    // 使用組件...
  </script>
</body>
</html>

組件文檔

GlassButton

按鈕組件，支援多種變體和尺寸。

構造函數

new GlassButton(options)

選項 (options)

參數類型預設值說明
variant'default' | 'primary' | 'secondary' | 'accent' | 'destructive' | 'outline' | 'ghost' | 'link''default'按鈕變體
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'按鈕尺寸
glass'light' | 'medium' | 'heavy''medium'玻璃效果強度
liquidbooleanfalse是否啟用液體流動效果
loadingbooleanfalse是否顯示載入狀態
disabledbooleanfalse是否禁用按鈕
textstring'Button'按鈕文字
onClickfunctionundefined點擊事件處理函數

方法

方法名參數返回值說明
render(container)HTMLElement | stringvoid渲染按鈕到指定容器
destroy()-void銷毀按鈕並從 DOM 中移除
getElement()-HTMLButtonElement獲取按鈕 DOM 元素
setText(text)stringvoid設置按鈕文字
setDisabled(disabled)booleanvoid設置按鈕禁用狀態

使用範例

import { GlassButton } from 'glassheart-ui-vanilla';

// 基本按鈕
const basicButton = new GlassButton({
  text: 'Click Me'
});

// 主要按鈕
const primaryButton = new GlassButton({
  variant: 'primary',
  size: 'lg',
  text: 'Primary Button'
});

// 液體效果按鈕
const liquidButton = new GlassButton({
  variant: 'accent',
  liquid: true,
  text: 'Liquid Button'
});

// 載入狀態按鈕
const loadingButton = new GlassButton({
  variant: 'primary',
  loading: true,
  text: 'Loading...'
});

// 事件處理
const interactiveButton = new GlassButton({
  text: 'Interactive Button',
  onClick: (event) => {
    console.log('Button clicked!', event);
  }
});

// 渲染到頁面
document.getElementById('app').appendChild(basicButton.getElement());
primaryButton.render('#app');
liquidButton.render('#app');
loadingButton.render('#app');
interactiveButton.render('#app');

GlassCard

卡片組件，支援多種變體和交互效果。

構造函數

new GlassCard(options)

選項 (options)

參數類型預設值說明
size'sm' | 'md' | 'lg' | 'xl''md'卡片尺寸
variant'default' | 'outline' | 'solid''default'卡片變體
glass'light' | 'medium' | 'heavy''medium'玻璃效果強度
liquidbooleanfalse是否啟用液體流動效果
interactivebooleanfalse是否啟用交互效果
loadingbooleanfalse是否顯示載入狀態
contentstring''卡片內容 HTML

方法

方法名參數返回值說明
render(container)HTMLElement | stringvoid渲染卡片到指定容器
destroy()-void銷毀卡片並從 DOM 中移除
getElement()-HTMLElement獲取卡片 DOM 元素

使用範例

import { GlassCard } from 'glassheart-ui-vanilla';

// 基本卡片
const basicCard = new GlassCard({
  content: '<h3>Basic Card</h3><p>This is a basic glass card.</p>'
});

// 交互式卡片
const interactiveCard = new GlassCard({
  interactive: true,
  content: '<h3>Interactive Card</h3><p>Click me!</p>'
});

// 液體效果卡片
const liquidCard = new GlassCard({
  liquid: true,
  glass: 'heavy',
  content: '<h3>Liquid Card</h3><p>This card has liquid flow effects.</p>'
});

// 不同尺寸
const smallCard = new GlassCard({
  size: 'sm',
  content: 'Small Card'
});

const largeCard = new GlassCard({
  size: 'lg',
  content: 'Large Card'
});

// 渲染到頁面
basicCard.render('#app');
interactiveCard.render('#app');
liquidCard.render('#app');
smallCard.render('#app');
largeCard.render('#app');

GlassInput

輸入框組件，支援多種變體和狀態。

構造函數

new GlassInput(options)

選項 (options)

參數類型預設值說明
type'text' | 'email' | 'password' | 'number''text'輸入類型
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'輸入框尺寸
variant'default' | 'outline' | 'solid''default'輸入框變體
glass'light' | 'medium' | 'heavy''medium'玻璃效果強度
liquidbooleanfalse是否啟用液體流動效果
errorbooleanfalse是否顯示錯誤狀態
disabledbooleanfalse是否禁用輸入框
placeholderstring''佔位符文字
valuestring''輸入值
onChangefunctionundefined值變更事件處理函數
onFocusfunctionundefined獲得焦點事件處理函數
onBlurfunctionundefined失去焦點事件處理函數

方法

方法名參數返回值說明
render(container)HTMLElement | stringvoid渲染輸入框到指定容器
destroy()-void銷毀輸入框並從 DOM 中移除
getElement()-HTMLInputElement獲取輸入框 DOM 元素
getValue()-string獲取輸入值
setValue(value)stringvoid設置輸入值
setDisabled(disabled)booleanvoid設置輸入框禁用狀態

使用範例

import { GlassInput } from 'glassheart-ui-vanilla';

// 基本輸入框
const basicInput = new GlassInput({
  placeholder: 'Enter your name'
});

// 帶標籤的輸入框
const emailInput = new GlassInput({
  type: 'email',
  placeholder: 'Enter your email',
  size: 'md'
});

// 錯誤狀態輸入框
const errorInput = new GlassInput({
  type: 'password',
  placeholder: 'Enter password',
  error: true
});

// 液體效果輸入框
const liquidInput = new GlassInput({
  placeholder: 'Search...',
  liquid: true,
  glass: 'heavy'
});

// 事件處理
const interactiveInput = new GlassInput({
  placeholder: 'Type something...',
  onChange: (event) => {
    console.log('Input changed:', event.target.value);
  },
  onFocus: (event) => {
    console.log('Input focused');
  },
  onBlur: (event) => {
    console.log('Input blurred');
  }
});

// 渲染到頁面
basicInput.render('#app');
emailInput.render('#app');
errorInput.render('#app');
liquidInput.render('#app');
interactiveInput.render('#app');

// 獲取和設置值
console.log('Current value:', interactiveInput.getValue());
interactiveInput.setValue('New value');

API 參考

通用方法

所有組件都支援以下通用方法：

  • render(container) - 渲染組件到指定容器
  • destroy() - 銷毀組件並從 DOM 中移除
  • getElement() - 獲取組件的 DOM 元素

事件處理

組件支援通過選項傳入事件處理函數：

const button = new GlassButton({
  onClick: (event) => {
    console.log('Button clicked!', event);
  }
});

const input = new GlassInput({
  onChange: (event) => {
    console.log('Input changed:', event.target.value);
  }
});

樣式自定義

所有組件都使用 CSS 變量，您可以自定義樣式：

:root {
  --gh-glass-opacity: 0.2;
  --gh-glass-blur: 20px;
  --gh-glass-saturate: 180%;
  --gh-glass-brightness: 1.2;
  --gh-glass-contrast: 1.1;
}

授權

MIT License

Keywords

vanilla
javascript
ui
components
glass
glassmorphism

FAQs

Package last updated on 26 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection

Product

Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection

Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.

By John Tuckner  -  Jun 18, 2026