整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天，我們將學(xué)習(xí)如何制作一個(gè)在懸停時(shí)展開和折疊的側(cè)邊欄。它看起來(lái)很漂亮，實(shí)現(xiàn)比看起來(lái)簡(jiǎn)單得多。我們將逐步完成本教程，并且在此過(guò)程中我還將介紹一些值得注意的HTML / CSS技巧。
以下是本文將涉及的提示和技巧列表：
讓我們開始！
可以在此筆中找到此步驟的完整代碼：https://codepen.io/dalisc/pen/rEjRWo
只使用HTML，您的網(wǎng)頁(yè)將如下圖所示。一些CSS可以做出什么改變！所以我們需要用一些CSS來(lái)設(shè)置它，使其看起來(lái)像上面的gif。
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
此代碼為側(cè)邊欄提供250px（width：250px;）的寬度，背景顏色為深色（background-color：＃111;），并使其在頁(yè)面上完全垂直延伸（height：100％;）。在code pen以自定義側(cè)邊欄。
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
在這里，我們使用“text-decoration：none;”刪除了文本的下劃線和藍(lán)色，并在側(cè)邊欄項(xiàng)目周圍添加了填充和塊顯示的一些空格。增強(qiáng)用戶體驗(yàn)的部分是當(dāng)項(xiàng)目顏色從灰色變?yōu)榘咨珪r(shí)，這可以通過(guò)以下代碼完成：
.sidebar a:hover {
color: #f1f1f1;
}
此代碼表示當(dāng)您將鼠標(biāo)懸停在類“側(cè)欄”中用<a>標(biāo)記的元素上時(shí)，元素的顏色將更改為您設(shè)置的任何顏色，在本例中為＃f1f1f1。
如果您使用Google的素材圖標(biāo)，您會(huì)發(fā)現(xiàn)一個(gè)令人沮喪的問(wèn)題：默認(rèn)情況下，圖標(biāo)和相鄰文字沒有正確垂直對(duì)齊。
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}
你需要做的是在CSS中垂直對(duì)齊它們（vertical-align：middle;）。即使這樣，對(duì)齊也有點(diǎn)偏離，所以在此之后給你的圖標(biāo)一個(gè)3px垂直增強(qiáng)（padding-bottom：3px;）。
現(xiàn)在我們將添加一些Javascript，因?yàn)槲覀儗⒃趥?cè)邊欄中引入一些功能?？梢栽诖斯P中找到此步驟的完整代碼
兩個(gè)非常有用的事件是onmouseover和onmouseout，它們分別檢測(cè)您的鼠標(biāo)是否懸停在特定元素之上或之外。對(duì)于我們的側(cè)邊欄，我們希望檢測(cè)位于側(cè)邊欄的任何部分，因此我們需要將這些事件添加到側(cè)邊欄的<div>中，如下所示：
<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>
現(xiàn)在，我們可以決定鼠標(biāo)懸停在側(cè)邊欄上或從邊欄懸停的情況。我們需要將“ somethinghappens”替換為我們想要實(shí)際發(fā)生的事情，但首先，讓我們通過(guò)向控制臺(tái)發(fā)送消息來(lái)檢查是否發(fā)生了檢測(cè)。
現(xiàn)在讓我們編寫兩個(gè)Javascript函數(shù)來(lái)確認(rèn)檢測(cè)到事件：
function testIn() {
console.log(“hovering in sidebar”);
}
function testOut() {
console.log(“hovering outside sidebar”);
}
更新我們的側(cè)邊欄：
<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>
現(xiàn)在進(jìn)行懸停并檢查控制臺(tái)以查找我們編寫的消息。它應(yīng)該可以工作了！我們已經(jīng)設(shè)置了告訴側(cè)邊欄是折疊還是展開所需的檢測(cè)。
可以在此筆中找到此最終部分的完整代碼：https：//codepen.io/dalisc/pen/qzRGxQ
我們將折疊邊欄稱為迷你側(cè)邊欄。我們現(xiàn)在想要根據(jù)鼠標(biāo)是否懸停在我的側(cè)邊欄上進(jìn)行兩次查找，因此我們需要在javascript部分中創(chuàng)建一個(gè)布爾變量mini。
我們還將創(chuàng)建一個(gè)函數(shù)來(lái)切換側(cè)邊欄的擴(kuò)展。該功能的邏輯如下：如果側(cè)邊欄處于迷你模式，將鼠標(biāo)懸停在側(cè)邊欄上會(huì)將側(cè)邊欄擴(kuò)展為其完整模式（并將變量mini設(shè)置為false）。如果側(cè)邊欄處于完全模式，將鼠標(biāo)懸停在側(cè)邊欄上會(huì)將其折疊為迷你模式（并將變量mini設(shè)置為true）。
因此，我們需要更改onmouseover和onmouseout事件，并相應(yīng)地引入新函數(shù)toggleSidebar（）。
更改html：
<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>
添加到JS（我們現(xiàn)在可以刪除testIn()和testOut()）：
var mini = true;
function toggleSidebar() {
if (mini) {
console.log(“opening sidebar”);
document.getElementById(“mySidebar”).style.width = “250px”;
document.getElementById(“main”).style.marginLeft = “250px”;
this.mini = false;
} else {
console.log(“closing sidebar”);
document.getElementById(“mySidebar”).style.width = “100px”;
document.getElementById(“main”).style.marginLeft = “100px”;
this.mini = true;
}
}
從功能中可以看出，它基本上都是改變側(cè)邊欄黑色塊的寬度。完整模式的寬度為250px，迷你模式的寬度為85px。我們還策略性地定位文本和圖標(biāo)，以便在側(cè)邊欄折疊時(shí)完全隱藏文本，僅顯示圖標(biāo)。
默認(rèn)情況下，我們希望側(cè)邊欄處于迷你模式，因此我們也將側(cè)邊欄的寬度（最初未被遮擋時(shí)）更改為85px。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
}
當(dāng)前默認(rèn)外觀：
此時(shí)，文本溢出仍有一些問(wèn)題，所以我將介紹一些CSS提示和技巧！
將“white-space：nowrap;”添加到側(cè)欄CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
white-space: nowrap;
}
即使文本大于側(cè)邊欄的寬度，這也會(huì)阻止文本換行到下一行。但正如你在下面看到的那樣，雖然它現(xiàn)在在一行中，它會(huì)溢出，你可以看到溢出...所以我們需要找到隱藏它的方法！
s
要隱藏溢出的文本，只需將“overflow-x：hidden;”和“z-index：1;”添加到側(cè)邊欄css即可。這將隱藏任何寬于側(cè)邊欄寬度的內(nèi)容。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
現(xiàn)在我們的側(cè)邊欄看起來(lái)非常好?。ㄎ乙哺淖兞酥饕獌?nèi)容，但主要內(nèi)容未在本教程中介紹，它包含在code pen。）
現(xiàn)在我們已經(jīng)遇到了我們需要修復(fù)的最后一個(gè)小故障，以使側(cè)邊欄順利移動(dòng)。目前，隨著側(cè)邊欄折疊和展開，沒有動(dòng)畫添加到它，所以它看起來(lái)有點(diǎn)不連貫，像這樣：
所以我們想要的是一個(gè)非常平滑的過(guò)渡，如第一頁(yè)上的gif所示?，F(xiàn)在，變化立即發(fā)生。為了順利，我們需要減緩變化。首先，我們需要讓側(cè)邊欄擴(kuò)展得更慢，比方說(shuō)0.5秒。將其添加到側(cè)邊欄CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
white-space: nowrap;
}
我們還需要將主要部分同時(shí)推到左側(cè)。
#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 85px;
}
你有一個(gè)漂亮的側(cè)邊欄！
在GitHub存儲(chǔ)庫(kù)中找到完整的工作代碼：https：//github.com/dalisc/hover-collapsible-sidebar
轉(zhuǎn)：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1
個(gè)成功的Web App必須有良好的用戶體驗(yàn)。當(dāng)我們談及改善用戶體驗(yàn)時(shí)，你會(huì)想到什么？
其實(shí)，有一點(diǎn)是很容易被開發(fā)者忽視的，那就是CSS。我們可以使用一些CSS技巧來(lái)改善網(wǎng)頁(yè)的表現(xiàn)形式、交互細(xì)節(jié)和可訪問(wèn)性。
而且這些技巧不需要花費(fèi)太多時(shí)間，也不需要消耗服務(wù)器資源。你只需要花兩個(gè)小時(shí)學(xué)習(xí)，然后就可以把它應(yīng)用到你所有的項(xiàng)目中，并永遠(yuǎn)改善用戶體驗(yàn)。
有時(shí)你的按鈕很小，這可能導(dǎo)致用戶無(wú)法準(zhǔn)確點(diǎn)擊按鈕。這種現(xiàn)象經(jīng)常發(fā)生在移動(dòng)端上。如果用戶點(diǎn)擊次數(shù)太多，沒有點(diǎn)擊他們想要的按鈕，或者點(diǎn)擊錯(cuò)誤的按鈕，會(huì)讓他們感到非常沮喪。
那么，如何解決這個(gè)問(wèn)題呢？有些開發(fā)者可能會(huì)說(shuō)：把按鈕做大點(diǎn)。
但網(wǎng)頁(yè)中元素的大小往往是固定的，我們不能輕易調(diào)整一個(gè)元素的大小。而且如果按鈕太大，感覺很奇怪。
一個(gè)更好的解決方案是在不改變按鈕原始尺寸的情況下增加其可點(diǎn)擊區(qū)域。具體來(lái)說(shuō)：我們可以使用偽元素來(lái)增加一個(gè)元素的可點(diǎn)擊區(qū)域。
例如，這里有一個(gè)按鈕。
<button id="btn">btn</button>
然后我們可以為它添加一個(gè)偽類。
#btn::before {
content: "";
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
這時(shí)，如果我們點(diǎn)擊按鈕周圍的區(qū)域，我們?nèi)匀豢梢杂|發(fā)按鈕的點(diǎn)擊事件。
事例地址：
https://codepen.io/bytefishmedium/pen/rNYNoRX
當(dāng)頁(yè)面被#鏈接滾動(dòng)時(shí)，默認(rèn)效果是這樣的。
這種突然的跳躍會(huì)讓人感到不舒服。為了解決這個(gè)問(wèn)題，我們可以使用這個(gè)CSS樣式：sroll-behavior: smooth。
事例地址：https://codepen.io/bytefishmedium/pen/NWwWoKL
我們的網(wǎng)頁(yè)經(jīng)常需要提供一些內(nèi)容供用戶選擇，如電話號(hào)碼、地址、標(biāo)題等。而這些文字應(yīng)該是一個(gè)整體，我們希望當(dāng)用戶點(diǎn)擊部分文字時(shí)，剩余的文字會(huì)被自動(dòng)選擇。
要實(shí)現(xiàn)這種效果非常簡(jiǎn)單，只需使用這個(gè)CSS樣式：user-select: all 。用戶選擇的CSS屬性控制用戶是否可以選擇文本。如果它的值是 all，意味著一個(gè)元素的所有內(nèi)容都將被原子化地選擇。
事例地址：https://codepen.io/bytefishmedium/pen/xxPxMZO
如果你想在文本被選中后添加一些額外的樣式，你可以使用::selection 。::selection CSS偽元素將樣式應(yīng)用于文檔中被用戶突出顯示的部分（比如在文本上點(diǎn)擊和拖動(dòng)鼠標(biāo)）。
但要記住。只有某些CSS屬性可以和::selection一起使用。
事例地址：https://codepen.io/bytefishmedium/pen/gOXOqMz
在不同的場(chǎng)景下使用不同的鼠標(biāo)樣式可以幫助讀者感知頁(yè)面的當(dāng)前狀態(tài)，從而改善用戶的互動(dòng)體驗(yàn)。
cursor CSS屬性設(shè)置鼠標(biāo)指針在一個(gè)元素上時(shí)要顯示的鼠標(biāo)指針（如果有的話）。
光標(biāo)設(shè)置應(yīng)該告知用戶在當(dāng)前位置可以進(jìn)行的鼠標(biāo)操作，包括文本選擇、激活幫助或上下文菜單、復(fù)制內(nèi)容、調(diào)整表格大小，等等。你可以用一個(gè)關(guān)鍵詞來(lái)指定光標(biāo)的類型，或者加載一個(gè)特定的圖標(biāo)來(lái)使用（有可選的回退圖像和強(qiáng)制性的關(guān)鍵詞作為最后的回退）。
例如：
事例地址：https://codepen.io/bytefishmedium/pen/bGYGzRz
有很多光標(biāo)樣式，你可以在MDN文檔中找到它們。
現(xiàn)在我們來(lái)看看 text-overflow 的問(wèn)題。如果一個(gè)文本容器的內(nèi)容是從服務(wù)器返回的，或者是由用戶輸入的，那么就很難預(yù)測(cè)這個(gè)文本會(huì)有多長(zhǎng)。
如果沒有任何預(yù)防措施，你可能會(huì)寫出這樣的代碼。
<head>
<style>
.container{
border: 2px solid red;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="username">bytefish</div>
<p class="profile">FE, UX Designer</p>
</div>
</body>
這個(gè)容器有一個(gè)固定的寬度和高度，包裹著名字和介紹。
但如果有些用戶的簡(jiǎn)介太長(zhǎng)，就會(huì)導(dǎo)致文本溢出容器，使頁(yè)面看起來(lái)很糟糕。
在這一點(diǎn)上，我們可以將溢出的文本折疊起來(lái)。做到這一點(diǎn)就像添加三行CSS樣式一樣簡(jiǎn)單。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 可以使文本不被包起來(lái)。然后我們使用overflow: hidden來(lái)隱藏溢出的文本。最后，我們使用 text-overflow: ellipsis 在文本的末尾添加一個(gè)圓點(diǎn)，向用戶表明有一些隱藏的文本。
事例地址：https://codepen.io/bytefishmedium/pen/VwrwgdQ
現(xiàn)在我們來(lái)討論一下圖片的風(fēng)格。網(wǎng)絡(luò)應(yīng)用中使用的圖片一般由后端提供。你可能已經(jīng)與后端開發(fā)者達(dá)成協(xié)議，將圖片保持在一個(gè)固定的尺寸。然后你寫下這樣的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img-list {
display: flex;
flex-direction: row;
list-style: none;
}
</style>
</head>
<body>
<ul class="img-list">
<li>
<img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
</li>
<li>
<img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
</li>
<li>
<img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
</li>
</ul>
</body>
</html>
而網(wǎng)頁(yè)看起來(lái)是這樣的。
圖片的排列與我們所期望的一樣。
通常情況下是沒有問(wèn)題的。但是當(dāng)我們寫代碼時(shí)，我們不能假設(shè)一切都會(huì)按照我們的預(yù)期發(fā)展。我們需要做好充分的準(zhǔn)備。如果后端返回的圖片不正常，不符合預(yù)期的尺寸，可能大也可能小，那么布局就會(huì)被打亂。
你可以用這個(gè)替換其中一張圖片的鏈接。
https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg
你會(huì)發(fā)現(xiàn)，頁(yè)面突然變得雜亂無(wú)章。
為了防止這個(gè)問(wèn)題，使我們的頁(yè)面更加健壯，我們可以設(shè)置圖片的寬度和高度。這樣，我們就不必?fù)?dān)心后端返回的圖片的大小。
img {
width: 128px;
height: 128px;
}
但上述寫法有一個(gè)缺點(diǎn)：如果圖像本身的長(zhǎng)寬比與我們?cè)O(shè)定的長(zhǎng)寬比不一致，圖像將被壓縮或拉伸。
為了保持圖像的原始長(zhǎng)寬比，我們可以使用 object-fit: cover 。
img {
width: 128px;
height: 128px;
object-fit: cover;
}
object-fit 的CSS屬性設(shè)置一個(gè)被替換的元素的內(nèi)容，如<img>或<video>，應(yīng)該如何調(diào)整大小以適合其容器。
如果該值是 cover，那么被替換的內(nèi)容的大小將保持其長(zhǎng)寬比，同時(shí)填充元素的整個(gè)內(nèi)容框。如果對(duì)象的長(zhǎng)寬比與它的盒子的長(zhǎng)寬比不一致，那么該對(duì)象將被剪掉以適配。
我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是，在實(shí)際應(yīng)用中，可能由于后端服務(wù)的不穩(wěn)定，或者用戶自身的網(wǎng)絡(luò)信號(hào)不好，我們的網(wǎng)頁(yè)可能無(wú)法正確加載圖片。
當(dāng)圖片缺失時(shí)，瀏覽器的默認(rèn)樣式是不優(yōu)雅的，這里我們可以優(yōu)化它。
我們可以給 img元素添加一個(gè) onerror 事件。如果在加載圖片時(shí)出現(xiàn)了錯(cuò)誤，那么我們可以通過(guò) onerror事件給該元素添加一個(gè)樣式，并使用404圖片。
img 元素:
<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">
假設(shè)這就是我們的404圖像:
https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg
下面是 css 代碼
img.error {
display: inline-block;
transform: scale(1);
content: '';
color: transparent;
}
img.error::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
}
這樣，當(dāng) img 元素中的圖片鏈接無(wú)法加載圖片時(shí)，我們的404圖片將被使用。
這里還有一點(diǎn)需要優(yōu)化。在這種情況下，如果原始圖片沒有被正確加載，用戶就不知道這個(gè)圖片應(yīng)該是什么。為了方便用戶理解，我們可以將 img 元素的 alt 屬性顯示在頁(yè)面上。
img.error::after {
content: attr(alt);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 2;
background-color: rgba(0, 0, 0, .5);
color: white;
font-size: 12px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
假設(shè)img的 alt 屬性是這樣的。
<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >
事例地址：https://codepen.io/bytefishmedium/pen/vYWYMxG
當(dāng)你在設(shè)計(jì)顏色組合時(shí)，你是否考慮過(guò)頁(yè)面的顏色對(duì)比？
你需要知道，世界上有很多色盲和色弱用戶。如果你的頁(yè)面的對(duì)比度低，可能會(huì)導(dǎo)致他們無(wú)法正常使用你的產(chǎn)品。無(wú)論是出于人文關(guān)懷，還是出于留住客戶的考慮，你都應(yīng)該設(shè)計(jì)出合適的對(duì)比度。
WCAG AA規(guī)范指出，所有重要的內(nèi)容需要有4.5:1以上的色彩對(duì)比度。
這里有一個(gè)對(duì)比度檢查器的工具。
https://webaim.org/resources/contrastchecker/
事例：
我們也可以使用Chrome DevTool來(lái)檢查一個(gè)元素的顏色對(duì)比。然后我們可以發(fā)現(xiàn)，Medium的網(wǎng)頁(yè)也在實(shí)踐這一原則。
俗話說(shuō)得好，細(xì)節(jié)決定成敗。如果你的項(xiàng)目有很多可以改善用戶體驗(yàn)的細(xì)節(jié)，你就可以讓用戶感到舒服，你就有更高的成功概率。
~完，我是刷碗智，新的一年我們一起刷刷刷！
作者：Shadeed 譯者：前端小智 來(lái)源：medium 原文：https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b
近做了一個(gè)郵件模板功能，就是可以在后臺(tái)定義各種情況下的發(fā)送郵件驗(yàn)證碼的模板，如下圖所示：
可以定義「注冊(cè)賬號(hào)」，「重置密碼」，「驗(yàn)證郵箱」等各種情況下的郵件模板的標(biāo)題和內(nèi)容。使用 WPJAM Basic 的生成表單功能，實(shí)現(xiàn)是非常簡(jiǎn)單，具體的代碼就是生成三個(gè) fieldset 字段組，使用 foreach 簡(jiǎn)單就能處理：
$fields = [];
foreach(['register'=>'注冊(cè)賬號(hào)', 'resetpass'=>'重置密碼', 'verify'=>'驗(yàn)證郵箱'] as $type => $title){
$fields[$type] = ['title'=>$title, 'type'=>'fieldset', 'fields'=>[
$type.'_subject' => ['title'=>'標(biāo)題', 'type'=>'text'],
$type.'_message' => ['title'=>'內(nèi)容', 'type'=>'textarea', 'rows'=>3],
]];
}但是感覺這樣重復(fù)的界面非常占用空間，有沒有什么好的優(yōu)化方式，比如折疊起來(lái)，點(diǎn)擊展開之后再設(shè)置？
我查了一下，其實(shí)無(wú)需 Javascript，只需用 HTML 的 summary / details 這兩個(gè)標(biāo)簽就能實(shí)現(xiàn)。
所以我增強(qiáng)了一下 WPJAM Basic fieldset 組件的能力，fieldset 組件只需要設(shè)定 summary 屬性，就能使用 summary / details 實(shí)現(xiàn)折疊展開效果，具體代碼如下：
$fields = [];
foreach(['register'=>'注冊(cè)賬號(hào)', 'resetpass'=>'重置密碼', 'verify'=>'驗(yàn)證郵箱'] as $type => $title){
$fields[$type] = ['title'=>$title, 'type'=>'fieldset', 'summary'=>$title.'時(shí)郵件設(shè)置', 'fields'=>[
$type.'_subject' => ['title'=>'標(biāo)題', 'type'=>'text'],
$type.'_message' => ['title'=>'內(nèi)容', 'type'=>'textarea', 'rows'=>3],
]];
}相比第一段代碼，這段代碼就是增加了 summary 屬性設(shè)置，最后的效果如下：
默認(rèn)情況都只顯示摘要，點(diǎn)擊摘要時(shí)候，就會(huì)展開字段組設(shè)置，如上圖，我點(diǎn)擊了第一個(gè) fieldset 字段組的摘要，「注冊(cè)賬號(hào)」這個(gè)郵件模板就展開了，其他兩個(gè)則還是沒有折疊的狀態(tài)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
