PrimeVue 的應用程式廣域設定。
設定由從 primevue/config 匯入的 PrimeVue 實例管理。
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, { /* options */ });
樣式模式提供基於設計令牌架構的主題設定。請參閱樣式模式文件，以了解有關構建您自己的主題等詳細資訊。
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
});
無樣式模式會指示元件不要新增任何內建的樣式類別，以便可以使用自訂 CSS 或 Tailwind、Bootstrap 或 PrimeFlex 等函式庫來設定樣式。請瀏覽無樣式模式文件以取得更多資訊。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
定義每個元件類型的共用傳遞屬性。請瀏覽傳遞屬性文件以取得更多資訊。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
slider: {
handle: { class: 'bg-primary text-primary-contrast' }
}
}
});
用於設定元件的 ptOptions 屬性和 usePassThrough 方法。mergeSections 定義是否新增主要設定中的區段，而 mergeProps 控制是否覆寫或合併已定義的屬性。mergeSections 的預設值為 true，而 mergeProps 的預設值為 false。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
ptOptions: {
mergeSections: true,
mergeProps: false
}
});
漣漪效果是支援的元件（例如按鈕）的可選動畫。預設為停用，需要在您的應用程式的進入檔案 (例如 main.js) 中，在 PrimeVue 設定期間啟用。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { ripple: true });
輸入欄位有兩種樣式，預設值為outlined，欄位周圍有邊框，而filled 替代方案會將背景顏色新增至欄位。將 p-variant-filled 應用於輸入的祖先會啟用填滿的樣式。如果您偏好在整個應用程式中使用填滿的輸入，請使用全域容器，例如文件主體或應用程式元素，來應用樣式類別。請注意，如果您將其新增至應用程式元素，則傳送至文件主體（例如 Dialog）的元件將無法顯示填滿的輸入，因為它們不是 DOM 樹狀結構中應用程式根元素的子系，為了處理這種情況，請在 PrimeVue 設定中將 inputVariant 也設定為 filled。
import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { inputVariant: "filled" });
ZIndex 會自動管理，以確保在組合多個元件時，覆蓋元件的圖層運作順暢。不過，在某些情況下，您可能想要設定預設值，例如標頭區段固定的自訂配置。在這種情況下，下拉式選單需要顯示在應用程式標頭下方，而強制回應對話方塊應顯示在上方。PrimeVue 設定提供 zIndex 屬性來自訂元件類別的預設值。預設值如下所述，可以在設定 PrimeVue 時自訂。
import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
zIndex: {
modal: 1100, //dialog, drawer
overlay: 1000, //select, popover
menu: 1000, //overlay menus
tooltip: 1100 //tooltip
}
});
核心中動態產生的樣式元素上要使用的 nonce 值。
app.use(PrimeVue, {
csp: {
nonce: '...'
}
});
use 函式的第二個參數可用於在 PrimeVue 安裝期間起始地區設定。
app.use(PrimeVue, {
locale: {
accept: 'Aceptar',
reject: 'Rechazar',
//...
}
});
地區設定設定是反應式的，因此任何變更都會立即反映在 UI 中。假設您正在製作多語言應用程式，並且需要動態變更語言。
import { defineComponent, onMounted } from "vue";
import { usePrimeVue } from "primevue/config";
export default defineComponent({
setup() {
const changeToSpanish = () => {
const primevue = usePrimeVue();
primevue.config.locale.accept = "Aceptar";
primevue.config.locale.reject = "Rechazar";
}
onMounted(() => {
changeToSpanish();
})
}
});
社群支援的 PrimeLocale 存放庫中提供可供使用的地區設定設定。如果您可以提出提取要求，並與其他社群成員分享，我們將不勝感激。
設定由從 primevue/config 匯入的地區設定 API 管理。
| 金鑰 | 值 |
|---|---|
| startsWith | 開頭為 |
| contains | 包含 |
| notContains | 不包含 |
| endsWith | 結尾為 |
| equals | 等於 |
| notEquals | 不等於 |
| noFilter | 無篩選 |
| lt | 小於 |
| lte | 小於或等於 |
| gt | 大於 |
| gte | 大於或等於 |
| dateIs | 日期為 |
| dateIsNot | 日期不為 |
| dateBefore | 日期在之前 |
| dateAfter | 日期在之後 |
| clear | 清除 |
| apply | 套用 |
| matchAll | 全部符合 |
| matchAny | 符合任一 |
| addRule | 新增規則 |
| removeRule | 移除規則 |
| accept | 是 |
| reject | 否 |
| choose | 選擇 |
| upload | Upload |
| cancel | 取消 |
| completed | 已完成 |
| pending | 待處理 |
| fileSizeTypes | ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
| dayNames | ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] |
| dayNamesShort | ['週日', '週一', '週二', '週三', '週四', '週五', '週六'] |
| dayNamesMin | ['日', '一', '二', '三', '四', '五', '六'] |
| monthNames | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| monthNamesShort | ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
| chooseYear | 選擇年份 |
| chooseMonth | 選擇月份 |
| chooseDate | 選擇日期 |
| prevDecade | 上一個十年 |
| nextDecade | 下一個十年 |
| prevYear | 上一年 |
| nextYear | 下一年 |
| prevMonth | 上個月 |
| nextMonth | 下個月 |
| prevHour | 上一個小時 |
| nextHour | 下一個小時 |
| prevMinute | 上一個分鐘 |
| nextMinute | 下一個分鐘 |
| prevSecond | 上一個秒數 |
| nextSecond | 下一個秒數 |
| am | am |
| pm | pm |
| today | 今天 |
| weekHeader | 週 |
| firstDayOfWeek | 0 |
| showMonthAfterYear | false |
| dateFormat | mm/dd/yy |
| weak | 弱 |
| medium | 中 |
| strong | 強 |
| passwordPrompt | 輸入密碼 |
| searchMessage | 有 {0} 個結果 |
| selectionMessage | 已選取 {0} 個項目 |
| emptySelectionMessage | 未選取任何項目 |
| emptySearchMessage | 找不到結果 |
| fileChosenMessage | {0} 個檔案 |
| noFileChosenMessage | 未選擇任何檔案 |
| emptyMessage | 沒有可用選項 |
| aria.trueLabel | 是 |
| aria.falseLabel | 否 |
| aria.nullLabel | 未選取 |
| aria.star | 1 顆星 |
| aria.stars | {star} 顆星 |
| aria.selectAll | 已選取所有項目 |
| aria.unselectAll | 已取消選取所有項目 |
| aria.close | 關閉 |
| aria.previous | 上一個 |
| aria.next | 下一個 |
| aria.navigation | 導覽 |
| aria.scrollTop | 捲動至頂端 |
| aria.moveTop | 移至頂端 |
| aria.moveUp | 向上移動 |
| aria.moveDown | 向下移動 |
| aria.moveBottom | 移動到底部 |
| aria.moveToTarget | 移動到目標 |
| aria.moveToSource | 移動到來源 |
| aria.moveAllToTarget | 全部移動到目標 |
| aria.moveAllToSource | 全部移動到來源 |
| aria.pageLabel | 頁面 {page} |
| aria.firstPageLabel | 第一頁 |
| aria.lastPageLabel | 最後一頁 |
| aria.nextPageLabel | 下一頁 |
| aria.prevPageLabel | 上一頁 |
| aria.rowsPerPageLabel | 每頁列數 |
| aria.jumpToPageDropdownLabel | 跳轉到頁面下拉選單 |
| aria.jumpToPageInputLabel | 跳轉到頁面輸入框 |
| aria.selectRow | 已選取列 |
| aria.unselectRow | 已取消選取列 |
| aria.expandRow | 已展開列 |
| aria.collapseRow | 已摺疊列 |
| aria.showFilterMenu | 顯示篩選選單 |
| aria.hideFilterMenu | 隱藏篩選選單 |
| aria.filterOperator | 篩選運算子 |
| aria.filterConstraint | 篩選條件 |
| aria.editRow | 編輯列 |
| aria.saveEdit | 儲存編輯 |
| aria.cancelEdit | 取消編輯 |
| aria.listView | 列表檢視 |
| aria.gridView | 網格檢視 |
| aria.slide | 幻燈片 |
| aria.slideNumber | 第 {slideNumber} 張 |
| aria.zoomImage | 縮放圖片 |
| aria.zoomIn | 放大 |
| aria.zoomOut | 縮小 |
| aria.rotateRight | 向右旋轉 |
| aria.rotateLeft | 向左旋轉 |