chore: 首次簽入 Thinkyu ASP.NET 專案
- 加入 Visual Studio / ASP.NET .gitignore - 排除建置輸出、IDE 設定、NuGet packages、大型 MSI 安裝檔
This commit is contained in:
@@ -0,0 +1,280 @@
|
||||
# 常見 CSS 類別快速參考
|
||||
|
||||
## 搜尋面板
|
||||
|
||||
```html
|
||||
<!-- 搜尋面板容器 -->
|
||||
<div class="search-panel">
|
||||
<!-- 搜尋行（12欄 Grid）-->
|
||||
<div class="search-row">
|
||||
<!-- 半寬欄位 (6欄) -->
|
||||
<div class="search-field-inline w-6">
|
||||
<label class="search-label-inline">計畫</label>
|
||||
<input class="search-input" type="text" placeholder="請輸入計畫編號">
|
||||
</div>
|
||||
|
||||
<!-- 1/4寬欄位 (3欄) -->
|
||||
<div class="search-field-inline w-3">
|
||||
<label class="search-label-inline">課程</label>
|
||||
<input class="search-input" type="text" placeholder="請輸入課程">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜尋按鈕 -->
|
||||
<div class="search-actions">
|
||||
<button class="btn btn-secondary">清除</button>
|
||||
<button class="btn btn-primary">搜尋</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 表單佈局
|
||||
|
||||
```html
|
||||
<!-- 多行表單 -->
|
||||
<div class="form-row">
|
||||
<div class="form-col-50">
|
||||
<div class="form-group">
|
||||
<label class="form-label required">欄位名稱</label>
|
||||
<input type="text" class="form-control" placeholder="內容">
|
||||
<div class="error-message">錯誤訊息</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col-50">
|
||||
<div class="form-group">
|
||||
<label class="form-label">欄位名稱</label>
|
||||
<input type="text" class="form-control" placeholder="內容">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 單行表單（行內） -->
|
||||
<div class="form-group-inline">
|
||||
<label class="form-label-inline required">名稱</label>
|
||||
<input type="text" class="form-control" placeholder="內容">
|
||||
<div class="error-message">錯誤訊息</div>
|
||||
</div>
|
||||
|
||||
<!-- 複選框 -->
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="cb">
|
||||
<label class="checkbox-label" for="cb">同意條款</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 自動完成
|
||||
|
||||
```html
|
||||
<div class="form-group-inline autocomplete-field">
|
||||
<label class="form-label-inline">計畫</label>
|
||||
<div class="autocomplete-container" style="flex: 1;">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control autocomplete-input"
|
||||
@input="searchProjects"
|
||||
@focus="showSuggestions = true">
|
||||
<div class="autocomplete-dropdown" v-if="showSuggestions && suggestions.length > 0">
|
||||
<div
|
||||
v-for="item in suggestions"
|
||||
:key="item.Value"
|
||||
class="autocomplete-item"
|
||||
@click="selectProject(item)">
|
||||
<span class="autocomplete-value">{{ item.Value }}</span>
|
||||
<span class="autocomplete-name">{{ item.Name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 結果表格
|
||||
|
||||
```html
|
||||
<div class="result-panel">
|
||||
<table class="result-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">編號</th>
|
||||
<th>名稱</th>
|
||||
<th class="text-center">狀態</th>
|
||||
<th class="text-center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="4" class="empty-message">載入中...</td>
|
||||
</tr>
|
||||
<tr v-else-if="data.length === 0">
|
||||
<td colspan="4" class="empty-message">查無資料</td>
|
||||
</tr>
|
||||
<tr v-else v-for="item in data" :key="item.id">
|
||||
<td class="text-center">{{ item.id }}</td>
|
||||
<td>{{ item.name }}</td>
|
||||
<td class="text-center">{{ item.status }}</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-primary btn-sm">編輯</button>
|
||||
<button class="btn btn-danger btn-sm">刪除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 分頁 -->
|
||||
<div class="pagination" v-if="totalCount > 0">
|
||||
<button class="btn btn-secondary btn-sm" :disabled="currentPage === 1">上一頁</button>
|
||||
<span class="pagination-info">第 {{ currentPage }} / {{ totalPages }} 頁</span>
|
||||
<button class="btn btn-secondary btn-sm" :disabled="currentPage === totalPages">下一頁</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 模板編輯
|
||||
|
||||
```html
|
||||
<div class="form-row">
|
||||
<div class="form-col-50">
|
||||
<div class="form-group">
|
||||
<label class="form-label">通知模板</label>
|
||||
<textarea class="form-control" v-model="template" maxlength="1000"></textarea>
|
||||
<div class="template-buttons">
|
||||
<button class="btn-template" @click="insertTemplate('{日期}')">日期</button>
|
||||
<button class="btn-template" @click="insertTemplate('{姓名}')">姓名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col-50">
|
||||
<label class="form-label">預覽</label>
|
||||
<div class="template-preview">
|
||||
<p v-if="!template" class="preview-placeholder">（預覽內容）</p>
|
||||
<p v-else class="preview-content">{{ preview }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 按鈕類別
|
||||
|
||||
```html
|
||||
<!-- 主要按鈕 -->
|
||||
<button class="btn btn-primary">保存</button>
|
||||
|
||||
<!-- 次要按鈕 -->
|
||||
<button class="btn btn-secondary">取消</button>
|
||||
|
||||
<!-- 成功按鈕 -->
|
||||
<button class="btn btn-success">新增</button>
|
||||
|
||||
<!-- 危險按鈕 -->
|
||||
<button class="btn btn-danger">刪除</button>
|
||||
|
||||
<!-- 小型按鈕 -->
|
||||
<button class="btn btn-primary btn-sm">編輯</button>
|
||||
|
||||
<!-- 禁用狀態 -->
|
||||
<button class="btn btn-primary" disabled>禁用</button>
|
||||
|
||||
<!-- 範本按鈕 -->
|
||||
<button class="btn-template">插入模板</button>
|
||||
|
||||
<!-- 圖標按鈕 -->
|
||||
<button class="btn-icon">顯示</button>
|
||||
```
|
||||
|
||||
## 彈窗
|
||||
|
||||
```html
|
||||
<!-- 彈窗容器 -->
|
||||
<div class="modal" :class="{ show: showModal }">
|
||||
<div class="modal-dialog">
|
||||
<!-- 彈窗標題 -->
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">編輯</h3>
|
||||
</div>
|
||||
|
||||
<!-- 彈窗內容 -->
|
||||
<div class="modal-body">
|
||||
<!-- 表單內容 -->
|
||||
</div>
|
||||
|
||||
<!-- 彈窗頁尾 -->
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" @click="closeModal">取消</button>
|
||||
<button class="btn btn-primary" @click="save">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 寬度類別
|
||||
|
||||
### 搜尋欄位寬度
|
||||
```html
|
||||
<!-- 佔 1/6 (2欄) -->
|
||||
<div class="search-field-inline w-2"></div>
|
||||
|
||||
<!-- 佔 1/4 (3欄) -->
|
||||
<div class="search-field-inline w-3"></div>
|
||||
|
||||
<!-- 佔 1/3 (4欄) -->
|
||||
<div class="search-field-inline w-4"></div>
|
||||
|
||||
<!-- 佔 1/2 (6欄) -->
|
||||
<div class="search-field-inline w-6"></div>
|
||||
```
|
||||
|
||||
### 標籤寬度
|
||||
```html
|
||||
<!-- 相對寬度 -->
|
||||
<label class="form-label-inline w-3">標籤</label>
|
||||
|
||||
<!-- 固定寬度 -->
|
||||
<label class="form-label-inline w-px-80">標籤</label>
|
||||
```
|
||||
|
||||
## CSS 變數
|
||||
|
||||
```css
|
||||
/* 顏色 */
|
||||
--color-primary: #c41e3a /* 主色 */
|
||||
--text-primary: #2d2d2d /* 主文字 */
|
||||
--text-muted: #8a8a8a /* 淡文字 */
|
||||
--bg-content: #ffffff /* 內容背景 */
|
||||
|
||||
/* 間距 */
|
||||
--spacing-xs: 5px
|
||||
--spacing-sm: 10px
|
||||
--spacing-md: 15px
|
||||
--spacing-lg: 20px
|
||||
|
||||
/* 字體 */
|
||||
--font-size-base: 14px
|
||||
--font-size-sm: 12px
|
||||
|
||||
/* 邊框 */
|
||||
--border-color: #dee2e6
|
||||
--border-radius: 4px
|
||||
|
||||
/* 陰影 */
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1)
|
||||
```
|
||||
|
||||
## 文字工具類
|
||||
|
||||
```html
|
||||
<p class="text-center">居中文字</p>
|
||||
<p class="text-primary">主要顏色文字</p>
|
||||
<p class="text-muted">淡色文字</p>
|
||||
<p class="text-danger">危險顏色文字</p>
|
||||
```
|
||||
|
||||
## 間距工具類
|
||||
|
||||
```html
|
||||
<!-- Margin -->
|
||||
<div class="mt-3">上邊距</div>
|
||||
<div class="mb-3">下邊距</div>
|
||||
|
||||
<!-- Padding -->
|
||||
<div class="pt-3">上內邊距</div>
|
||||
<div class="pb-3">下內邊距</div>
|
||||
```
|
||||
Reference in New Issue
Block a user