流星：如何使用風格

我使用meteor-useraccounts來處理用戶帳戶 - 包括useraccounts:bootstrap。我的boilerplate是直接從回購。流星：如何使用風格

我的問題：我不明白是把我自己的HTML/CSS。

我config.js：

// Options 
AccountsTemplates.configure({ 
    defaultLayout: 'emptyLayout', 
    showForgotPasswordLink: true, 
    overrideLoginErrors: true, 
    enablePasswordChange: true, 

    showLabels: false, 
    showPlaceholders: true, 

    negativeValidation: true, 
    positiveValidation: true, 
    negativeFeedback: true, 
    positiveFeedback: true, 
}); 

AccountsTemplates.addFields([ 
    { 
     _id: 'firstName', 
     type: 'text', 
     placeholder: "First Name", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter your first name.", 
    }, 
    { 
     _id: 'surName', 
     type: 'text', 
     placeholder: "Sur Name", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter your first name.", 
    }, 
    { 
     _id: 'institution', 
     type: 'text', 
     placeholder: "Institution/Company", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter the institution or company you work for.", 
    }, 
    { 
     _id: 'position', 
     type: 'text', 
     placeholder: "Position", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter the your position in the institution/company.", 
    }, 
]);

我的文檔閱讀，你應該用自己代替原來的模板，這就是我與Template.myAtForm.replaces("atForm");和下面的模板：

<template name="myAtForm"> 
    {{#unless hide}} 
    <div class="at-form"> 
     {{#if showTitle}} 
     {{> atTitle}} 
     {{/if}} 
     {{#if showError}} 
     {{> atError}} 
     {{/if}} 
     {{#if showResult}} 
     {{> atResult}} 
     {{/if}} 
     {{#if showOauthServices}} 
     {{> atOauth}} 
     {{/if}} 
     {{#if showServicesSeparator}} 
     {{> atSep}} 
     {{/if}} 
     {{#if showPwdForm}} 
     {{> atPwdForm}} 
     {{/if}} 
     {{#if showTermsLink}} 
     {{> atTermsLink}} 
     {{/if}} 
     {{#if showSignInLink}} 
     {{> atSigninLink}} 
     {{/if}} 
     {{#if showSignUpLink}} 
     {{> atSignupLink}} 
     {{/if}} 
    </div> <!-- end main div --> 
    {{/unless}} 
</template>

這是給定的線框：

例如，我必須在哪裏添加引導類，以便我在一行中有兩個輸入字段（但在WF中看不到每行）？或者，我如何設計我自己的上傳按鈕（據我所知甚至沒有type:file）？

事件與useraccounts:unstyled包，我不明白在哪裏把HTML/CSS。

任何幫助真的很感激。

來源

2016-01-31 Amir Rahbaran

建立你的模板，然後手動調用'Accounts.createUser'或'Accounts.loginWith '（不需要useraccounts：*） – webdeb

@webdeb：我想過，但useraccounts已經做得很好，處理很多其他的東西。如果我只是可以以某種方式添加HTML/CSS ... –

答：最好寫自己的模板

我肯定useraccounts是做什麼的東西非常好。但它的目標是簡單的用戶界面。我想大部分的應用程序都很滿意。

但是，您可以使用CSS設置所有字段的樣式。有些類添加到您的字段模板（_id字段）。看看生成的 html和useraccounts:unstyled包的來源。然後你清楚地知道它的渲染算法是如何工作的。

但正如你在你原來的文章中提到的，沒有文件字段爲例。這意味着你必須自己添加模板，並且還要管理文件上傳邏輯/驗證。

來源

2016-01-31 19:47:49 webdeb

好的。非常感謝你。 :) 所以我應該只寫我自己的用戶界面，但仍然使用'useraccounts'，對不對？ –

寫你自己的UI，並使用Meteor Accounts API處理它 – webdeb

流星：如何使用風格

回答

相關問題