ส่วนประกอบ Medly ให้ส่วนประกอบตอบสนองตามธีมมากมาย
ส่วนประกอบ Medly
ส่วนประกอบตอบสนองตามธีมพร้อมการกำหนดค่าที่หลากหลายเพื่อให้ตรงกับความต้องการของคุณ คุณสามารถชำระเงินหนังสือนิทานของส่วนประกอบ ที่นี่ .
เริ่มต้น
npx create-react-app medly-components-demo --template typescript cd medly-components-demo yarn add styled-components @types/styled-components yarn add @medly-components/theme @medly-components/utils @medly-components/icons @medly-components/core @medly-components/layout @medly-components/loaders @medly-components/forms แทนที่เนื้อหาของ |_+_| ด้วยสิ่งต่อไปนี้:
index.tsxแทนที่เนื้อหาใน |_+_| ด้วยสิ่งต่อไปนี้:
import { defaultTheme } from '@medly-components/theme'; import { CssBaseline } from '@medly-components/core'; import { ThemeProvider } from 'styled-components'; import React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); หากคุณกำลังใช้คุณสมบัติสแตติกของส่วนประกอบใดๆ เช่น |_+_| คุณต้องเพิ่ม |_+_| ใน |_+_| . ของคุณ ไฟล์.
แพ็คเกจ
ห้องสมุดประกอบด้วยห้าแพ็คเกจ:
แกน
แพ็คเกจหลักประกอบด้วยส่วนประกอบ ส่วนประกอบตอบสนองพื้นฐานเกือบทั้งหมด เช่น Avatar, ปุ่ม, อินพุต, รายการ, Modal เป็นต้น
แพนด้าแปลงร่าง vs สมัคร
ไอคอน
แพ็คเกจไอคอนประกอบด้วยไอคอน svg ที่ใช้บ่อยที่สุดซึ่งแสดงเป็นส่วนประกอบตอบสนอง
รถตัก
ตัวโหลด svg ธรรมดาสองสามตัวถูกเปิดเผยเป็นส่วนประกอบที่ทำปฏิกิริยา
เค้าโครง
แพ็คเกจเค้าโครงประกอบด้วยส่วนประกอบที่ช่วยในการสร้างเค้าโครงหน้าโดยใช้แผงด้านข้างและรายการนำทาง ซึ่งแสดงเป็นส่วนประกอบตอบสนอง
แบบฟอร์ม
การใช้แพ็คเกจนี้ คุณสามารถสร้างไดนามิกฟอร์มโดยใช้ json . อย่างง่าย
ธีม
ธีมช่วยให้คุณกำหนดวิธีการจัดรูปแบบองค์ประกอบในเว็บไซต์ได้ ซึ่งสามารถทำได้แยกกันสำหรับส่วนประกอบบางประเภท เช่น ไอคอนทั้งหมดควรเป็นแบบทึบหรือสามารถทำได้สำหรับทั้งเว็บไซต์ เช่น ธีมสีสำหรับส่วนประกอบทุกประเภทในเว็บไซต์ควรเป็นสีส้ม
ยูทิลิตี้
Utils package ประกอบด้วยฟังก์ชันหรือส่วนประกอบที่ใช้บ่อยที่สุด เช่น ตัวช่วยสตริง มีฟังก์ชันในการแปลงสตริงเป็น camelCase การเปรียบเทียบสตริงที่ไม่คำนึงถึงขนาดตัวพิมพ์ ฯลฯ
สร้างด้วย
hp.com/go/dj2600 ตั้งค่า
ตอบสนองการปัดแบบเนทีฟเพื่อลบ
สคริปต์ npm
- |_+_| เพื่อสร้างส่วนประกอบ
- |_+_| มุ่งมั่นด้วยวิธีการมุ่งมั่นแบบธรรมดา
- |_+_| เพื่อเรียกใช้ css lint
- |_+_| เพื่อเรียกใช้ ts lint
- |_+_| เพื่อเรียกใช้ทั้ง css & ts lint
- |_+_| เพื่อรันการทดสอบและพิมพ์ check
- |_+_| เพื่ออัปเดตสแนปชอต
- |_+_| เพื่อดูการทดสอบ
- |_+_| เพื่อเรียกใช้ tsc เพื่อตรวจสอบประเภท
- |_+_| เพื่อเรียกใช้การทดสอบเท่านั้น
- |_+_| เพื่อเรียกใช้หนังสือนิทานเพื่อรีโหลดส่วนประกอบของคุณแบบสด
- |_+_| เพื่อเผยแพร่เวอร์ชันล่าสุดไปที่ npm
ดาวน์โหลดรายละเอียด:
ผู้เขียน: เมดลี่
การสาธิต: https://medly.github.io/medly-components/?path=/story/*
รหัสแหล่งที่มา: https://github.com/medly/medly-components
#reactjs #javascript #react