GetNotes Tools
material-components/material-web
Tool นี้คืออะไร
`@material/web` เป็นไลบรารีของ web components ที่ช่วยสร้างเว็บแอปพลิเคชันที่สวยงามและเข้าถึงได้ง่าย โดยใช้ Material 3 ซึ่งเป็นระบบการออกแบบโอเพนซอร์สล่าสุดของ Google เหมาะสำหรับนักพัฒนาที่ต้องการสร้าง UI ที่ทันสมัยและเป็นไปตามมาตรฐาน Material Design
ข้อมูลโปรเจกต์
ดาว
11.1K
Forks
1.1K
License
Apache-2.0
อัปเดต GitHub ล่าสุด
29 ก.ค. 2569
เพิ่มใน GetNotes
14 ก.ค. 2569
Repository
material-components/material-web
แปลและเรียบเรียงโดย AI
เนื้อหาฉบับภาษาไทย
ใช้อ่านเพื่อทำความเข้าใจเบื้องต้น โปรดตรวจสอบรายละเอียดสำคัญกับเอกสารต้นฉบับด้านล่าง
Material Web
@material/web เป็นไลบรารีของ
web components
ที่ช่วยสร้างเว็บแอปพลิเคชันที่สวยงามและเข้าถึงได้ง่าย โดยใช้
Material 3 ซึ่งเป็นระบบการออกแบบโอเพนซอร์สเวอร์ชันล่าสุดของ Google
หมายเหตุ: MWC อยู่ในโหมดการบำรุงรักษา โดยรอผู้ดูแลใหม่
แหล่งข้อมูล
เริ่มต้นใช้งานอย่างรวดเร็ว
เคล็ดลับ: หากใช้ Angular เราขอแนะนำให้ใช้ Angular Material คอมโพเนนต์ แทน
ตัวอย่างโค้ดนี้เป็นตัวอย่างแบบ buildless ที่โหลด @material/web จาก CDN
ตรวจสอบคู่มือ เริ่มต้นใช้งานอย่างรวดเร็ว เพื่อติดตั้งและสร้างสำหรับเวอร์ชันที่ใช้งานจริง
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import '@material/web/all.js';
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>
</head>
<body>
<h1 class="md-typescale-display-medium">Hello Material!</h1>
<form>
<p class="md-typescale-body-medium">Check out these controls in a form!</p>
<md-checkbox></md-checkbox>
<div>
<md-radio name="group"></md-radio>
<md-radio name="group"></md-radio>
<md-radio name="group"></md-radio>
</div>
<md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
<md-outlined-button type="reset">Reset</md-outlined-button>
</form>
<style>
form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
</style>
</body>เอกสารโปรเจกต์
อ่านเอกสารต้นฉบับ
README วิธีติดตั้ง วิธีใช้งาน และข้อกำหนดจาก repository ต้นฉบับ
Material Web
@material/web is a library of
web components
that helps build beautiful and accessible web applications. It uses
Material 3, the latest version of Google's
open-source design system.
Note: MWC is in maintenance mode pending new maintainers.
Resources
Quick start
Tip: Using Angular? We recommend using Angular Material components instead.
This code snippet is a buildless example that loads @material/web from a CDN.
Check out the quick start guide to install and build
for production.
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import '@material/web/all.js';
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>
</head>
<body>
<h1 class="md-typescale-display-medium">Hello Material!</h1>
<form>
<p class="md-typescale-body-medium">Check out these controls in a form!</p>
<md-checkbox></md-checkbox>
<div>
<md-radio name="group"></md-radio>
<md-radio name="group"></md-radio>
<md-radio name="group"></md-radio>
</div>
<md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
<md-outlined-button type="reset">Reset</md-outlined-button>
</form>
<style>
form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
</style>
</body>