این مقاله به ایجاد یک جزء Snackbar با RIOT ، با استفاده از طراحی مواد CSS Beercss و اجرای یک عمل در هنگام ورود و انتخاب.
قبل از شروع ، حتماً یک برنامه RIOT اساسی داشته باشید یا با موارد قبلی من مشورت کنید.
Snackbars پیام ها را در انتهای صفحه ارتباط می دهد ، که حداقل قطع می شوند و نیازی به اقدام کاربر ندارند. آنها می توانند شامل یک عمل واحد مانند “لغو” ، “باز” یا “یافتن بیشتر” باشند.
پایه اجزای میان وعده
هدف این است که هنگام کلیک بر روی یک دکمه ، یک برنامه Riot با یک Snackbar ظاهر شود و هنگام کلیک روی عمل ، آن را به طور خودکار از بین ببرد.
ابتدا یک پرونده جدید به نام ایجاد کنید c-snackbar.riot در پرونده مؤلفه پیشوند c- به معنای “مؤلفه” ، یک توافق نامگذاری مفید و عمل خوب است.
کد زیر را در بنویسید ./components/c-snackbar.riotبشر HTML از مستندات BeerCSS تهیه می شود و من نحو Riotjs را برای منطق اضافه کردم:
کد منبع: https://github.com/steevepay/riot-beercss/blob/main/components/c-snackbar.riot
بیایید کد را توضیح دهیم:
- برچسب ها
définissent une balise racine personnalisée, portant le même nom que le fichier. Vous devez l’écrire ; sinon, cela pourrait créer des résultats inattendus. Utiliser la balisecomme balise racine ou redéfinir des balises HTML natives est une mauvaise pratique, donc commencer parc-توافق خوبی است - پیام به عنوان برچسب شکاف منتقل شده است
- میان وعده ها می توانند نمایش دهند دکمه ای که به کاربران اجازه می دهد عمل کنند (تماس با عمل) در فرآیند انجام شده توسط برنامه: اگر ویژگی
props.actionوجود دارد ، پیام در داخل دکمه عمل نمایش داده می شود. -
وقتی دکمه عمل کلیک کرد: رویداد
clickضبط شده و عملکرد را انجام می دهدclickedبرای صدور یک رویداد شخصی به نام Action. - برای نمایش Snackbar ، باید شامل کلاس فعال باشد: هنگامی که غرفه ها. فعال وجود دارد ، به لطف عبارت ، کلاس فعال را اضافه می کند:
{ props?.active ? 'active ' : null }بشر - سبک های مختلفی برای این مؤلفه در دسترس است ، به عنوان مثال ، در صورت استفاده اولیه استفاده می شود
props?.primaryوجود دارد و درست است.
در آخر ، مؤلفه را بارگیری و فوری کنید c-snackbar.riot در یک صفحه اصلی به نام فهرست:
style="width:600px;padding:20px;">
onclick={ () => openSnack("default") } inverse={ true }>Default
onclick={ () => openSnack("error") } error={ true }>Error
onclick={ () => openSnack("primary") } primary={ true }>Primary
active={ state.active }
onaction={ close }
error={ state.error }
icon={ state.icon }
action={ state.action }
primary={ state.primary }
>
{ state.message }
import cButton from "../components/c-button.riot"
import cSnackbar from "../components/c-snackbar.riot"
export default {
components: {
cSnackbar,
cButton
},
state: {
active: false,
icon: null,
message: null,
error: null,
timeout: null
},
openSnack(type) {
if (this.state.active === true) {
return;
}
this.update({
active: true,
message: type === 'error' ? "Something went wrong." : "Email Archived.",
action: type === 'error' ? "Contact Support" : "Undo",
icon: type === 'error' ? 'error' : 'check',
error: type === 'error',
primary: type === 'primary'
})
clearTimeout(this.state.timeout)
this.state.timeout = setTimeout(() => {
this.update({ active: false })
}, 3000)
this.update();
},
close () {
this.update({ active: false })
}
}
کد منبع: https://github.com/steevepay/riot-beercss/blob/main/examples/index.snackbar.riot
جزئیات کد:
- مؤلفه وارد شده است
import cSnackbar from "./components/c-snackbar.riot";سپس در شیء شورش بارگذاری شدcomponents:{}بشر یک جزءButtonهمچنین در صفحه بارگیری می شود: وقتی یک کلیک رخ می دهد ، نمایش داده می شودtoasterبا یک پیام شخصی! - مؤلفه Snackbar با آن فوری می شود
- وضعیت مؤلفه ، مانند
active، در شیء شورش ذخیره می شودstate:{}تحت وضعیت املاک بولی. فعال این ملک به عنوان یک ویژگی ، مانند: - هنگامی که یک دکمه کلیک می شود ، عملکرد OpenSnack به لطف OnClick = {() => OpenNack (“پیش فرض”) انجام می شود. یک پسر برای انتخاب نوع Snackbar ، پیام ، نماد و عمل ابتدا آرگومان را انتخاب کرد. در پایان ، توستر با به روزرسانی حالت نمایش داده می شود. فعال در TRUE.
- برای ناپدید شدن خودکار توستر ، یک زمان وقوع برای مخفی کردن اسنکبار با به روزرسانی ایجاد می شود
state.activeدرfalseبعد از 2 ثانیه - رویداد اقدام شخصی با آن کنترل می شود
onaction: اگر یک کلیک باعث عملکرد Snackbar شود ، عملکردcloseبه روزرسانیstate.activeبرای ناپدید شدن
تست های مؤلفه Snackbar
دو روش برای آزمایش مؤلفه Snackbar وجود دارد ، و آنها در دو مقاله مختلف پوشیده شده است:
پایان
در اینجا ما با استفاده از عناصر طراحی مواد با BEERCSS ، یک مؤلفه شورش Snackbar ایجاد کرده ایم. کد منبع در GitHub موجود است: https://github.com/steevepay/riot-beercss/blob/main/compentents/c-snackbar.riot
روز بخیر! سلامتی
