Top Bar - daniel-qa/Vue GitHub Wiki

Top Bar

el-row 讓內容靠右對齊

<el-row justify="end">
  <el-button type="primary">按鈕</el-button>
</el-row>
  • 常用 justify 參數
justify 值 對應的 justify-content 效果
"start"（預設） flex-start 靠左對齊（預設）
"center" center 置中對齊
"end" flex-end 靠右對齊
"space-between" space-between 左右貼齊，元素間距均分
"space-around" space-around 元素間距均分，兩側保留空間
"space-evenly" space-evenly 元素間距完全均分

使用 div 讓內容靠右對齊

<template>
    <!-- 按鈕區塊 -->
    <div class="top-bar">
        <el-button type="primary" size="small" @click="goToSendMsg">
            推送訊息
        </el-button>
    </div>
	
</template>

<style scoped>
.top-bar {
    display: flex;
    justify-content: flex-end; /* 讓按鈕靠右 */
    margin-bottom: 10px; /* 與表格保持間距 */
}
</style>

flex 是 CSS 的屬性，用來控制 div 內部元素的排列方式。 justify-content 必須搭配 display: flex 或 display: grid 一起使用，它的作用是 調整「主軸（主方向）」上的內容對齊方式。

常見 justify-content 的值

屬性值 效果
flex-start 靠左對齊（預設值）
center 置中對齊
flex-end 靠右對齊
space-between 左右貼邊，元素間距均分
space-around 元素間距均分，左右保留空間
space-evenly 元素間距完全均分
⚠️ **GitHub.com Fallback** ⚠️