반응형 material5 React Material - Mui Tree View로 파일, 폴더 뷰 만들기 (Mui Directory Tree View) 리액트 전체 링크 참고 - mui tree view - glob으로 파일, 폴더 목록 찾기 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui로 파일 브라우저 만들기 - 파일 브라우저 만들기 (with Node JS) - 파일 브라우저에서 파일 다운로드하기 mui tree view를 이용해 파일/폴더 뷰를 만들어보자. 먼저 @mui/lab을 설치한다. $ npm install @mui/lab mui tree view를 참고하면 가장 먼저 나오는 예시 코드는 다음과 같다. import React from "react"; import TreeView from "@mui/lab/TreeView"; import Expa.. 2023. 4. 28. React Material - Mui Table 옵션 설정하기 (Customizing Material React Table) 리액트 전체 링크 참고 - 예제 확인 링크 - install - basic example - column options - Mui Table 세로 줄 변경하기 테이블을 사용하기 위해 npm으로 mui table을 설치하자. npm install material-react-table 가장 기본적인 예제로 만들어진 MaterialReactTable을 사용해보자. import React, { useMemo } from 'react'; import MaterialReactTable from 'material-react-table'; //nested data is ok, see accessorKeys in ColumnDef below const data = [ { name: { firstName: 'John', .. 2023. 4. 12. React Material - 아이콘으로 버튼 만들기 (Make Button with Icons) 리액트 전체 링크 참고 - 예제 확인 링크 - mui icons - mui react button 아이콘을 사용하기 위해 mui icons를 설치한다. npm install @mui/icons-material 예시로 휴지통 아이콘을 추가해보자. 휴지통 아이콘을 사용하기 위해서는 아래의 import 구문이 필요하다. import DeleteIcon from "@mui/icons-material/Delete"; 매번 이러한 import 구문을 외울 필요는 없다. material에서 사용 가능한 아이콘은 링크에서 검색할 수 있기 때문이다. 위에서 사용한 휴지통 아이콘(= delete)을 검색해보자. 해당 아이콘을 클릭하면 import 예시와 아이콘 설정에 대한 예시도 나오게 된다. 이제 화장실 아이콘을 imp.. 2023. 4. 8. React Material - 버튼 색깔, 아웃라인 변경하기 (Change Mui Button Color on Hover) 리액트 전체 링크 참고 - 예제 확인 링크 - mui react button - mui react palette Material의 팔레트를 보면 기본 색상은 다음과 같다. 버튼의 종류(variant)는 크게 text, contained, outlined로 나뉜다. import React from "react"; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; const ButtonTest = () => { return ( Primary Secondary Error Warning Info Success Primary Secondary Error Warning Info Success Primary Secon.. 2023. 4. 7. 유니티 - 오브젝트를 선택된 상태로 만들기 : (3) Shader Outline Unity 전체 링크 오브젝트를 선택된 상태로 만들기 : (1) bool 오브젝트를 선택된 상태로 만들기 : (2) 이미지로 만들기 오브젝트를 선택된 상태로 만들기 : (3) Shader Outline 오브젝트를 선택된 상태로 만들기 : (4) 오브젝트를 하나만 선택하기 링크의 경우, 오브젝트를 선택된 상태로 만들기 위해 이미지를 이용해 outline을 직접 만들었다. 이번에는 오브젝트를 선택된 상태로 만들기 위해 Shader를 이용해보자. 먼저 Shader 자체는 Outline Shader로 검색해서 적당한 shader를 구한다. Shader "Draw/OutlineShader" { Properties { _OutlineColor ("Outline Color", Color) = (1,0,0,1) _Ou.. 2022. 4. 29. 이전 1 다음 반응형
