# 개요 mdui의 CDN과 가장 간단한 페이지 템플릿을 통해 mdui 사용을 시작해 보겠습니다. > mdui 2 문서를 읽고 계십니다! > > mdui 1 문서를 읽으려면 [www.mdui.org/docs/](https://www.mdui.org/docs/)를 방문하세요. ## 빠른 시작 {#getting-started} mdui를 사용하는 가장 간단한 방법은 CDN에서 직접 CSS 및 JS 파일을 가져오는 것입니다. npm을 통해 mdui를 설치하려면 [설치](/ko/docs/2/getting-started/installation) 섹션을 참조하세요. **파일 가져오기** 다음 코드를 페이지의 `` 태그에 추가하세요: ```html ``` 컴포넌트의 icon 속성(예: ``의 `icon` 속성)을 사용해야 하는 경우 아이콘의 CSS 파일도 가져와야 합니다. [Material Icons 아이콘 사용](/ko/docs/2/components/icon#usage-material-icons)을 참조하세요. mdui는 서드파티 라이브러리에 의존하지 않으며, 위 파일을 가져오면 정상적으로 작동합니다. ## 가장 간단한 페이지 템플릿 {#template} 다음은 가장 간단한 페이지 템플릿으로, 더 많은 컴포넌트와 콘텐츠를 추가하여 웹사이트를 구축할 수 있습니다. ```html Hello, world! Hello, world! ``` # 설치 npm을 통해 mdui를 설치하거나 CDN에서 mdui를 가져올 수 있습니다. npm을 통한 설치를 권장합니다. ## npm 설치 {#npm} ```bash npm install mdui --save ``` ### 전체 가져오기 {#full-import} 프로젝트의 엔트리 파일에서 아래 두 파일을 가져오면 모든 mdui 컴포넌트를 사용합니다: ```js import 'mdui/mdui.css'; import 'mdui'; ``` 또는 mdui에서 필요한 함수를 직접 가져올 수 있습니다. 예를 들어 [`snackbar`](/ko/docs/2/functions/snackbar) 함수를 가져오려면 다음과 같이 하면 됩니다: ```js import { snackbar } from 'mdui'; ``` mdui에서 가져올 수 있는 모든 함수 표시 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### 필요한 것만 가져오기 {#cherry-picking} 프로젝트 크기를 최적화하려면 필요한 컴포넌트와 함수만 가져올 수 있습니다. 예를 들어 [``](/ko/docs/2/components/button) 컴포넌트와 [`snackbar`](/ko/docs/2/functions/snackbar) 함수만 필요하다면 다음과 같이 가져올 수 있습니다: ```js // CSS 파일은 항상 가져와야 합니다 import 'mdui/mdui.css'; // 컴포넌트 가져오기 import 'mdui/components/button.js'; // snackbar 함수 가져오기 import { snackbar } from 'mdui/functions/snackbar.js'; ``` 각 컴포넌트나 함수의 문서 페이지에 필요한 것만 가져오는 방법이 자세히 설명되어 있습니다. 필요한 것만 가져올 수 있는 모든 컴포넌트 및 함수 표시 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} `` 및 ` 클릭 ``` ### ES 모듈 빌드 버전 사용 {#es-module} 다음 예제는 ES 모듈 빌드 버전의 mdui를 사용하는 방법을 보여줍니다. 이 버전에서는 CDN에서 mdui를 가져오기 위해 ES 모듈 구문을 사용합니다: ```html 클릭 ``` # 빠른 시작 mdui의 컴포넌트는 모두 표준 Web Components이므로 `
` 태그를 사용하듯이 mdui 컴포넌트를 사용합니다. 각 컴포넌트의 문서에는 속성, 메서드, 이벤트, 슬롯, CSS Part, CSS 사용자 정의 속성 등 완전한 API가 자세히 설명되어 있습니다. 이 장의 문서에서는 Web Components 사용법을 소개합니다. ## 속성 {#attribute} 속성은 HTML 속성과 JavaScript 프로퍼티로 나뉘며, 일반적으로 일대일로 대응하고 동기화됩니다. 즉, HTML 속성 값을 업데이트하면 JavaScript 프로퍼티 값도 업데이트되며 그 반대도 마찬가지입니다. HTML 속성은 컴포넌트의 HTML 문자열에서 직접 설정할 수 있으며, `getAttribute` 및 `setAttribute` 메서드를 통해 읽고 수정할 수 있습니다: ```html 클릭 ``` JavaScript 프로퍼티는 컴포넌트 인스턴스의 프로퍼티 값을 직접 읽거나 설정할 수 있습니다: ```html 클릭 ``` 일부 속성값은 불리언 타입입니다. 이러한 속성의 HTML 속성이 존재하면 JavaScript 프로퍼티는 `true`이고, 그렇지 않으면 `false`입니다. 그러나 일부 프레임워크와의 호환성을 위해 mdui는 문자열 `false` 값도 불리언 값 `false`로 판단합니다. ```html ``` 때로는 속성값이 배열, 객체 또는 함수인 경우가 있습니다. 이 경우 JavaScript 프로퍼티만 있고 해당 HTML 속성은 없습니다. 예를 들어 [``](/ko/docs/2/components/slider) 컴포넌트의 [`labelFormatter`](/ko/docs/2/components/slider#attributes-labelFormatter) 속성은 함수이므로 JavaScript를 통해서만 설정할 수 있습니다: ```html ``` 아래는 [``](/ko/docs/2/components/slider) 컴포넌트 속성 문서의 일부를 예로 들어 설명합니다: | HTML 속성 | JavaScript 프로퍼티 | reflect | | --------- | ------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | 이 컴포넌트의 `name` 속성은 HTML 속성과 JavaScript 프로퍼티를 모두 가지며, reflect 열은 JavaScript 프로퍼티를 업데이트할 때 HTML 속성도 동기화됨을 나타냅니다. 반면 `value` 속성은 JavaScript 프로퍼티를 업데이트해도 HTML 속성이 업데이트되지 않습니다. `labelFormatter` 속성은 JavaScript 프로퍼티만 있습니다. ## 메서드 {#method} 일부 컴포넌트는 공개 메서드를 제공하며, 이 메서드를 호출하여 다양한 기능을 구현할 수 있습니다. 예를 들어 [``](/ko/docs/2/components/text-field) 컴포넌트의 [`focus()`](/ko/docs/2/components/text-field#methods-focus) 메서드는 텍스트 필드에 포커스를 줍니다. ```html ``` 각 컴포넌트의 문서 페이지에서 사용 가능한 모든 메서드와 해당 매개변수를 확인할 수 있습니다. ## 이벤트 {#event} 일부 컴포넌트는 특정 작업을 수행할 때 이벤트를 트리거합니다. 예를 들어 [``](/ko/docs/2/components/dialog) 컴포넌트는 열릴 때 [`open`](/ko/docs/2/components/dialog#events-open) 이벤트를 트리거하며, 이 이벤트를 리스닝하여 사용자 정의 작업을 수행할 수 있습니다. ```html 대화상자 ``` 각 컴포넌트의 문서 페이지에서 사용 가능한 모든 이벤트와 해당 매개변수를 확인할 수 있습니다. 다른 프레임워크(예: Vue, React, Angular 등)에서 mdui를 사용하는 경우 프레임워크에서 제공하는 구문을 사용해 이벤트를 바인딩할 수 있습니다. 그러나 일부 프레임워크(예: React)의 이벤트 바인딩 구문은 표준 이벤트(예: `click` 이벤트) 바인딩에만 사용할 수 있으며 사용자 정의 이벤트(예: `open` 이벤트) 바인딩에는 사용할 수 없습니다. 따라서 React에서 사용자 정의 이벤트를 바인딩하려면 먼저 요소의 참조를 가져온 다음 `addEventListener` 메서드를 사용해 이벤트를 바인딩해야 합니다. React에서 mdui 사용에 대한 자세한 내용은 [프레임워크 통합 - React](/ko/docs/2/frameworks/react)를 참조하세요. ## 슬롯 {#slot} 많은 컴포넌트가 슬롯을 제공하며, 이를 통해 사용자 정의 HTML 콘텐츠를 컴포넌트 내부에 삽입할 수 있습니다. 가장 일반적인 것은 기본 슬롯으로, 컴포넌트 내부의 일반 HTML 또는 일반 텍스트입니다. 예를 들어 [``](/ko/docs/2/components/button) 컴포넌트의 기본 슬롯은 버튼의 텍스트를 설정할 때 사용합니다. 예시의 "클릭"이 기본 슬롯의 내용입니다: ```html 클릭 ``` 일부 컴포넌트는 이름이 있는 슬롯(이름 있는 슬롯)을 제공하며, 이름 있는 슬롯은 HTML의 `slot` 속성에 슬롯 이름을 지정해야 합니다. 다음 예제에서 [``](/ko/docs/2/components/icon) 컴포넌트는 `slot="start"`를 지정했으며, 이는 [`start`](/ko/docs/2/components/button#slots-icon)라는 이름의 슬롯으로, 이 아이콘이 컴포넌트 내부의 왼쪽에 삽입됨을 의미합니다: ```html 설정 ``` 컴포넌트가 여러 이름 있는 슬롯을 사용하는 경우, 각 이름 있는 슬롯의 순서는 중요하지 않습니다. 컴포넌트 내부에 있기만 하면 브라우저가 자동으로 올바른 위치에 배치합니다. 각 컴포넌트의 문서 페이지에서 지원되는 모든 슬롯을 확인할 수 있습니다. ## CSS 사용자 정의 속성 {#css-custom-properties} CSS 사용자 정의 속성은 CSS의 변수입니다. mdui는 일련의 [전역 CSS 사용자 정의 속성](/ko/docs/2/styles/design-tokens)을 정의하며, 이러한 속성은 각 컴포넌트 내부에서 참조됩니다. 따라서 이러한 CSS 사용자 정의 속성을 수정하여 mdui 컴포넌트의 스타일을 전역적으로 수정할 수 있습니다. 예를 들어 다음 코드는 모든 컴포넌트의 둥근 모서리 크기를 줄입니다: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` 또한 로컬 범위에서 CSS 사용자 정의 속성을 수정할 수 있습니다. 예를 들어 다음 코드는 `class="sharp"`인 요소와 그 하위 요소에서만 둥근 모서리 크기를 줄입니다: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` 일부 컴포넌트는 이 컴포넌트 고유의 CSS 사용자 정의 속성도 제공하며, 이러한 속성의 범위는 특정 컴포넌트이므로 `--mdui` 접두사를 포함하지 않습니다. 예를 들어 다음 코드는 [``](/ko/docs/2/components/dialog) 컴포넌트의 `--z-index` 속성을 수정하여 `z-index` 스타일을 수정합니다: ```css mdui-dialog { --z-index: 3000; } ``` 각 컴포넌트의 문서 페이지에서 컴포넌트가 지원하는 CSS 사용자 정의 속성을 확인할 수 있습니다. ## CSS Part {#css-part} mdui 컴포넌트는 shadow DOM을 사용해 스타일과 동작을 캡슐화하지만, 일반 CSS 선택자로는 shadow DOM 내부의 요소를 선택할 수 없습니다. 따라서 일부 컴포넌트는 shadow DOM 요소에 `part` 속성을 추가하며, `::part` CSS 선택자를 사용해 해당 요소를 선택하고 스타일의 일부를 재정의할 수 있습니다. 예를 들어 다음 코드는 [`button`](/ko/docs/2/components/button#cssParts-button) part를 사용해 버튼의 안쪽 여백을 수정하고, [`label`](/ko/docs/2/components/button#cssParts-label), [`icon`](/ko/docs/2/components/button#cssParts-icon), [`end-icon`](/ko/docs/2/components/button#cssParts-end-icon) part를 사용해 텍스트, 왼쪽 아이콘, 오른쪽 아이콘의 색상을 각각 수정합니다: ```html Button ``` 컴포넌트의 shadow DOM 요소 구조와 기본 스타일에 대해서는 브라우저의 개발자 도구를 열어 확인할 수 있습니다. CSS Part를 사용하기 전에 먼저 전역 CSS 사용자 정의 속성 및 컴포넌트 고유의 CSS 사용자 정의 속성을 사용해 요구 사항을 충족할 수 있는지 판단해야 합니다. 요구 사항을 충족할 수 있다면 CSS 사용자 정의 속성을 우선적으로 사용하여 스타일을 맞춤 설정해야 합니다. 각 컴포넌트의 문서 페이지에서 컴포넌트가 공개하는 모든 `part` 속성을 확인할 수 있습니다. ## 컴포넌트 업데이트 메커니즘 {#update-mechanism} mdui 컴포넌트는 [Lit](https://lit.dev/)를 기반으로 개발되었습니다. Lit는 Web Components 개발을 더 쉽게 만드는 경량 라이브러리입니다. mdui 컴포넌트를 사용할 때 렌더링 및 업데이트 메커니즘을 이해해야 할 수 있습니다. mdui 컴포넌트의 속성을 수정하면 컴포넌트가 다시 렌더링됩니다. 그러나 이 다시 렌더링 과정은 동기적으로 수행되지 않습니다. 여러 속성 값을 동시에 수정하면 Lit는 이러한 변경 사항을 캐시했다가 다음 업데이트 주기에 적용하므로, 속성 값을 몇 번 수정하든 각 컴포넌트는 한 번만 다시 렌더링됩니다. 또한 shadow DOM에서 변경된 부분만 다시 렌더링됩니다. 다음 예제에서는 버튼의 `disabled` JavaScript 프로퍼티 값을 `true`로 설정한 직후 HTML 속성을 쿼리합니다. 그러나 이때 컴포넌트가 아직 다시 렌더링되지 않았으므로 쿼리된 HTML 속성은 여전히 `false`입니다: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` 속성 값 변경 후 다시 렌더링이 완료될 때까지 기다리려면 컴포넌트의 `updateComplete` 속성을 사용합니다. 이 속성은 Promise를 반환하며, Promise가 resolve되면 컴포넌트가 다시 렌더링을 완료했음을 의미합니다: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # TypeScript 지원 mdui는 TypeScript로 개발되었으므로 TypeScript를 잘 지원합니다. 모든 mdui 공식 라이브러리는 타입 선언 파일을 자체 포함하고 있으므로 바로 사용합니다. ## 컴포넌트의 인스턴스 타입 {#instance} 때로는 JavaScript 변수를 mdui 컴포넌트 인스턴스로 단언(assert)해야 할 수 있습니다. 이 경우 mdui에서 이 컴포넌트 타입을 직접 가져올 수 있습니다. 예를 들어 컴포넌트 파일에서 Tooltip 컴포넌트의 타입을 가져옵니다: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` 또는 mdui에서 직접 Tooltip 컴포넌트의 타입을 가져옵니다: ```ts import type { Tooltip } from 'mdui'; ``` 그런 다음 JavaScript 변수를 Tooltip 타입으로 단언할 수 있습니다: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` 이때 IDE가 `tooltip` 변수의 속성과 메서드를 자동으로 힌트해 줍니다. `tooltip` 변수에 이벤트 리스너를 추가하면 이벤트 이름, 이벤트 타입, 콜백 함수 내 `this`의 참조도 자동으로 힌트됩니다: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## 이벤트 타입 {#event} 각 컴포넌트는 컴포넌트의 이벤트 이름과 해당 이벤트 객체 타입을 매핑하는 인터페이스를 내보내며, 인터페이스 이름은 `${컴포넌트이름}EventMap`입니다. 예를 들어 Tooltip 컴포넌트는 `TooltipEventMap`이라는 인터페이스를 내보냅니다: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` 컴포넌트 파일에서 이 인터페이스를 가져올 수 있습니다: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` 또는 mdui에서 직접 이 인터페이스를 가져올 수 있습니다: ```ts import type { TooltipEventMap } from 'mdui'; ``` 이 인터페이스는 컴포넌트 고유의 이벤트만 포함하지만, mdui 컴포넌트는 모두 `HTMLElement`를 상속받으므로 `HTMLElement`의 이벤트도 지원합니다. 교차 타입을 사용해 컴포넌트의 모든 이벤트 타입을 얻을 수 있습니다: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # IDE 지원 mdui는 VS Code 및 WebStorm에 특별히 최적화되어 있어, 이러한 IDE에서 코드 자동 완성, 마우스 오버 힌트 등의 기능을 사용합니다. ## VS Code {#vscode} ### npm을 통해 mdui 설치한 경우 {#vscode-npm} npm을 통해 mdui를 설치했다면 다음 단계에 따라 현재 프로젝트에서 VS Code의 IDE 지원을 활성화할 수 있습니다: 1. 프로젝트 루트 디렉터리에 `.vscode` 디렉터리를 생성합니다. 2. `.vscode` 디렉터리에 `settings.json` 파일을 생성합니다. 3. 다음 코드를 `settings.json` 파일에 추가합니다: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` `settings.json` 파일이 이미 존재하는 경우, 위 두 줄의 코드를 JSON 문서의 루트 노드에 추가하기만 하면 됩니다. 수정이 완료되면 VS Code를 다시 시작하세요. ### CDN을 통해 mdui 사용하는 경우 {#vscode-cdn} CDN을 통해 mdui를 도입한 경우, mdui의 VS Code 확장 프로그램을 설치하여 IDE 지원을 받을 수 있습니다. VS Code의 확장 프로그램 마켓플레이스에서 `mdui`를 검색하고 첫 번째 검색 결과를 설치하거나, [여기를 클릭하여 설치](vscode:extension/zdhxiong.mdui)하세요. 설치가 완료되면 모든 프로젝트에서 mdui의 IDE 지원이 활성화됩니다. VS Code 확장 프로그램을 설치하는 대신 npm을 통해 설치하고 `settings.json` 파일을 설정하는 것이 좋습니다. 그래야 현재 사용 중인 mdui 버전과 IDE 지원이 일치하기 때문입니다. ## WebStorm {#webstorm} ### npm을 통해 mdui 설치한 경우 {#webstorm-npm} npm을 통해 mdui를 설치했다면 다음 단계에 따라 현재 프로젝트에서 WebStorm의 IDE 지원을 활성화할 수 있습니다: 1. 프로젝트 루트 디렉터리의 `package.json` 파일 루트 노드에 다음 코드를 추가합니다: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` `package.json` 파일의 루트 노드에 `web-types` 속성이 이미 존재하는 경우 `./node_modules/mdui/web-types.en.json`을 `web-types` 배열에 추가하기만 하면 됩니다. 수정이 완료되면 WebStorm을 다시 시작하세요. ### CDN을 통해 mdui 사용하는 경우 {#webstorm-cdn} CDN을 통해 mdui를 도입한 경우, mdui의 WebStorm 플러그인을 설치하여 IDE 지원을 받을 수 있습니다. WebStorm의 플러그인 마켓플레이스에서 `mdui`를 검색하고 첫 번째 검색 결과를 설치하세요. 설치가 완료되면 모든 프로젝트에서 mdui의 IDE 지원이 활성화됩니다. WebStorm 플러그인을 설치하는 대신 npm을 통해 설치하여 IDE 지원을 받는 것이 좋습니다. 그래야 현재 사용 중인 mdui 버전과 IDE 지원이 일치하기 때문입니다. ## VS Code와 WebStorm 지원 차이 {#difference} mdui는 VS Code와 WebStorm에 대한 지원에 차이가 있습니다. 다음 표에 자세한 차이점이 나열되어 있습니다: | 코드 자동 완성 및 마우스 오버 힌트 위치 | VS Code | WebStorm | | ------------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | HTML 태그명 | | | | HTML 태그 내 속성명 | | | | HTML 태그 내 속성값의 열거형 | | (속성값 주석 표시 미지원) | | HTML 태그 내 이벤트명 | | | | HTML에서 slot의 `name` 속성값 | | | | CSS에서 `::part()` 선택자의 `part` 속성명 | | | | CSS에서 컴포넌트 내 CSS 사용자 정의 속성명 | | | | CSS에서 전역 CSS 사용자 정의 속성명 | | | | CSS에서 전역 class명 | | | # 현지화 mdui는 기본적으로 영어를 사용합니다. 다른 언어를 사용해야 하는 경우 다국어 구성이 필요합니다. ## 사용법 {#usage} mdui는 다국어 기능을 구현하기 위해 세 가지 함수를 제공합니다: - [`loadLocale`](/ko/docs/2/functions/loadLocale): 언어 팩을 로드합니다. 매개변수는 함수이며, 언어 코드를 받아 Promise를 반환합니다. 언어 팩 로드가 완료되면 Promise가 해당 언어 팩으로 resolve됩니다. 프로젝트의 엔트리 파일에서 이 함수를 호출해야 합니다. - [`setLocale`](/ko/docs/2/functions/setLocale): 지정된 언어로 전환합니다. 매개변수는 새 언어 코드이며, Promise를 반환합니다. 새 언어 팩 로드가 완료되면 resolve됩니다. - [`getLocale`](/ko/docs/2/functions/getLocale): 현재 언어 코드를 가져옵니다. 사용 예시는 다음과 같습니다: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // 프로젝트 엔트리에서 loadLocale을 호출하여 언어 팩 로드 loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // 언어 전환이 필요할 때 이 함수를 호출합니다. Promise resolve 후 언어 전환 성공 setLocale('zh-cn').then(() => { // getLocale을 호출하여 현재 언어 코드를 얻을 수 있습니다 console.log(getLocale()); // zh-cn }); ``` ## 상태 이벤트 {#event} 언어 전환 시작, 완료, 실패 시 `window`에서 `mdui-localize-status` 이벤트가 트리거됩니다. 이 이벤트를 리스닝하여 커스텀 작업을 수행할 수 있습니다(예: 언어 전환 성공 후 언어 코드를 Cookie에 쓰기). 이벤트의 `detail.status` 속성은 현재 발생한 상태 변경을 설명하며, 가능한 값은 `loading`, `ready`, `error`입니다:
detail.status 설명
loading

새로운 언어 팩 로드를 시작합니다.

detail 객체에는 다음이 포함됩니다:

  • loadingLocale: 새로 로드할 언어의 언어 코드.
ready

새로운 언어 팩 로드 성공.

detail 객체에는 다음이 포함됩니다:

  • readyLocale: 새로 로드된 언어의 언어 코드.
error

새로운 언어 팩 로드 실패.

detail 객체에는 다음이 포함됩니다:

  • errorLocale: 로드에 실패한 언어의 언어 코드.
  • errorMessage: 로드 실패 오류 메시지.
사용 예시는 다음과 같습니다: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log(`새 언어 팩 로드 시작: ${event.detail.loadingLocale}`); } else if (event.detail.status === 'ready') { console.log(`새 언어 팩 ${event.detail.readyLocale} 로드 성공`); } else if (event.detail.status === 'error') { console.error( `새 언어 팩 ${event.detail.errorLocale} 로드 실패: ${event.detail.errorMessage}`, ); } }); ``` ## 언어 팩 로드 방식 {#load-locale} ### 지연 로드 {#lazy-load} [동적 가져오기](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)를 사용하면 해당 언어로 전환할 때 해당 언어 팩을 다운로드할 수 있습니다. 이것이 가장 권장되는 방법입니다. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### 사전 로드 {#pre-load} 페이지 로드 시 필요한 모든 언어 팩을 미리 다운로드합니다. 이를 통해 언어 전환 시 다운로드가 필요 없으므로 언어 전환이 더 빨라집니다. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### 정적 가져오기 {#static-imports} 이 방법을 사용하면 필요한 모든 언어 팩을 프로젝트 코드와 함께 단일 파일로 번들링할 수 있으므로 언어 팩을 별도로 다운로드할 필요가 없습니다. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## CDN을 통한 언어 팩 로드 {#cdn} CDN을 통해 mdui를 사용하는 경우 CDN에서 직접 언어 팩을 로드할 수 있습니다. 사용 예시는 다음과 같습니다: ```html ``` ## 지원되는 언어 {#languages} 현재 mdui는 다음 언어를 지원합니다: | 언어 | 언어 코드 | | -------------------- | --------- | | 아랍어 | ar-eg | | 아제르바이잔어 | az-az | | 불가리아어 | bg-bg | | 벵골어(방글라데시) | bn-bd | | 벨라루스어 | be-by | | 카탈루냐어 | ca-es | | 체코어 | cs-cz | | 덴마크어 | da-dk | | 독일어 | de-de | | 그리스어 | el-gr | | 영어 | en-gb | | 영어(미국) | en-us | | 스페인어 | es-es | | 에스토니아어 | et-ee | | 페르시아어 | fa-ir | | 핀란드어 | fi-fi | | 프랑스어(벨기에) | fr-be | | 프랑스어(캐나다) | fr-ca | | 프랑스어(프랑스) | fr-fr | | 아일랜드어 | ga-ie | | 갈리시아어(스페인) | gl-es | | 히브리어 | he-il | | 힌디어 | hi-in | | 크로아티아어 | hr-hr | | 헝가리어 | hu-hu | | 아르메니아어 | hy-am | | 인도네시아어 | id-id | | 이탈리아어 | it-it | | 아이슬란드어 | is-is | | 일본어 | ja-jp | | 조지아어 | ka-ge | | 크메르어 | km-kh | | 북부 쿠르드어 | kmr-iq | | 칸나다어 | kn-in | | 카자흐어 | kk-kz | | 한국어 | ko-kr | | 리투아니아어 | lt-lt | | 라트비아어 | lv-lv | | 마케도니아어 | mk-mk | | 말라얄람어 | ml-in | | 몽골어 | mn-mn | | 말레이어(말레이시아) | ms-my | | 노르웨이어 | nb-no | | 네팔어 | ne-np | | 네덜란드어(벨기에) | nl-be | | 네덜란드어 | nl-nl | | 폴란드어 | pl-pl | | 포르투갈어(브라질) | pt-br | | 포르투갈어 | pt-pt | | 루마니아어 | ro-ro | | 러시아어 | ru-ru | | 슬로바키아어 | sk-sk | | 세르비아어 | sr-rs | | 슬로베니아어 | sl-si | | 스웨덴어 | sv-se | | 타밀어 | ta-in | | 태국어 | th-th | | 터키어 | tr-tr | | 우르두어(파키스탄) | ur-pk | | 우크라이나어 | uk-ua | | 베트남어 | vi-vn | | 중국어 간체 | zh-cn | | 중국어 번체(홍콩) | zh-hk | | 중국어 번체(대만) | zh-tw | ## 새 번역 제출 {#contribute} 새 번역을 기여하거나 기존 번역을 개선하려면 Github에서 Pull Request를 생성하세요. 언어 팩은 [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff)에 있습니다. Github에서 직접 편집할 수 있습니다. # 자주 묻는 질문 다음은 mdui 커뮤니티에서 자주 묻는 질문과 공식 답변을 정리한 것입니다. 질문하기 전에 비슷한 문제가 있는지 찾아보시기 바랍니다. ## 자체 닫는 태그를 사용하면 컴포넌트가 표시되지 않는 이유는 무엇인가요? {#no-self-closing} mdui는 Web Components를 기반으로 개발된 컴포넌트 라이브러리입니다. Web Components 사양은 자체 닫는 태그를 지원하지 않으므로, mdui 컴포넌트에는 종료 태그를 반드시 추가해야 합니다. ```html ``` ## 컴포넌트가 로드되기 전에 컴포넌트를 숨기는 방법은 무엇인가요? {#waiting-load} mdui 컴포넌트는 JavaScript를 통해 등록되므로, js 파일이 로드되어 컴포넌트가 등록되기 전까지 컴포넌트가 잠시 스타일이 없는 상태로 표시될 수 있습니다. 다음 두 가지 방법으로 이 문제를 해결할 수 있습니다. 한 가지 방법은 CSS의 [`:defined`](https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Selectors/:defined) 의사 클래스를 사용해 등록되지 않은 mdui 컴포넌트를 숨기는 것입니다. 다음 CSS 코드는 등록되지 않은 모든 mdui 컴포넌트를 숨기고, 컴포넌트 등록이 완료되면 즉시 표시합니다: ```css :not(:defined) { visibility: hidden; } ``` 다른 방법은 JavaScript의 [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) 메서드를 사용하는 것입니다. 이 메서드는 Promise를 반환하며, 지정된 컴포넌트가 등록되면 해당 Promise가 resolve됩니다. 특정 컴포넌트가 어떤 이유로 로드되지 못하는 경우를 처리하려면 [`Promise.allSettled()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) 메서드를 함께 사용합니다. 다음 예제에서는 먼저 `opacity: 0`으로 ``를 숨긴 다음, 컴포넌트 등록이 완료되면 페이지를 페이드인(fade-in)합니다. 또한, `Promise.allSettled()`를 사용하여 모든 Promise가 완료될 때까지 기다리므로, 특정 컴포넌트를 로드할 수 없더라도 페이지가 정상적으로 표시됩니다: ```html ``` # LLMs.txt mdui는 LLM(대규모 언어 모델)을 위한 `llms.txt`와 `llms-full.txt` 파일을 제공합니다. 이를 통해 AI가 mdui 관련 질문에 더 정확하게 답변할 수 있습니다. ## llms.txt로 AI에 컨텍스트 제공하기 {#context} 다음 두 가지 진입점을 사용할 수 있습니다: - `llms.txt`: https://www.mdui.org/ko/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/ko/docs/2/llms-full.txt `llms.txt`는 간결한 색인으로, 네트워크에 연결된 모델이 링크를 통해 필요한 Markdown 페이지를 가져오거나 프로젝트 개요를 파악하는 데 적합합니다. `llms-full.txt`는 완전한 컨텍스트로 `llms.txt`의 모든 페이지 내용을 포함합니다. 모델이 네트워크에 연결되지 않거나 한 번에 전체 컨텍스트가 필요한 경우에 유용합니다. ## 문서의 Markdown 버전 {#md-mirror} 모든 문서 페이지는 Markdown 버전을 제공합니다. 페이지 URL 끝에 `.md`를 추가하세요(홈페이지는 `index.md` 추가). 예: https://www.mdui.org/ko/docs/2/components/button → https://www.mdui.org/ko/docs/2/components/button.md https://www.mdui.org/ko/docs/2/ → https://www.mdui.org/ko/docs/2/index.md 해당 Markdown 링크나 순수 텍스트를 컨텍스트로 직접 사용하면 더욱 집중적이고 정확한 답변을 얻을 수 있습니다. ## ChatGPT, Claude 등 LLM에서 사용하는 방법 {#how-to-use} 모델의 네트워크 연결/파일 업로드 지원 여부에 따라 다음 방법 중 하나를 사용하거나 조합하여 사용하세요: 1. 직접 붙여넣기: `llms-full.txt`의 내용을 시스템 프롬프트나 첫 번째 메시지로 제공합니다. 예: "다음은 mdui의 컨텍스트입니다. 이를 바탕으로 후속 질문에 엄격히 답변하고, 충돌 시 이 컨텍스트를 우선하세요:\n\n[llms-full.txt 내용 붙여넣기]". 2. 파일 업로드: `llms-full.txt`(또는 `llms.txt`)를 업로드하고 첫 메시지에서 "첨부 파일을 주요 컨텍스트로 사용하세요"라고 지시합니다. 예: "첨부된 mdui 문서를 기반으로 ``의 사용법과 일반적인 문제를 알려주세요". 3. 온라인 읽기: 대화 중 `llms.txt`나 `llms-full.txt`의 링크를 제공합니다. 예: "https://www.mdui.org/ko/docs/2/llms-full.txt 를 읽고 이를 컨텍스트로 삼아 mdui 관련 질문에 답변해 주세요". 4. 특정 페이지 지정: 특정 컴포넌트/함수만 논의할 때는 해당 페이지의 Markdown 주소를 직접 제공합니다. 예: "https://www.mdui.org/ko/docs/2/components/button.md 를 읽고 해당 문서를 기반으로 세 가지 모범 사례를 알려주세요". **팁**: 페이지 오른쪽 상단의 아이콘을 클릭하면 위 링크 복사, 현재 페이지의 Markdown 버전 열기, 현재 페이지나 `llms-full.txt`를 컨텍스트로 ChatGPT에서 열기 등의 기능을 사용할 수 있습니다. # MCP 서버 mdui는 전용 [MCP(Model Context Protocol)](https://modelcontextprotocol.io/) 서버 `@mdui/mcp`를 제공하여 로컬에서 AI 에이전트에게 컴포넌트, 아이콘, CSS 사용자 정의 속성 및 문서 조회 기능을 제공합니다. 이 서버는 Claude Code, Cursor, GitHub Copilot 등의 개발 도구와 함께 사용하여 코드 생성을 보조하고 mdui의 컴포넌트와 스타일을 더 잘 활용할 수 있도록 합니다. ## 도구 {#tools} mdui의 MCP 서버는 AI 에이전트에게 다음과 같은 도구를 노출합니다: - `list_components`: 모든 mdui 컴포넌트를 나열합니다. - `get_component_metadata`: 단일 컴포넌트의 상세 API 메타데이터를 가져옵니다. - `list_css_classes`: 전역 CSS 클래스 이름을 나열합니다. - `list_css_variables`: 전역 CSS 사용자 정의 속성을 나열합니다. - `list_documents`: 모든 문서를 나열합니다. - `get_document`: 단일 문서의 전체 내용을 가져옵니다. - `list_icon_codes`: 속성이나 API에 사용할 수 있는 아이콘 코드를 나열합니다. - `list_icon_components`: 독립적인 아이콘 컴포넌트와 해당 ESM 가져오기 문을 나열합니다. ## 사용 방식 {#usage} MCP 서버는 [stdio 전송](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio)만 지원하며, VS Code, Cursor, Claude Code, Windsurf, Zed 등의 클라이언트와 stdio 프로토콜을 지원하는 AI 에이전트에서 직접 사용합니다. ### VS Code {#vscode} > [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 및 [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) 확장 프로그램이 설치되어 있는지 확인하세요. 1. 프로젝트 루트 디렉터리에 `.vscode/mcp.json` 파일을 생성하고 다음 구성을 추가합니다: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. `mcp.json` 파일 내의 "시작" 버튼을 클릭합니다. 3. GitHub Copilot Chat에서 대화를 시작합니다. ### Cursor {#cursor} 1. 프로젝트 루트 디렉터리에 `.cursor/mcp.json` 파일을 생성하거나 편집하여 다음 구성을 추가합니다: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Settings > Cursor Settings > MCP & Integrations로 이동하여 mdui 서버를 활성화합니다. 3. Cursor Chat에서 대화를 시작합니다. ### Claude Code {#claude-code} 1. 터미널에서 다음 명령을 실행하여 mdui MCP 서버를 추가합니다: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. 그런 다음 `claude`를 실행하여 세션을 시작합니다. 3. 프롬프트를 입력하여 사용을 시작합니다. ### Windsurf {#windsurf} 1. Settings > Windsurf Settings > Cascade로 이동합니다. 2. Manage MCPs를 클릭한 다음 "View raw config"를 클릭하여 구성 파일에 다음을 추가합니다: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > MCP 서버가 자동으로 나타나지 않으면 Refresh를 클릭하여 목록을 새로고침하세요. 3. 프롬프트를 입력하여 대화를 시작합니다. ### Zed {#zed} 1. Settings > Open Settings를 열고 `settings.json` 파일에 다음 구성을 추가합니다: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. 프롬프트를 입력하여 사용을 시작합니다. ### 사용자 정의 MCP 클라이언트 {#custom} 로컬 또는 개발 환경에서 사용자 정의 MCP 클라이언트를 사용하는 경우, 해당 서버를 클라이언트의 구성 파일에 추가하면 됩니다. 예시: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # 다크 모드 mdui의 모든 컴포넌트는 다크 모드를 지원하며, 운영 체제 설정에 따라 테마를 자동으로 전환하는 기능을 지원합니다. 문서 페이지 오른쪽 상단의 아이콘을 클릭하여 테마를 전환하고 각 컴포넌트가 다양한 테마에서 어떻게 표시되는지 확인할 수 있습니다. 다크 모드를 사용하려면 `` 태그에 `mdui-theme-dark` 클래스를 추가하기만 하면 됩니다: ```html ``` 테마가 운영 체제 설정에 따라 자동으로 전환되도록하려면 `` 태그에 `mdui-theme-auto` 클래스를 추가하세요: ```html ``` 페이지의 다른 부분에 다른 테마를 사용할 수도 있습니다. 예를 들어 다음 예제에서는 ``에 다크 모드를 설정했지만 페이지 내의 `
`에 `mdui-theme-light` 클래스를 추가하여 해당 div 내의 요소는 라이트 모드로 표시되고 페이지의 나머지 부분은 다크 모드로 표시됩니다: ```html
``` CSS 클래스를 직접 추가하는 것 외에도 mdui는 테마를 더 편리하게 조작할 수 있는 두 가지 함수를 제공합니다: - [`getTheme`](/ko/docs/2/functions/getTheme): 현재 페이지 또는 특정 요소의 테마를 가져옵니다. - [`setTheme`](/ko/docs/2/functions/setTheme): 현재 페이지 또는 특정 요소의 테마를 설정합니다. --- mdui는 `:root` 및 `.mdui-theme-light`, `.mdui-theme-dark`, `.mdui-theme-auto` 선택기에 `color` 및 `background-color` 스타일을 설정합니다. 이러한 기본 스타일이 마음에 들지 않으면 직접 재정의할 수 있습니다. 다음 예제는 라이트 모드에서 페이지 배경을 순백색, 텍스트를 순검은색으로 설정하고, 다크 모드에서 페이지 배경을 순검은색, 텍스트를 순백색으로 설정합니다: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # 다이내믹 컬러 mdui는 다이내믹 컬러 기능을 제공합니다. 하나의 색상 값만 제공하면 mdui가 자동으로 완전한 색상 구성표를 생성합니다. 또한, mdui는 특정 배경화면에서 주 색상을 추출하여 색상 구성표를 생성하는 기능도 지원합니다. 문서 페이지 오른쪽 상단의 아이콘을 클릭하여 색상 구성표를 전환하고 각 컴포넌트가 다양한 색상 구성표에서 어떻게 표시되는지 확인할 수 있습니다. 색상 구성표는 실제로 CSS 사용자 정의 속성 집합입니다. mdui 컴포넌트의 색상 값은 이 CSS 사용자 정의 속성 집합을 참조하므로 한 번에 모든 컴포넌트의 색상 구성표를 업데이트할 수 있습니다. 전체 CSS 사용자 정의 속성 목록은 [디자인 토큰 - 색상](/ko/docs/2/styles/design-tokens#color)을 참조하세요. ## 색상 구성표 생성 {#color-scheme} [`setColorScheme`](/ko/docs/2/functions/setColorScheme) 함수를 사용해 색상 구성표를 생성할 수 있습니다. 이 함수는 16진수 색상 값을 받아 색상 구성표를 생성하고 페이지의 `` 요소를 해당 색상 구성표로 설정합니다. 예를 들어: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4을 기반으로 색상 구성표를 생성하고 을 해당 색상 구성표로 설정 setColorScheme('#0061a4'); ``` 두 번째 매개변수에 `target` 속성을 지정하여 색상 구성표를 적용할 요소를 지정할 수도 있습니다. 예를 들어: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4을 기반으로 색상 구성표를 생성하고 .foo 요소를 해당 색상 구성표로 설정 setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` 기본적으로 생성되는 색상 구성표에는 [디자인 토큰 - 색상](/ko/docs/2/styles/design-tokens#color)에 나열된 색상만 포함됩니다. 두 번째 매개변수에 `customColors` 속성을 지정하면 mdui는 지정된 사용자 정의 색상 이름과 색상 값을 기반으로 사용자 정의 색상 그룹을 생성합니다. 예를 들어: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4을 기반으로 색상 구성표를 생성하고 기존 error 색상 그룹의 값을 수정하며 music 색상 그룹을 추가합니다 setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` 사용자 정의 색상 그룹에는 네 가지 CSS 사용자 정의 속성이 포함됩니다: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` 여기서 `{name}`은 `customColors`에 전달한 `name` 필드 값, 즉 사용자 정의 색상 이름입니다. 사용자 정의 색상 이름은 `primary`, `secondary`, `tertiary`, `error`와 같은 기본 색상 구성표에 이미 있는 색상 이름일 수 있습니다. 이러한 값을 사용자 정의 색상 이름으로 지정하면 생성된 색상 구성표에서 해당하는 네 가지 CSS 사용자 정의 속성은 지정한 색상 값을 사용해 생성됩니다. 예를 들어 위 예제에서 `error`라는 사용자 정의 색상 이름을 지정했는데, `error`는 기본 색상 구성표에 이미 있는 색상 이름이고 해당 CSS 사용자 정의 속성은 mdui 컴포넌트에서 오류 상태를 나타내는 데 사용되므로, 색상 값이 녹색 값으로 설정되어 mdui 컴포넌트의 오류 상태도 녹색으로 변경됩니다. 사용자 정의 색상 이름은 새로 추가할 수도 있습니다. 예를 들어 위 예제의 `music`은 기본 색상 구성표에 없는 이름이며, 생성된 색상 구성표에는 네 가지 CSS 사용자 정의 속성이 추가로 포함됩니다. 자신의 스타일에서 이러한 CSS 사용자 정의 속성을 참조할 수 있습니다: ```html
Music
Music Container
``` [`removeColorScheme`](/ko/docs/2/functions/removeColorScheme) 함수를 사용해 위 방법으로 생성된 색상 구성표를 제거할 수 있습니다. 매개변수를 전달하여 제거할 요소를 지정할 수 있으며, 기본적으로 ``의 색상 구성표를 제거합니다. ## 배경화면에서 색상 추출 {#from-wallpaper} mdui는 [`getColorFromImage`](/ko/docs/2/functions/getColorFromImage) 함수를 제공하여 주어진 `Image` 인스턴스에서 주 색상을 추출합니다. 이 함수는 Promise를 반환하며, resolve된 값은 추출된 16진수 색상 값입니다. 이 함수에서 얻은 색상 값을 사용해 앞서 설명한 [`setColorScheme`](/ko/docs/2/functions/setColorScheme) 함수를 호출하여 색상 구성표를 설정할 수 있습니다. 예를 들어: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # 글 스타일링 mdui는 `mdui-prose` 및 `mdui-table` CSS 클래스를 제공하며, 글 및 표 스타일을 특별히 최적화합니다. ## 글 스타일링 {#prose} 글의 부모 요소에 `mdui-prose` 클래스를 추가하면 글의 전체 표시 스타일을 최적화할 수 있습니다. 여기에는 글 내부의 `` 표 스타일도 포함됩니다. 예를 들어: ```html

제목

본문

``` ## 표 스타일 {#table} `` 요소에 `mdui-table` 클래스를 추가하면 표의 표시 스타일을 최적화할 수 있습니다. 예를 들어: ```html
``` 표를 부모 요소 내에서 가로로 스크롤할 수 있게하려면 `` 요소의 부모 요소에 `mdui-table` 클래스를 추가합니다. 예를 들어: ```html
``` # 디자인 토큰 디자인 토큰(Design Tokens)은 디자인 시스템을 관리하기 위한 전략입니다. 디자인 시스템의 모든 재사용 가능한 요소(예: 색상, 글꼴, 간격 등)를 독립적인 변수로 추상화하여 전체 디자인 시스템에서 통합적으로 관리하고 적용할 수 있도록 합니다. mdui는 전역 CSS 사용자 정의 속성을 사용해 디자인 토큰을 구현합니다. 즉, CSS 사용자 정의 속성만 수정하면 모든 mdui 컴포넌트의 스타일을 전역적으로 수정할 수 있습니다. 동시에 직접 개발하는 스타일의 경우에도 CSS 사용자 정의 속성을 우선적으로 참조하여 스타일이 mdui 컴포넌트의 스타일과 통일성을 유지하고, 다이내믹 컬러를 수정할 때 자신의 스타일도 색상 구성표를 동기적으로 업데이트할 수 있도록 하는 것이 좋습니다. ## 색상 {#color} mdui는 라이트 모드와 다크 모드에 대해 각각 한 세트의 CSS 사용자 정의 속성을 제공합니다. 라이트 모드에서 CSS 사용자 정의 속성 이름은 `--mdui-color-{name}-light`이며, 여기서 `{name}`은 색상 이름입니다. 다크 모드에서는 `--mdui-color-{name}-dark`입니다. 또한, mdui는 `--mdui-color-{name}`이라는 CSS 사용자 정의 속성 세트를 제공합니다. 이 속성은 라이트 모드에서 `--mdui-color-{name}-light`를 참조하고 다크 모드에서 `--mdui-color-{name}-dark`를 참조하므로 현재 라이트 모드/다크 모드에 따라 자동으로 색상이 전환됩니다. 일부 색상의 CSS 사용자 정의 속성을 수정해야 하는 경우 `--mdui-color-{name}-light`와 `--mdui-color-{name}-dark` 속성을 동시에 수정해야 합니다. CSS 사용자 정의 속성을 읽을 때는 `--mdui-color-{name}` 속성을 직접 사용하면 됩니다. CSS 사용자 정의 속성의 속성값은 RGB 세 가지 색상을 `,`로 구분한 값입니다. 다음 예제는 색상 CSS 사용자 정의 속성의 사용법을 보여줍니다: ```css /* primary 색상값 수정 */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* foo 요소의 배경색을 primary로 설정 */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* bar 요소의 배경색을 불투명도 0.8인 primary로 설정 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` 완전히 새로운 색상 구성표를 만들어야 하는 경우 [`setColorScheme`](/ko/docs/2/functions/setColorScheme) 함수를 사용하는 것이 좋습니다. 이 함수는 지정된 하나의 색상값을 기반으로 전체 색상 구성표를 생성합니다.
색상명 CSS 사용자 정의 속성 기본값 예시
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## 둥근 모서리 {#shape-corner} mdui는 7가지 크기의 둥근 모서리를 제공합니다. 다음은 이러한 둥근 모서리의 CSS 사용자 정의 속성을 사용하는 예시입니다: ```css /* extra-small의 둥근 모서리 크기 수정 */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* foo 요소의 둥근 모서리를 extra-small로 설정 */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS 사용자 정의 속성 | 기본값 | 예시 | | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## 타이포그래피 {#typescale} mdui는 Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small의 15가지 텍스트 스타일을 제공합니다. 사용 예시는 다음과 같습니다: ```css /* Body large 텍스트 스타일 수정 */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* foo 요소의 텍스트 스타일을 Body large로 설정 */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS 사용자 정의 속성 기본값 예시
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## 상태 레이어 불투명도 {#state-layer} 일부 mdui 컴포넌트는 상호작용 시 그 위에 반투명 오버레이를 추가합니다. 예를 들어 [``](/ko/docs/2/components/button) 컴포넌트는 마우스 호버, 포커스, 클릭 또는 드래그 시 반투명 오버레이가 나타납니다. CSS 사용자 정의 속성을 수정하여 이러한 오버레이의 불투명도를 조정할 수 있습니다. 사용 예시는 다음과 같습니다: ```css /* 상태 레이어 불투명도 수정 */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS 사용자 정의 속성 | 기본값 | 예시 | | ---------------------------- | ------ | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## 그림자 (음영) {#elevation} 일부 mdui 컴포넌트는 페이지에서의 입체감을 시뮬레이션하기 위해 그림자 효과를 가집니다. CSS 사용자 정의 속성을 수정하여 컴포넌트의 그림자 효과를 조정할 수 있습니다. 사용 예시는 다음과 같습니다: ```css /* level1 레벨의 그림자 수정 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* foo 요소의 그림자를 level1로 설정 */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS 사용자 정의 속성 | 기본값 | 예시 | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## 애니메이션 {#motion} mdui 컴포넌트의 애니메이션 타이밍 함수와 지속 시간은 CSS 사용자 정의 속성으로 구성할 수 있습니다. 사용 예시는 다음과 같습니다: ```css /* standard 타이밍 함수 및 short1 지속 시간 수정 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* foo 요소의 전환 효과를 standard 타이밍 함수와 short1 지속 시간으로 설정 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
타입 CSS 사용자 정의 속성 기본값
타이밍 함수 --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
지속 시간 --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## 반응형 브레이크포인트 {#breakpoint} mdui는 일련의 반응형 브레이크포인트를 제공하며, 이러한 브레이크포인트는 CSS 사용자 정의 속성으로 구성할 수 있습니다. 사용 예시는 다음과 같습니다: ```css /* sm 브레이크포인트 값 수정 */ :root { --mdui-breakpoint-sm: 560px; } ``` 이러한 CSS 사용자 정의 속성은 CSS 미디어 쿼리 내에서 사용할 수 없다는 점에 유의하세요. 다음은 잘못된 예시입니다: ```css /* 잘못된 사용법. 미디어 쿼리에서는 CSS 사용자 정의 속성을 사용할 수 없습니다 */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` JavaScript에서 브레이크포인트 판단이 필요한 경우 [`breakpoint`](/ko/docs/2/functions/breakpoint) 함수를 사용합니다. | CSS 사용자 정의 속성 | 기본값 | | ----------------------- | -------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # React와 통합하기 React에서 mdui를 사용할 때는 [설치](/ko/docs/2/getting-started/installation#npm) 페이지의 단계에 따라 설치를 완료하기만 하면 됩니다. ## 참고 사항 {#notes} React에서 mdui를 사용할 때는 몇 가지 제한 사항이 있습니다. 이러한 제한 사항은 React에서 Web Components를 사용할 때의 일반적인 제한 사항이며, mdui 컴포넌트 라이브러리 자체의 제한 사항은 아닙니다. ### 이벤트 바인딩 {#event-binding} React는 사용자 정의 이벤트를 지원하지 않으므로 mdui 컴포넌트가 제공하는 이벤트를 사용할 때는 먼저 `ref` 속성을 사용해 컴포넌트의 참조를 가져와야 합니다. 다음은 React에서 mdui 컴포넌트 이벤트를 사용하는 예시입니다: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('switch is toggled'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### JSX TypeScript 타입 선언 {#jsx-typescript} TypeScript 파일(.tsx)에서 mdui를 사용하는 경우 TypeScript 타입 선언을 추가해야 합니다. 프로젝트의 .d.ts 파일에 mdui의 타입 선언 파일을 수동으로 가져와야 합니다: ```ts /// ``` # Vue와 통합하기 Vue에서 mdui를 사용할 때는 먼저 [설치](/ko/docs/2/getting-started/installation#npm) 페이지의 지침에 따라 설치를 완료한 후 몇 가지 필요한 구성을 수행해야 합니다. ## 구성 {#configuration} Vue가 mdui 컴포넌트를 Vue 컴포넌트로 파싱하지 않도록 구성해야 합니다. `vite.config` 파일에서 `compilerOptions.isCustomElement` 옵션을 설정하면 됩니다: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // mdui-로 시작하는 모든 태그 이름은 mdui 컴포넌트입니다 isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` 이 구성에 대한 자세한 내용은 [Vue 공식 문서](https://ko.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue)를 참조하세요. ## 참고 사항 {#notes} ### 양방향 데이터 바인딩 {#data-binding} mdui 컴포넌트에서는 `v-model`을 사용하여 양방향 데이터 바인딩을 할 수 없습니다. 데이터 바인딩과 업데이트를 직접 처리해야 합니다. 예시: ```html ``` ### eslint 구성 {#eslint} [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue)를 사용하는 경우 `.eslintrc.js`에 다음 규칙을 추가해야 합니다: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Angular와 통합하기 Angular에서 mdui를 사용할 때는 먼저 [설치](/ko/docs/2/getting-started/installation#npm) 페이지의 지침에 따라 설치를 완료한 후 몇 가지 필요한 구성을 수행해야 합니다. ## 구성 {#configuration} 먼저 Angular에서 Web Components 지원을 활성화해야 합니다. 예시는 다음과 같습니다: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` 구성이 완료되면 Angular 컴포넌트 코드에서 mdui 컴포넌트를 가져와서 사용합니다: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Dialog Content
` }) export class DialogExampleComponent implements OnInit { // @ViewChild를 사용해 #dialog 요소의 참조를 가져옵니다 @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // nativeElement를 사용해 mdui 컴포넌트에 접근합니다 this.dialog?.nativeElement.open = true; } } ``` # 다른 프레임워크와 통합하기 mdui는 브라우저가 기본적으로 지원하는 Web Components로 개발되었으므로 모든 Web 프레임워크에서 사용할 수 있습니다. 아래에는 일반적인 프레임워크에서 mdui를 사용하는 방법이 나열되어 있습니다. ## Aurelia {#Aurelia} [설치](/ko/docs/2/getting-started/installation#npm) 페이지의 지침에 따라 설치를 완료한 후, 추가 패키지를 설치하고 구성해야 합니다(Aurelia 2에만 해당): ```bash npm install aurelia-mdui --save ``` 그런 다음 애플리케이션에 등록합니다: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **참고** 버그 보고는 [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui)로 보내주세요. ## WebCell {#WebCell} [WebCell](https://web-cell.dev/)에서 mdui를 사용할 때는 [설치](/ko/docs/2/getting-started/installation#npm) 페이지의 단계에 따라 설치를 완료하기만 하면 됩니다. Web Components, TypeScript 및 JSX 지원은 일급 기능이며 즉시 사용 가능합니다. 또는 [공식 GitHub 템플릿 저장소](https://github.com/EasyWebApp/WebCell-mobile)를 사용하여 [프로젝트를 한 번에 생성](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp)할 수 있습니다. # 아바타 컴포넌트 Avatar 아바타는 사용자나 사물을 나타내는 데 사용되며, 이미지, 아이콘, 문자 등 다양한 형태를 지원합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/avatar.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 이미지 아바타 {#example-src} `src` 속성을 사용해 이미지 URL을 아바타로 지정하거나, default 슬롯에 `` 요소를 제공하여 아바타로 사용합니다. ```html 이미지 아바타 예시 ``` `fit` 속성을 사용해 이미지가 컨테이너 상자에 맞는 방식을 정의할 수 있습니다. 이는 네이티브 [`object-fit`](https://developer.mozilla.org/ko/docs/Web/CSS/object-fit)과 유사합니다. ### 아이콘 아바타 {#example-icon} `icon` 속성을 사용해 Material Icons 아이콘을 아바타로 지정하거나, default 슬롯에 아이콘 요소를 제공하여 아바타로 사용합니다. ```html ``` ### 문자 아바타 {#example-char} default 슬롯에 임의의 텍스트를 사용해 아바타로 만들 수 있습니다. ```html A ``` ## mdui-avatar API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
src src true string

아바타 이미지의 URL입니다.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

이미지가 컨테이너에 맞춰지는 방식을 지정합니다. 네이티브 object-fit 속성과 동일합니다. 사용 가능한 값은 다음과 같습니다:

  • contain: 이미지의 원본 비율을 유지하며, 콘텐츠가 비율에 맞게 확대/축소됩니다.
  • cover: 이미지의 원본 비율을 유지하지만, 일부 콘텐츠가 잘릴 수 있습니다.
  • fill: 기본값, 이미지의 원본 비율을 유지하지 않고 콘텐츠가 늘어나 컨테이너 전체를 채웁니다.
  • none: 이미지의 원본 크기를 유지하며, 콘텐츠가 확대/축소되거나 늘어나지 않습니다.
  • scale-down: 이미지의 원본 비율을 유지하며, 콘텐츠 크기는 none 또는 contain 중 더 작은 것과 동일합니다.
icon icon true string

아바타의 Material Icons 아이콘 이름입니다.
label label true string

아바타의 대체 텍스트입니다.
### Slots
이름 설명
기본

아바타 콘텐츠를 사용자 정의합니다. 문자, 텍스트, <img> 요소, 아이콘 등이 될 수 있습니다.
### CSS Parts
이름 설명
image

이미지를 아바타로 사용할 때 컴포넌트 내부의 <img> 요소
icon

아이콘을 아바타로 사용할 때 컴포넌트 내부의 <mdui-icon> 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 배지 컴포넌트 Badge 배지는 개수나 상태 표시와 같은 동적 정보를 표시할 때 사용합니다. 텍스트나 숫자를 포함할 수 있습니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/badge.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` 사용 예시: ```html 12 ``` ## 예시 {#examples} ### 형태 {#example-variant} `variant` 속성을 사용해 배지의 형태를 설정합니다. `variant`가 `large`일 때는 대형 배지가 표시됩니다. default 슬롯에 표시할 텍스트를 지정할 수 있습니다. ```html 99+ ``` ## mdui-badge API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'small' | 'large' 'large'

배지의 모양입니다. 사용 가능한 값은 다음과 같습니다:

  • small: 작은 배지, 텍스트가 표시되지 않습니다.
  • large: 큰 배지, 텍스트가 표시됩니다.
### Slots
이름 설명
기본

배지에 표시되는 텍스트
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 하단 앱 바 컴포넌트 BottomAppBar 하단 앱 바는 주로 모바일 페이지 하단에 탐색 항목과 기타 중요한 작업을 표시할 때 사용합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/bottom-app-bar.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` 사용 예시: (예시의 `style="position: relative"`는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.) ```html
``` **주의 사항:** 이 컴포넌트는 기본적으로 `position: fixed` 위치 지정을 사용하며, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 `body`에 `padding-bottom` 스타일을 추가합니다. 하지만 다음 두 가지 경우에는 기본적으로 `position: absolute` 위치 지정을 사용합니다: 1. `scroll-target` 속성이 지정된 경우. 이 경우 `scroll-target` 요소에 `padding-bottom` 스타일이 추가됩니다. 2. [``](/ko/docs/2/components/layout) 컴포넌트 내에 위치한 경우. 이 경우 `padding-bottom` 스타일이 추가되지 않습니다. ## 예시 {#examples} ### 지정된 컨테이너 내에 위치시키기 {#example-scroll-target} 기본적으로 하단 앱 바는 현재 창을 기준으로 페이지 하단에 표시됩니다. 하단 앱 바를 지정된 컨테이너 안에 넣으려면 `scroll-target` 속성을 지정하면 됩니다. 값은 스크롤 가능한 내용의 컨테이너에 대한 CSS 선택자 또는 DOM 요소입니다. 이 경우 하단 앱 바는 부모 요소를 기준으로 표시됩니다(부모 요소에 `position: relative; overflow: hidden` 스타일을 직접 추가해야 합니다). ```html
Content
``` ### 스크롤 시 숨기기 {#example-scroll-behavior} `scroll-behavior` 속성을 `hide`로 설정하면 페이지를 아래로 스크롤할 때 하단 앱 바를 숨기고 위로 스크롤할 때 다시 표시할 수 있습니다. `scroll-threshold` 속성을 사용해 하단 앱 바 숨기기를 시작할 스크롤 픽셀 수를 설정할 수 있습니다. ```html
Content
``` ### 플로팅 액션 버튼 고정 {#example-fab-detach} 하단 앱 바에 [플로팅 액션 버튼](/ko/docs/2/components/fab)이 포함된 경우 `fab-detach` 속성을 추가하면 페이지가 스크롤되어 하단 앱 바가 숨겨질 때 플로팅 액션 버튼이 페이지 오른쪽 하단에 그대로 유지됩니다. ```html
``` ## mdui-bottom-app-bar API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
hide hide true boolean false

숨길지 여부를 설정합니다.
fab-detach fabDetach true boolean false

하단 앱 바 내의 <mdui-fab> 컴포넌트를 앱 바에서 분리할지 여부를 설정합니다. true인 경우, 앱 바가 숨겨져도 <mdui-fab>는 페이지에 그대로 남습니다.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

스크롤 동작을 지정합니다. 사용 가능한 값:

  • hide: 스크롤 시 숨깁니다.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

스크롤 이벤트를 감지할 요소입니다. CSS 선택자, DOM 요소 또는 JQ 객체를 지정할 수 있습니다. 기본적으로 window 객체의 스크롤 이벤트를 감지합니다.
scroll-threshold scrollThreshold true number

스크롤 동작을 트리거하는 데 필요한 스크롤 거리입니다. 단위는 px입니다.
order order true number

<mdui-layout> 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 0입니다.
### 이벤트
이름 설명
show

표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 표시를 막을 수 있습니다.
shown

표시 애니메이션이 완료되면 발생합니다.
hide

숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 숨김을 막을 수 있습니다.
hidden

숨김 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

하단 앱 바 내부의 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 버튼 컴포넌트 Button 버튼은 주로 이메일 보내기, 문서 공유, 게시물 좋아요 등의 작업을 실행할 때 사용합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/button.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Button } from 'mdui/components/button.js'; ``` 사용 예시: ```html Button ``` ## 예시 {#examples} ### 형태 {#example-variant} `variant` 속성을 사용해 버튼의 형태를 설정합니다. ```html Elevated Filled Tonal Outlined Text ``` ### 전체 너비 {#example-full-width} `full-width` 속성을 추가하면 버튼이 부모 요소의 전체 너비를 차지할 수 있습니다. ```html Button ``` ### 아이콘 {#example-icon} `icon`, `end-icon` 속성을 설정하면 버튼 왼쪽, 오른쪽에 각각 Material Icons 아이콘을 추가할 수 있습니다. `icon`, `end-icon` 슬롯을 통해 버튼 왼쪽, 오른쪽에 요소를 추가할 수도 있습니다. ```html Icon Slot ``` ### 링크 {#example-link} `href` 속성을 설정하면 버튼이 링크로 변경되며, 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html Link ``` ### 비활성화 및 로딩 상태 {#example-disabled} `disabled` 속성을 추가하면 버튼을 비활성화할 수 있습니다. `loading` 속성을 추가하면 버튼에 로딩 중 상태를 추가할 수 있습니다. ```html Disabled Loading Loading & Disabled ``` ## mdui-button API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

버튼의 모양입니다. 사용 가능한 값은 다음과 같습니다:

  • elevated: 그림자가 있는 버튼으로, 배경과 시각적으로 분리해야 할 때 적합합니다.
  • filled: 시각적 강조 효과가 높으며 "저장", "확인" 등 중요 프로세스의 최종 작업에 적합합니다.
  • tonal: filled와 outlined의 중간 정도 시각적 강조 효과를 가지며, 프로세스 중 "다음"과 같은 중간~높은 우선순위 작업에 적합합니다.
  • outlined: 테두리가 있는 버튼으로, "뒤로"와 같이 중간 우선순위이면서 보조적인 작업에 적합합니다.
  • text: 텍스트 버튼으로, 가장 낮은 우선순위 작업에 적합합니다.
full-width fullWidth true boolean false

부모 요소의 너비를 채울지 여부를 설정합니다.
icon icon true string

왼쪽의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
end-icon endIcon true string

오른쪽의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
loading loading true boolean false

로딩할지 여부를 설정합니다.
name name true string ''

버튼의 이름이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
value value true string ''

버튼의 초기값이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
type type true 'submit' | 'reset' | 'button' 'button'

버튼의 유형입니다. 기본 유형은 button입니다. 사용 가능한 유형은 다음과 같습니다:

  • submit: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다.
  • reset: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다.
  • button: 이 유형의 버튼은 기본 동작이 없습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
formaction formAction true string

폼을 제출할 URL을 지정합니다.

이 속성이 지정되면 <form> 요소의 action 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • application/x-www-form-urlencoded: 이 속성을 지정하지 않았을 때의 기본값
  • multipart/form-data: 폼에 <input type="file"> 요소가 포함된 경우 사용
  • text/plain: HTML5에서 새로 추가되었으며, 디버깅용입니다.

이 속성이 지정되면 <form> 요소의 enctype 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formmethod formMethod true 'post' | 'get'

폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • post: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다.
  • get: 폼 데이터가 ? 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다.

이 속성이 설정되면 <form> 요소의 method 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formnovalidate formNoValidate true boolean false

이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다.

이 속성을 설정하면 <form> 요소의 novalidate 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _self: 기본값, 현재 프레임에서 열기
  • _blank: 새 창에서 열기
  • _parent: 부모 프레임에서 열기
  • _top: 전체 창에서 열기

이 속성을 설정하면 <form> 요소의 target 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

버튼의 텍스트
icon

버튼 왼쪽의 요소
end-icon

버튼 오른쪽의 요소
### CSS Parts
이름 설명
button

내부의 <button> 또는 <a> 요소
label

버튼의 텍스트
icon

버튼 왼쪽의 아이콘
end-icon

버튼 오른쪽의 아이콘
loading

로딩 중 상태의 <mdui-circular-progress> 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 아이콘 버튼 컴포넌트 ButtonIcon 아이콘 버튼은 주로 부차적인 작업을 실행할 때 사용합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/button-icon.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 아이콘 {#example-icon} `icon` 속성을 사용해 Material Icons 아이콘 이름을 지정합니다. default 슬롯을 통해 아이콘 요소를 지정할 수도 있습니다. ```html ``` ### 형태 {#example-variant} `variant` 속성을 사용해 아이콘 버튼의 형태를 설정합니다. ```html ``` ### 선택 가능 {#example-selectable} `selectable` 속성을 추가하면 아이콘 버튼을 선택할 수 있습니다. ```html ``` `selected-icon` 속성을 사용해 선택 상태의 Material Icons 아이콘 이름을 지정합니다. `selected-icon` 슬롯을 통해 선택 상태의 아이콘 요소를 지정할 수도 있습니다. ```html ``` 아이콘 버튼이 선택되면 `selected` 속성이 `true`로 변경됩니다. `selected` 속성을 추가하여 아이콘 버튼이 기본적으로 선택된 상태가 되도록 할 수도 있습니다. ```html ``` ### 링크 {#example-link} `href` 속성을 추가하면 아이콘 버튼이 링크로 변경되며, 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html ``` ### 비활성화 및 로딩 상태 {#example-disabled} `disabled` 속성을 추가하면 아이콘 버튼을 비활성화할 수 있습니다. `loading` 속성을 추가하면 아이콘 버튼에 로딩 중 상태를 추가할 수 있습니다. ```html ``` ## mdui-button-icon API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

아이콘 버튼의 모양입니다. 사용 가능한 값은 다음과 같습니다:

  • standard: 가장 낮은 우선순위 작업에 적합합니다.
  • filled: 시각적 강조 효과가 높으며, 높은 우선순위 작업에 적합합니다.
  • tonal: filled와 outlined의 중간 정도 시각적 강조 효과를 가지며, 중간~높은 우선순위 작업에 적합합니다.
  • outlined: 중간 우선순위 작업에 적합합니다.
icon icon true string

Material Icons 아이콘 이름입니다. 기본 슬롯을 통해서도 설정할 수 있습니다.
selected-icon selectedIcon true string

선택됨 상태의 Material Icons 아이콘 이름입니다. slot="selected-icon"을 통해서도 설정할 수 있습니다.
selectable selectable true boolean false

선택 가능 여부를 설정합니다.
selected selected true boolean false

선택됨 여부를 설정합니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
loading loading true boolean false

로딩할지 여부를 설정합니다.
name name true string ''

버튼의 이름이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
value value true string ''

버튼의 초기값이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
type type true 'submit' | 'reset' | 'button' 'button'

버튼의 유형입니다. 기본 유형은 button입니다. 사용 가능한 유형은 다음과 같습니다:

  • submit: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다.
  • reset: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다.
  • button: 이 유형의 버튼은 기본 동작이 없습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
formaction formAction true string

폼을 제출할 URL을 지정합니다.

이 속성이 지정되면 <form> 요소의 action 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • application/x-www-form-urlencoded: 이 속성을 지정하지 않았을 때의 기본값
  • multipart/form-data: 폼에 <input type="file"> 요소가 포함된 경우 사용
  • text/plain: HTML5에서 새로 추가되었으며, 디버깅용입니다.

이 속성이 지정되면 <form> 요소의 enctype 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formmethod formMethod true 'post' | 'get'

폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • post: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다.
  • get: 폼 데이터가 ? 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다.

이 속성이 설정되면 <form> 요소의 method 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formnovalidate formNoValidate true boolean false

이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다.

이 속성을 설정하면 <form> 요소의 novalidate 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _self: 기본값, 현재 프레임에서 열기
  • _blank: 새 창에서 열기
  • _parent: 부모 프레임에서 열기
  • _top: 전체 창에서 열기

이 속성을 설정하면 <form> 요소의 target 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

선택 상태가 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

아이콘 컴포넌트
selected-icon

선택됨 상태에 표시되는 아이콘 요소
### CSS Parts
이름 설명
button

내부의 <button> 또는 <a> 요소
icon

선택되지 않은 상태의 아이콘
selected-icon

선택됨 상태의 아이콘
loading

로딩 중 상태의 <mdui-circular-progress> 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 카드 컴포넌트 Card 카드는 단일 주제와 관련된 콘텐츠 및 작업을 담는 다용도 컴포넌트입니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/card.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Card } from 'mdui/components/card.js'; ``` 사용 예시: ```html Card ``` ## 예시 {#examples} ### 형태 {#example-variant} `variant` 속성을 사용해 카드의 형태를 설정합니다. ```html ``` ### 클릭 가능 {#example-clickable} `clickable` 속성을 추가하면 카드를 클릭할 수 있게 되어 마우스 호버 효과와 클릭 물결 효과가 추가됩니다. ```html ``` ### 링크 {#example-link} `href` 속성을 추가하면 카드가 링크로 변경되며, 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 카드를 비활성화할 수 있습니다. ```html ``` ## mdui-card API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

카드의 모양입니다. 사용 가능한 값은 다음과 같습니다:

  • elevated: 그림자가 있는 카드로, 배경과의 시각적 분리도가 높습니다.
  • filled: 배경색이 채워진 카드로, 배경과의 시각적 분리도가 낮습니다.
  • outlined: 테두리가 있는 카드로, 배경과의 시각적 분리도가 가장 높습니다.
clickable clickable true boolean false

클릭 가능 여부를 설정합니다. true이면 카드에 마우스 호버 효과와 클릭 리플(ripple) 효과가 있습니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
### Slots
이름 설명
기본

카드의 콘텐츠
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 체크박스 컴포넌트 Checkbox 체크박스를 사용하면 사용자가 여러 옵션 중에서 하나 이상을 선택하거나 단일 옵션의 켜기/끄기 상태를 전환할 수 있습니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/checkbox.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` 사용 예시: ```html Checkbox ``` ## 예시 {#examples} ### 선택 상태 {#example-checked} 체크박스가 선택되면 `checked` 속성값이 `true`가 됩니다. `checked` 속성을 추가하면 체크박스가 기본적으로 선택된 상태가 되도록 할 수 있습니다. ```html Checkbox ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 체크박스를 비활성화할 수 있습니다. ```html Checkbox Checkbox ``` ### 불확정 상태 {#example-indeterminate} `indeterminate` 속성을 추가하면 체크박스가 불확정 상태임을 나타냅니다. ```html Checkbox ``` ### 아이콘 {#example-icon} `unchecked-icon`, `checked-icon`, `indeterminate-icon` 속성을 설정하여 각각 미선택, 선택, 불확정 상태일 때 체크박스의 Material Icons 아이콘을 지정할 수 있습니다. `unchecked-icon`, `checked-icon`, `indeterminate-icon` 슬롯을 통해서도 설정할 수 있습니다. ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
checked checked true boolean false

선택됨 여부를 설정합니다.
undefined defaultChecked false boolean false

기본 선택 상태입니다. 폼을 재설정할 때 이 상태로 복원됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
indeterminate indeterminate true boolean false

불확정(indeterminate) 상태 여부를 설정합니다.
required required true boolean false

폼 제출 시 이 체크박스가 필수인지 여부를 설정합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
name name true string ''

체크박스 이름이며, 폼 데이터와 함께 제출됩니다.
value value true string 'on'

체크박스의 값이며, 폼 데이터와 함께 제출됩니다.
unchecked-icon uncheckedIcon true string

선택되지 않은 상태의 Material Icons 아이콘 이름입니다. slot="unchecked-icon"을 통해서도 설정할 수 있습니다.
checked-icon checkedIcon true string

선택됨 상태의 Material Icons 아이콘 이름입니다. slot="checked-icon"을 통해서도 설정할 수 있습니다.
indeterminate-icon indeterminateIcon true string

불확정 상태의 Material Icons 아이콘 이름입니다. slot="indeterminate-icon"을 통해서도 설정할 수 있습니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

선택 상태가 변경될 때 발생합니다.
input

선택 상태가 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

체크박스 텍스트
unchecked-icon

선택되지 않은 상태의 아이콘
checked-icon

선택됨 상태의 아이콘
indeterminate-icon

불확정 상태의 아이콘
### CSS Parts
이름 설명
control

왼쪽 아이콘 컨테이너
unchecked-icon

선택되지 않은 상태의 아이콘
checked-icon

선택됨 상태의 아이콘
indeterminate-icon

불확정 상태의 아이콘
label

체크박스 텍스트
# 칩 컴포넌트 Chip 칩 컴포넌트는 사용자 정보 입력, 선택, 콘텐츠 필터링 또는 관련 작업 실행을 보조할 때 사용합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/chip.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` 사용 예시: ```html Chip ``` ## 예시 {#examples} ### 형태 {#example-variant} `variant` 속성을 사용해 칩의 형태를 설정합니다. 칩은 4가지 형태가 있으며 용도에 따라 선택할 수 있습니다: - `assist`: 현재 컨텍스트와 관련된 보조 작업을 표시할 때 사용합니다. 예를 들어 주문 페이지에서 공유, 즐겨찾기 등의 기능을 제공합니다. - `filter`: 콘텐츠를 필터링할 때 사용합니다. 예를 들어 검색 결과 페이지에서 검색 결과를 필터링합니다. - `input`: 사용자가 입력한 정보 조각을 나타내는 데 사용됩니다. 예를 들어 Gmail의 "받는 사람" 필드의 연락처입니다. - `suggestion`: 사용자 작업을 간소화하기 위해 동적으로 생성된 추천 정보를 제공할 때 사용합니다. 예를 들어 채팅 앱에서 사용자가 보낼 수 있는 메시지를 추측하여 선택할 수 있도록 제공합니다. ```html Assist Filter Input Suggestion ``` ### 그림자 {#example-elevated} `elevated` 속성을 추가하면 칩에 그림자가 생깁니다. ```html Chip ``` ### 아이콘 {#example-icon} `icon`, `end-icon` 속성을 추가하면 각각 칩 왼쪽, 오른쪽에 Material Icons 아이콘을 추가할 수 있습니다. `icon`, `end-icon` 슬롯을 통해 칩 왼쪽, 오른쪽에 요소를 추가할 수도 있습니다. ```html Icon End Icon Slot ``` ### 링크 {#example-link} `href` 속성을 추가하면 칩이 링크로 변경되며, 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html Link ``` ### 비활성화 및 로딩 중 상태 {#example-disabled} `disabled` 속성을 추가하면 칩을 비활성화할 수 있습니다. `loading` 속성을 추가하면 칩에 로딩 중 상태를 추가할 수 있습니다. ```html Disabled Loading Loading & Disabled ``` ### 선택 가능 {#example-selectable} `selectable` 속성을 추가하면 칩을 선택할 수 있습니다. ```html Chip ``` `selected-icon` 속성을 사용해 선택 상태의 Material Icons 아이콘 이름을 지정할 수 있습니다. `selected-icon` 슬롯을 통해 선택 상태의 아이콘 요소를 지정할 수도 있습니다. ```html Chip Chip ``` 칩이 선택되면 `selected` 속성이 `true`로 변경됩니다. `selected` 속성을 추가하여 칩이 기본적으로 선택된 상태가 되도록 할 수도 있습니다. ```html Chip ``` ### 삭제 가능 {#example-deletable} `deletable` 속성을 추가하면 칩 오른쪽에 삭제 아이콘이 나타납니다. 이 아이콘을 클릭하면 `delete` 이벤트가 트리거됩니다. `delete-icon` 속성으로 삭제 아이콘의 Material Icons 아이콘 이름을 지정하거나 `delete-icon` 슬롯을 통해 삭제 아이콘의 요소를 지정할 수 있습니다. ```html Chip Chip Chip ``` ## mdui-chip API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

칩의 모양입니다. 사용 가능한 값은 다음과 같습니다:

  • assist: 현재 컨텍스트와 관련된 보조 작업(예: 주문 페이지에서 공유, 즐겨찾기 등)을 표시하는 데 사용됩니다.
  • filter: 콘텐츠를 필터링하는 데 사용됩니다(예: 검색 결과 페이지에서 검색 결과 필터링).
  • input: 사용자가 입력한 정보 조각을 나타내는 데 사용됩니다(예: Gmail의 "받는 사람" 필드에 있는 연락처).
  • suggestion: 사용자 작업을 간소화하기 위해 동적으로 생성된 추천 정보를 제공하는 데 사용됩니다(예: 채팅 앱에서 사용자가 보낼 메시지 예측).
elevated elevated true boolean false

그림자를 표시할지 여부를 설정합니다.
selectable selectable true boolean false

선택 가능 여부를 설정합니다.
selected selected true boolean false

선택됨 여부를 설정합니다.
deletable deletable true boolean false

삭제 가능 여부를 설정합니다. true이면 칩 오른쪽에 삭제 아이콘이 표시됩니다.
icon icon true string

왼쪽의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
selected-icon selectedIcon true string

선택됨 상태일 때 왼쪽의 Material Icons 아이콘 이름입니다. slot="selected-icon"을 통해서도 설정할 수 있습니다.
end-icon endIcon true string

오른쪽의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
delete-icon deleteIcon true string

삭제 가능할 때 오른쪽 삭제 아이콘의 Material Icons 아이콘 이름입니다. slot="delete-icon"을 통해서도 설정할 수 있습니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
loading loading true boolean false

로딩할지 여부를 설정합니다.
name name true string ''

버튼의 이름이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
value value true string ''

버튼의 초기값이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
type type true 'submit' | 'reset' | 'button' 'button'

버튼의 유형입니다. 기본 유형은 button입니다. 사용 가능한 유형은 다음과 같습니다:

  • submit: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다.
  • reset: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다.
  • button: 이 유형의 버튼은 기본 동작이 없습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
formaction formAction true string

폼을 제출할 URL을 지정합니다.

이 속성이 지정되면 <form> 요소의 action 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • application/x-www-form-urlencoded: 이 속성을 지정하지 않았을 때의 기본값
  • multipart/form-data: 폼에 <input type="file"> 요소가 포함된 경우 사용
  • text/plain: HTML5에서 새로 추가되었으며, 디버깅용입니다.

이 속성이 지정되면 <form> 요소의 enctype 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formmethod formMethod true 'post' | 'get'

폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • post: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다.
  • get: 폼 데이터가 ? 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다.

이 속성이 설정되면 <form> 요소의 method 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formnovalidate formNoValidate true boolean false

이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다.

이 속성을 설정하면 <form> 요소의 novalidate 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _self: 기본값, 현재 프레임에서 열기
  • _blank: 새 창에서 열기
  • _parent: 부모 프레임에서 열기
  • _top: 전체 창에서 열기

이 속성을 설정하면 <form> 요소의 target 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
change

선택 상태가 변경될 때 발생합니다.
delete

삭제 아이콘을 클릭했을 때 발생합니다.
### Slots
이름 설명
기본

칩 텍스트
icon

왼쪽 요소
end-icon

오른쪽 요소
selected-icon

선택됨 상태의 왼쪽 요소
delete-icon

삭제 가능할 때 오른쪽 삭제 요소
### CSS Parts
이름 설명
button

내부의 <button> 또는 <a> 요소
label

칩 텍스트
icon

왼쪽 아이콘
end-icon

오른쪽 아이콘
selected-icon

선택됨 상태의 왼쪽 아이콘
delete-icon

삭제 가능할 때 오른쪽 삭제 아이콘
loading

로딩 중 상태의 <mdui-circular-progress> 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 원형 프로그레스 컴포넌트 CircularProgress 원형 프로그레스는 데이터 로딩이나 양식 제출과 같은 작업의 진행 상황을 표시하는 원형 컴포넌트입니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/circular-progress.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 고정 진행률 {#example-value} 원형 프로그레스는 기본적으로 불확정 진행률을 표시하며, `value` 속성으로 현재 진행률을 설정할 수 있습니다. 기본 최대 진행률은 `1`입니다. ```html ``` `max` 속성으로 진행률의 최대값을 설정할 수 있습니다. ```html ``` ## mdui-circular-progress API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
max max true number 1

프로그레스의 최대값입니다. 기본값은 1입니다.
value value false number

프로그레스의 현재 값입니다. 이 값이 지정되지 않으면 불확정 상태로 표시됩니다.
# 접기 패널 컴포넌트 Collapse 접기 패널 컴포넌트는 복잡한 콘텐츠 영역을 그룹화하고 숨겨 페이지를 깔끔하게 유지할 때 사용합니다. 접기 패널 컴포넌트 자체는 어떤 스타일도 포함하지 않으므로, 스타일을 직접 추가하거나 다른 컴포넌트와 함께 사용해야 합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` 사용 예시: ```html first content second content ``` ## 예시 {#examples} ### 패널 제목과 내용 {#example-header} `` 컴포넌트의 `header` 속성으로 패널 헤더의 텍스트를 설정할 수 있으며, `header` 슬롯을 통해 패널 헤더 요소를 지정할 수도 있습니다. 컴포넌트의 default 슬롯은 패널 내용에 사용됩니다. ```html Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### 아코디언 모드 {#example-accordion} `` 컴포넌트에 `accordion` 속성을 추가하면 아코디언 모드를 활성화하여 한 번에 하나의 패널만 열린 상태를 유지할 수 있습니다. ```html Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### 활성화된 패널 설정 {#example-value} `` 컴포넌트의 `value` 속성으로 현재 열려 있는 패널을 가져오거나 열 패널을 설정할 수 있습니다. 아코디언 모드에서는 `value` 속성값이 문자열입니다. HTML 속성 또는 JavaScript 속성을 사용해 이 속성을 조작할 수 있습니다. 비아코디언 모드에서는 `value` 속성값이 배열이며, 이 경우 JavaScript 속성으로서만 조작할 수 있습니다. ```html 아코디언 모드 Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
비아코디언 모드 Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### 비활성화 상태 {#example-disabled} `` 컴포넌트에 `disabled` 속성을 추가하면 전체 접기 패널 그룹을 비활성화할 수 있습니다. 마찬가지로 `` 컴포넌트에 `disabled` 속성을 추가하면 특정 접기 패널을 비활성화할 수 있습니다. ```html 전체 비활성화 Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
첫 번째 패널 비활성화 Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### 접기 트리거 요소 {#example-trigger} 기본적으로 패널 헤더 영역 전체를 클릭하면 접기가 트리거됩니다. `` 컴포넌트의 `trigger` 속성을 설정하여 접기를 트리거할 요소를 지정할 수 있습니다. `trigger` 속성은 CSS 선택자 또는 DOM 요소가 될 수 있습니다. ```html Item 1
Item 1 - subitem
``` ## mdui-collapse-item API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value true string

이 접기 항목의 값입니다.
header header true string

이 접기 항목의 헤더 텍스트입니다.
disabled disabled true boolean false

이 접기 항목을 비활성화할지 여부를 설정합니다.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

이 요소를 클릭하면 접힙니다. 값은 CSS 선택자, DOM 요소 또는 JQ 객체가 될 수 있습니다. 기본값은 전체 헤더 영역을 클릭할 때 트리거됩니다.
### 이벤트
이름 설명
open

열림이 시작될 때 발생합니다.
opened

열림 애니메이션이 완료되면 발생합니다.
close

닫힘이 시작될 때 발생합니다.
closed

닫힘 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

접기 항목의 본문 콘텐츠
header

접기 항목의 헤더 콘텐츠
### CSS Parts
이름 설명
header

접기의 헤더 콘텐츠
body

접기의 본문 콘텐츠
## mdui-collapse API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
accordion accordion true boolean false

아코디언 모드를 활성화할지 여부를 설정합니다.
value value false string | string[]

현재 펼쳐진 <mdui-collapse-item>의 값입니다.

참고: 이 프로퍼티의 HTML 속성 값은 항상 문자열이며, accordion이 true인 경우에만 HTML 속성을 통해 초기값을 설정할 수 있습니다. 이 프로퍼티의 JavaScript 프로퍼티 값은 accordion이 true일 때는 문자열, accordion이 false일 때는 문자열 배열입니다. 따라서 accordion이 false일 때는 JavaScript 프로퍼티를 통해서만 이 값을 변경할 수 있습니다.
disabled disabled true boolean false

이 접기를 비활성화할지 여부를 설정합니다.
### 이벤트
이름 설명
change

현재 펼쳐진 접기 항목이 변경될 때 발생합니다.
### Slots
이름 설명
기본

<mdui-collapse-item> 컴포넌트
# 대화상자 컴포넌트 Dialog 대화상자는 사용자 작업 흐름 중에 중요한 알림을 제공할 때 사용합니다. 컴포넌트를 직접 사용하는 것 외에도 mdui는 네 가지 함수([`mdui.dialog`](/ko/docs/2/functions/dialog), [`mdui.alert`](/ko/docs/2/functions/alert), [`mdui.confirm`](/ko/docs/2/functions/confirm), [`mdui.prompt`](/ko/docs/2/functions/prompt))를 제공합니다. 이러한 함수는 Dialog 컴포넌트 사용을 간소화할 수 있습니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/dialog.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` 사용 예시: ```html Dialog 닫기 대화상자 열기 ``` ## 예시 {#examples} ### 오버레이 클릭 시 닫기 {#example-close-on-overlay-click} `close-on-overlay-click` 속성을 추가하면 오버레이 레이어를 클릭할 때 대화상자가 닫힙니다. ```html Dialog 대화상자 열기 ``` ### ESC 키 누를 시 닫기 {#example-close-on-esc} `close-on-esc` 속성을 추가하면 ESC 키를 누를 때 대화상자가 닫힙니다. ```html Dialog 대화상자 열기 ``` ### 전체 화면 {#example-fullscreen} `fullscreen` 속성을 추가하면 대화상자가 전체 화면으로 표시됩니다. ```html Dialog 닫기 대화상자 열기 ``` ### 아이콘 {#example-icon} `icon` 속성을 설정하면 대화상자 상단에 Material Icons 아이콘이 추가됩니다. ```html Dialog 대화상자 열기 ``` `icon` 슬롯을 통해 대화상자 상단에 아이콘 요소를 추가할 수도 있습니다. ```html Dialog 대화상자 열기 ``` ### 제목과 설명 {#example-headline} `headline` 및 `description` 속성으로 대화상자의 제목과 설명을 설정합니다. ```html 대화상자 열기 ``` `headline` 및 `description` 슬롯을 통해 대화상자의 제목 요소와 설명 요소를 설정할 수도 있습니다. ```html Delete selected images? Images will be permanently removed from your account and all synced devices. 대화상자 열기 ``` ### 하단 작업 버튼 {#example-action} `action` 슬롯을 통해 하단 작업 버튼을 추가할 수 있습니다. ```html 취소 삭제 대화상자 열기 ``` `stacked-actions` 속성을 추가하면 하단 작업 버튼을 세로로 배치합니다. ```html Turn on speed boost No thanks 대화상자 열기 ``` ### 상단 내용 {#example-header} `header` 슬롯을 통해 대화상자 상단 내용을 설정할 수 있습니다. ```html Title Save
대화상자 열기 ``` ## mdui-dialog API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
icon icon true string

상단의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
headline headline true string

제목입니다. slot="headline"을 통해서도 설정할 수 있습니다.
description description true string

제목 아래의 텍스트입니다. slot="description"을 통해서도 설정할 수 있습니다.
open open true boolean false

다이얼로그를 열지 여부를 설정합니다.
fullscreen fullscreen true boolean false

다이얼로그를 전체 화면으로 표시할지 여부를 설정합니다.
close-on-esc closeOnEsc true boolean false

ESC 키를 눌러 다이얼로그를 닫을 수 있는지 여부를 설정합니다.
close-on-overlay-click closeOnOverlayClick true boolean false

오버레이를 클릭하여 다이얼로그를 닫을 수 있는지 여부를 설정합니다.
stacked-actions stackedActions true boolean false

하단 작업 버튼을 수직으로 정렬할지 여부를 설정합니다.
### 이벤트
이름 설명
open

다이얼로그 열림이 시작될 때 발생합니다. event.preventDefault()를 호출하여 다이얼로그 열림을 막을 수 있습니다.
opened

다이얼로그 열림 애니메이션이 완료되면 발생합니다.
close

다이얼로그 닫힘이 시작될 때 발생합니다. event.preventDefault()를 호출하여 다이얼로그 닫힘을 막을 수 있습니다.
closed

다이얼로그 닫힘 애니메이션이 완료되면 발생합니다.
overlay-click

오버레이를 클릭할 때 발생합니다.
### Slots
이름 설명
header

상단 요소로, 기본적으로 icon slot과 headline slot을 포함합니다.
icon

상단 아이콘
headline

상단 제목
description

제목 아래의 텍스트
기본

다이얼로그 본문 콘텐츠
action

하단 작업 표시줄의 요소
### CSS Parts
이름 설명
overlay

오버레이
panel

다이얼로그 컨테이너
header

다이얼로그 header 부분으로, icon과 headline을 포함합니다.
icon

상단 아이콘, header 내에 위치합니다.
headline

상단 제목, header 내에 위치합니다.
body

다이얼로그 body 부분
description

보조 텍스트 부분, body 내에 위치합니다.
action

하단 작업 버튼
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 구분선 컴포넌트 Divider 구분선은 목록 및 컨테이너 내에서 콘텐츠를 그룹화하는 데 사용되는 얇은 선입니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/divider.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 수직 구분선 {#example-vertical} `vertical` 속성을 추가하면 구분선이 수직으로 표시됩니다. ```html
``` ### 왼쪽 들여쓰기 {#example-inset} `inset` 속성을 추가하면 구분선 왼쪽에 들여쓰기가 적용됩니다. 이는 주로 목록에서 구분선을 왼쪽 텍스트에 맞추는 데 사용됩니다. ```html Item 1 Item 2 ``` ### 양쪽 들여쓰기 {#example-middle} `middle` 속성을 추가하면 구분선 양쪽에 들여쓰기가 적용됩니다. ```html Item 1 Item 2 ``` ## mdui-divider API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
vertical vertical true boolean false

수직 구분선으로 표시할지 여부를 설정합니다.
inset inset true boolean false

왼쪽 들여쓰기를 적용할지 여부를 설정합니다.
middle middle true boolean false

양쪽 들여쓰기를 적용할지 여부를 설정합니다.
# 드롭다운 컴포넌트 Dropdown 드롭다운 컴포넌트는 팝업되는 컨트롤에 특정 콘텐츠를 표시하는 데 사용되며, 일반적으로 메뉴 컴포넌트와 함께 사용됩니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/dropdown.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` 사용 예시: ```html open dropdown Item 1 Item 2 ``` ## 예시 {#examples} ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 드롭다운 컴포넌트를 비활성화할 수 있습니다. ```html open dropdown Item 1 Item 2 ``` ### 열림 위치 {#example-placement} `placement` 속성을 사용해 드롭다운 컴포넌트의 열림 위치를 설정할 수 있습니다. ```html open dropdown Item 1 Item 2 ``` ### 트리거 방식 {#example-trigger} `trigger` 속성을 사용해 드롭다운 컴포넌트의 트리거 방식을 설정할 수 있습니다. ```html open dropdown Item 1 Item 2 ``` ### 커서 위치에서 열기 {#example-open-on-pointer} `open-on-pointer` 속성을 추가하면 커서 위치에서 드롭다운 컴포넌트가 열립니다. 일반적으로 `trigger="contextmenu"`와 함께 사용하여 마우스 오른쪽 버튼으로 메뉴를 엽니다. ```html 이 영역에서 마우스 오른쪽 버튼을 사용해 메뉴 열기 Item 1 Item 2 ``` ### 메뉴 열린 상태 유지 {#example-stay-open-on-click} 드롭다운에서 메뉴를 사용할 때 기본적으로 메뉴 항목을 클릭하면 드롭다운 컴포넌트가 자동으로 닫힙니다. `stay-open-on-click` 속성을 추가하면 메뉴 항목 클릭 시 드롭다운 컴포넌트의 열린 상태를 유지할 수 있습니다. ```html open dropdown Item 1 Item 2 ``` ### 열기/닫기 지연 시간 {#example-delay} `trigger="hover"`로 설정된 경우 `open-delay`, `close-delay` 속성으로 열기 및 닫기 지연 시간을 설정할 수 있습니다. ```html open dropdown Item 1 Item 2 ``` ## mdui-dropdown API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
open open true boolean false

드롭다운을 열지 여부를 설정합니다.
disabled disabled true boolean false

드롭다운을 비활성화할지 여부를 설정합니다.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

드롭다운의 트리거 방식입니다. 여러 값을 공백으로 구분하여 지정할 수 있습니다. 사용 가능한 값:

  • click: 클릭 시 트리거
  • hover: 마우스 호버 시 트리거
  • focus: 포커스 시 트리거
  • contextmenu: 마우스 오른쪽 버튼 클릭 또는 터치 길게 누르기 시 트리거
  • manual: 프로그래밍 방식으로만 드롭다운을 열고 닫을 수 있습니다. 다른 트리거 방식을 함께 지정할 수 없습니다.
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

드롭다운 콘텐츠의 위치입니다. 사용 가능한 값:

  • auto: 위치 자동 판단
  • top-start: 상단 왼쪽 정렬
  • top: 상단 중앙 정렬
  • top-end: 상단 오른쪽 정렬
  • bottom-start: 하단 왼쪽 정렬
  • bottom: 하단 중앙 정렬
  • bottom-end: 하단 오른쪽 정렬
  • left-start: 왼쪽 상단 정렬
  • left: 왼쪽 중앙 정렬
  • left-end: 왼쪽 하단 정렬
  • right-start: 오른쪽 상단 정렬
  • right: 오른쪽 중앙 정렬
  • right-end: 오른쪽 하단 정렬
stay-open-on-click stayOpenOnClick true boolean false

<mdui-menu-item> 클릭 후 드롭다운이 열린 상태를 유지할지 여부를 설정합니다.
open-delay openDelay true number 150

마우스 호버로 드롭다운이 열리는 지연 시간(밀리초)입니다.
close-delay closeDelay true number 150

마우스 호버로 드롭다운이 닫히는 지연 시간(밀리초)입니다.
open-on-pointer openOnPointer true boolean false

드롭다운을 트리거한 커서 위치에서 드롭다운을 열지 여부를 설정합니다. 주로 마우스 오른쪽 버튼 메뉴를 열 때 사용합니다.
### 이벤트
이름 설명
open

드롭다운 열림이 시작될 때 발생합니다. event.preventDefault()를 호출하여 드롭다운 열림을 막을 수 있습니다.
opened

드롭다운 열림 애니메이션이 완료되면 발생합니다.
close

드롭다운 닫힘이 시작될 때 발생합니다. event.preventDefault()를 호출하여 드롭다운 닫힘을 막을 수 있습니다.
closed

드롭다운 닫힘 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

드롭다운의 콘텐츠
trigger

드롭다운을 트리거하는 요소입니다. 예: <mdui-button> 요소
### CSS Parts
이름 설명
trigger

드롭다운을 트리거하는 요소의 컨테이너, 즉 trigger slot의 컨테이너입니다.
panel

드롭다운 콘텐츠의 컨테이너
### CSS 사용자 정의 속성
이름 설명
--z-index

컴포넌트의 CSS z-index 값
# 플로팅 액션 버튼 컴포넌트 Fab 플로팅 액션 버튼(FAB)은 페이지의 주요 작업을 강조하는 데 사용되며, 주요 작업을 쉽게 접근할 수 있는 위치에 배치합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/fab.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 아이콘 {#example-icon} `icon` 속성을 사용해 Material Icons 아이콘 이름을 지정합니다. `icon` 슬롯을 통해 아이콘 요소를 지정할 수도 있습니다. ```html ``` ### 확장 상태 {#example-extended} `extended` 속성을 추가하면 FAB를 확장 상태로 설정할 수 있으며, 이때 default 슬롯의 텍스트가 표시됩니다. ```html Compose ``` ### 형태 {#example-variant} `variant` 속성을 사용해 FAB의 형태를 설정할 수 있습니다. ```html ``` ### 크기 {#example-size} `size` 속성을 사용해 FAB의 크기를 설정할 수 있습니다. ```html ``` ### 링크 {#example-link} `href` 속성을 추가하면 FAB에 링크 기능이 생기며, 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html ``` ### 비활성화 및 로딩 중 상태 {#example-disabled} `disabled` 속성을 추가하면 FAB를 비활성화할 수 있습니다. `loading` 속성을 추가하면 FAB에 로딩 중 상태를 추가할 수 있습니다. ```html ``` ## mdui-fab API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

FAB의 모양입니다. 이 컴포넌트의 다른 모양 간에는 색상만 다릅니다. 사용 가능한 값:

  • primary: Primary container 배경색 사용
  • surface: Surface container high 배경색 사용
  • secondary: Secondary container 배경색 사용
  • tertiary: Tertiary container 배경색 사용
size size true 'normal' | 'small' | 'large' 'normal'

FAB의 크기입니다. 사용 가능한 값:

  • normal: 일반 크기 FAB
  • small: 작은 크기 FAB
  • large: 큰 크기 FAB
icon icon true string

Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
extended extended true boolean false

확장할지 여부를 설정합니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
loading loading true boolean false

로딩할지 여부를 설정합니다.
name name true string ''

버튼의 이름이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
value value true string ''

버튼의 초기값이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
type type true 'submit' | 'reset' | 'button' 'button'

버튼의 유형입니다. 기본 유형은 button입니다. 사용 가능한 유형은 다음과 같습니다:

  • submit: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다.
  • reset: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다.
  • button: 이 유형의 버튼은 기본 동작이 없습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
formaction formAction true string

폼을 제출할 URL을 지정합니다.

이 속성이 지정되면 <form> 요소의 action 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • application/x-www-form-urlencoded: 이 속성을 지정하지 않았을 때의 기본값
  • multipart/form-data: 폼에 <input type="file"> 요소가 포함된 경우 사용
  • text/plain: HTML5에서 새로 추가되었으며, 디버깅용입니다.

이 속성이 지정되면 <form> 요소의 enctype 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formmethod formMethod true 'post' | 'get'

폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • post: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다.
  • get: 폼 데이터가 ? 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다.

이 속성이 설정되면 <form> 요소의 method 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formnovalidate formNoValidate true boolean false

이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다.

이 속성을 설정하면 <form> 요소의 novalidate 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _self: 기본값, 현재 프레임에서 열기
  • _blank: 새 창에서 열기
  • _parent: 부모 프레임에서 열기
  • _top: 전체 창에서 열기

이 속성을 설정하면 <form> 요소의 target 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

텍스트
icon

아이콘
### CSS Parts
이름 설명
button

내부의 <button> 또는 <a> 요소
label

오른쪽 텍스트
icon

왼쪽 아이콘
loading

로딩 중 상태의 <mdui-circular-progress> 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner-small

size="small"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--shape-corner-normal

size="normal"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--shape-corner-large

size="large"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 아이콘 컴포넌트 Icon 아이콘은 일반적인 작업을 나타내는 데 사용됩니다. Material Icons 아이콘과 SVG 아이콘 사용을 지원합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/icon.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` 사용 예시: ```html ``` ### Material Icons 아이콘 사용하기 {#usage-material-icons} 이 컴포넌트를 통해 Material Icons 아이콘을 사용하려면 Material Icons의 CSS 파일을 별도로 가져와야 합니다. Material Icons는 총 5가지 변형(Filled, Outlined, Rounded, Sharp, Two Tone)이 있으므로, 사용하려는 아이콘 변형에 해당하는 CSS 파일을 가져오세요: ```html ``` 컴포넌트 사용 시 `name` 속성에 아이콘 이름을 전달하고 아이콘 변형 이름을 접미사로 붙입니다(Filled 변형은 접미사 불필요). 아래는 `delete` 아이콘의 5가지 변형 사용 방식입니다: ```html ``` 페이지 하단의 [Material Icons 아이콘 검색](/ko/docs/2/components/icon#search) 도구에서 아이콘을 직접 검색하고, 사용하려는 아이콘을 클릭하면 아이콘 코드가 자동으로 클립보드에 복사됩니다. 또한 mdui는 별도의 패키지 [`@mdui/icons`](/ko/docs/2/libraries/icons)를 제공합니다. 이 패키지의 각 아이콘 컴포넌트는 독립적인 파일로 구성되어 있어, 전체 아이콘 라이브러리를 가져올 필요 없이 필요한 아이콘 컴포넌트만 가져와서 사용합니다. ### SVG 아이콘 사용하기 {#usage-svg} 이 컴포넌트는 SVG 아이콘을 아이콘 내용으로 사용하는 것도 지원합니다. 컴포넌트의 `src` 속성으로 SVG 아이콘 링크를 전달할 수 있습니다. 예시: ```html ``` 컴포넌트의 default 슬롯에 SVG 내용을 전달할 수도 있습니다. 예시: ```html ``` ## 예시 {#examples} ### 색상 설정 {#example-color} `` 요소나 부모 요소의 `color` CSS 스타일을 설정하여 아이콘 색상을 변경합니다. ```html ``` ### 크기 설정 {#example-size} `` 요소나 부모 요소의 `font-size` CSS 스타일을 설정하여 아이콘 크기를 변경합니다. ```html ``` ## mdui-icon API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
name name true string

Material Icons 아이콘 이름입니다.
src src true string

svg 아이콘의 경로입니다.
### Slots
이름 설명
기본

svg 아이콘의 콘텐츠
# 레이아웃 컴포넌트 Layout 레이아웃 컴포넌트는 복잡한 페이지 레이아웃을 생성하기 위한 유연한 레이아웃 시스템을 제공합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **소개:** 레이아웃 시스템은 바깥쪽에서 안쪽으로 구축되는 원칙을 따릅니다. 각 레이아웃 컴포넌트(`` 컴포넌트)는 네 방향(위, 아래, 왼쪽, 오른쪽) 중 하나의 위치에 공간을 차지하며, 이후의 레이아웃 컴포넌트는 나머지 공간에서 계속해서 공간을 차지합니다. 다음 컴포넌트들은 `` 컴포넌트를 직접 상속받으므로 레이아웃 컴포넌트로도 사용합니다: - [``](/ko/docs/2/components/navigation-bar) - [``](/ko/docs/2/components/navigation-drawer) - [``](/ko/docs/2/components/navigation-rail) - [``](/ko/docs/2/components/bottom-app-bar) - [``](/ko/docs/2/components/top-app-bar) 레이아웃 시스템의 마지막 부분은 `` 컴포넌트로, 나머지 공간을 차지하며, 이 컴포넌트 내부에 페이지 콘텐츠를 배치할 수 있습니다. ## 예시 {#examples} ### 레이아웃 컴포넌트 순서 {#layout-default-order} 기본적으로 레이아웃 컴포넌트는 코드에 나타나는 순서대로 공간을 차지합니다. 아래 두 예시를 통해 이 개념을 이해할 수 있습니다. 두 예시에서 [``](/ko/docs/2/components/top-app-bar)와 [``](/ko/docs/2/components/navigation-drawer)의 코드 순서가 다릅니다.

대형 디스플레이에서 이 예시를 확인하세요.

```html Top App Bar Navigation drawer Main ``` ```html Navigation drawer Top App Bar Main ``` [``](/ko/docs/2/components/top-app-bar)를 [``](/ko/docs/2/components/navigation-drawer) 앞에 배치하면 [``](/ko/docs/2/components/top-app-bar)가 먼저 화면 너비를 가득 채우고, [``](/ko/docs/2/components/navigation-drawer)는 나머지 공간에서 높이를 가득 채웁니다. 둘의 순서를 바꾸면 [``](/ko/docs/2/components/navigation-drawer)가 먼저 화면 높이를 가득 채우고, [``](/ko/docs/2/components/top-app-bar)는 나머지 공간에서 너비를 가득 채웁니다. ### 레이아웃 컴포넌트 위치 {#example-placement} `` 컴포넌트의 경우 `placement` 속성을 사용해 레이아웃 내에서의 위, 아래, 왼쪽, 오른쪽 위치를 지정할 수 있습니다. [``](/ko/docs/2/components/navigation-drawer) 및 [``](/ko/docs/2/components/navigation-rail) 컴포넌트의 경우에도 `placement` 속성을 사용해 레이아웃 내에서의 왼쪽, 오른쪽 위치를 지정할 수 있습니다. 아래 예시에서는 두 개의 `` 컴포넌트를 앱의 양쪽에 배치했습니다. ```html Top App Bar Layout Item Layout Item Main ``` ### 레이아웃 컴포넌트 순서 사용자 정의 {#example-order} 대부분의 경우 레이아웃 컴포넌트를 순서대로 배치하는 것만으로 원하는 레이아웃을 구현할 수 있습니다. `order` 속성을 사용해 레이아웃 순서를 지정할 수도 있습니다. 시스템은 `order` 값이 작은 순서대로 컴포넌트를 정렬하며, `order`가 같을 경우 코드 순서대로 정렬합니다. 모든 레이아웃 컴포넌트의 기본 `order`는 `0`입니다. ```html Layout Item Top App Bar
order="-1" Main ``` ## mdui-layout-item API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

컴포넌트의 위치입니다. 사용 가능한 값:

  • top: 위쪽
  • bottom: 아래쪽
  • left: 왼쪽
  • right: 오른쪽
order order true number

<mdui-layout> 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 0입니다.
### Slots
이름 설명
기본

모든 콘텐츠를 포함할 수 있습니다.
## mdui-layout-main API ### Slots
이름 설명
기본

모든 콘텐츠를 포함할 수 있습니다.
## mdui-layout API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
full-height fullHeight true boolean false

현재 레이아웃의 높이를 100%로 설정합니다.
### Slots
이름 설명
기본

<mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main> 요소를 포함할 수 있습니다.
# 선형 프로그레스 컴포넌트 LinearProgress 선형 프로그레스는 데이터 로딩이나 양식 제출과 같은 작업의 진행 상황을 사용자에게 표시하는 수평형 인디케이터입니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/linear-progress.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 진행률 설정 {#example-value} 선형 프로그레스는 기본적으로 불확정 진행률을 표시하며, `value` 속성으로 현재 진행률을 설정할 수 있습니다. 기본 최대 진행률은 `1`입니다. ```html ``` `max` 속성으로 진행률의 최대값을 설정할 수도 있습니다. ```html ``` ## mdui-linear-progress API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
max max true number 1

프로그레스의 최대값입니다. 기본값은 1입니다.
value value false number

프로그레스의 현재 값입니다. 이 값이 지정되지 않으면 불확정 상태가 됩니다.
### CSS Parts
이름 설명
indicator

표시기 부분
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 목록 컴포넌트 List 목록은 텍스트나 이미지를 표시하는 세로 방향의 인덱스로, 사용자가 관련 정보를 빠르게 찾아보고 접근할 수 있도록 합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` 사용 예시: ```html Subheader Item 1 Item 2 ``` ## 예시 {#examples} ### 텍스트 내용 {#example-text} `` 컴포넌트에 `headline` 속성을 설정하면 목록 항목의 기본 텍스트를, `description` 속성을 설정하면 부 텍스트를 지정할 수 있습니다. ```html ``` default 슬롯을 통해 기본 텍스트를, `description` 슬롯을 통해 부 텍스트를 지정할 수도 있습니다. ```html Headline Headline Supporting text ``` 기본적으로 기본 텍스트와 부 텍스트는 길이에 관계없이 모두 표시됩니다. `headline-line` 및 `description-line` 속성을 설정하여 기본 텍스트와 부 텍스트에 행 수 제한을 추가할 수 있으며, 최대 3행까지 제한할 수 있습니다. ```html Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text ``` ### 양쪽 내용 {#example-side} `` 컴포넌트에 `icon` 및 `end-icon` 속성을 설정하면 목록 항목의 왼쪽과 오른쪽에 Material Icons 아이콘을 추가할 수 있습니다. ```html Headline ``` `icon` 및 `end-icon` 슬롯을 통해 목록 항목의 왼쪽과 오른쪽에 요소를 추가할 수도 있습니다. ```html Headline ``` ### 링크 {#example-link} `href` 속성을 설정하면 목록 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html Headline ``` ### 비활성화 상태 {#example-disabled} `` 컴포넌트에 `disabled` 속성을 추가하면 해당 목록 항목을 비활성화할 수 있습니다. 이때 목록 항목 내의 체크박스, 라디오, 스위치 등의 컴포넌트도 함께 비활성화됩니다. ```html Headline Headline ``` ### 활성화 상태 {#example-active} `` 컴포넌트에 `active` 속성을 추가하면 해당 목록 항목을 활성화할 수 있습니다. ```html Headline Headline ``` ### 클릭 불가 상태 {#example-nonclickable} `` 컴포넌트에 `nonclickable` 속성을 추가하면 목록 항목에서 마우스 호버 및 클릭 물결 효과를 제거할 수 있습니다. ```html Headline Headline ``` ### 둥근 모서리 형태 {#example-rounded} `` 컴포넌트에 `rounded` 속성을 추가하면 해당 목록 항목이 둥근 모서리 형태로 표시됩니다. ```html Headline Headline ``` ### 수직 정렬 방식 {#example-alignment} `` 컴포넌트에 `alignment` 속성을 설정하면 목록 항목 좌우 요소와 목록 항목의 정렬 방식을 조정할 수 있습니다. 가능한 값은 다음과 같습니다: - `start`: 상단 정렬 - `center`: 중앙 정렬 - `end`: 하단 정렬 ```html Headline Headline Headline ``` ### 사용자 정의 내용 {#example-custom} `` 컴포넌트에서 `custom` 슬롯을 사용하면 목록 항목의 내용을 완전히 사용자 정의할 수 있습니다. ```html
test
 ``` ## mdui-list-item API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
headline headline true string

주요 텍스트입니다. 기본 슬롯을 통해서도 설정할 수 있습니다.
headline-line headlineLine true 1 | 2 | 3

주요 텍스트 줄 수로, 제한을 초과하면 잘라서 표시합니다. 기본값은 줄 수 제한 없음입니다. 사용 가능한 값:

  • 1: 한 줄로 표시, 초과 시 잘라냄
  • 2: 두 줄로 표시, 초과 시 잘라냄
  • 3: 세 줄로 표시, 초과 시 잘라냄
description description true string

보조 텍스트입니다. slot="description"을 통해서도 설정할 수 있습니다.
description-line descriptionLine true 1 | 2 | 3

보조 텍스트 줄 수로, 제한을 초과하면 잘라서 표시합니다. 기본값은 줄 수 제한 없음입니다. 사용 가능한 값:

  • 1: 한 줄로 표시, 초과 시 잘라냄
  • 2: 두 줄로 표시, 초과 시 잘라냄
  • 3: 세 줄로 표시, 초과 시 잘라냄
icon icon true string

왼쪽의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
end-icon endIcon true string

오른쪽의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
disabled disabled true boolean false

해당 목록 항목을 비활성화할지 여부를 설정합니다. 비활성화되면 목록 항목이 회색으로 변하고, 그 안의 <mdui-checkbox>, <mdui-radio>, <mdui-switch> 등도 비활성화됩니다.
active active true boolean false

해당 목록 항목을 활성화할지 여부를 설정합니다.
nonclickable nonclickable true boolean false

목록 항목을 클릭 불가능하게 할지 여부를 설정합니다. 설정하면 목록 항목 내의 <mdui-checkbox>, <mdui-radio>, <mdui-switch> 등은 여전히 상호 작용할 수 있습니다.
rounded rounded true boolean false

둥근 모서리 모양의 목록 항목을 사용할지 여부를 설정합니다.
alignment alignment true 'start' | 'center' | 'end' 'center'

목록 항목의 수직 정렬 방식입니다. 사용 가능한 값:

  • start: 상단 정렬
  • center: 중앙 정렬
  • end: 하단 정렬
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
### Slots
이름 설명
기본

주요 텍스트
description

보조 텍스트
icon

목록 항목 왼쪽의 요소
end-icon

목록 항목 오른쪽의 요소
custom

임의의 사용자 정의 콘텐츠
### CSS Parts
이름 설명
container

목록 항목 컨테이너
icon

왼쪽 아이콘
end-icon

오른쪽 아이콘
body

중간 부분
headline

주요 제목
description

보조 제목
### CSS 사용자 정의 속성
이름 설명
--shape-corner

목록 항목의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--shape-corner-rounded

rounded 속성이 지정되었을 때 목록 항목의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
## mdui-list-subheader API ### Slots
이름 설명
기본

목록 소제목 텍스트
## mdui-list API ### Slots
이름 설명
기본

<mdui-list-item> 요소
# 메뉴 컴포넌트 Menu 메뉴 컴포넌트는 세로로 배열된 옵션 집합을 제공합니다. 사용자가 버튼이나 다른 컨트롤과 상호 작용할 때 메뉴가 표시됩니다. 드롭다운 메뉴를 구현해야 하는 경우 [``](/ko/docs/2/components/dropdown) 컴포넌트와 함께 사용합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` 사용 예시: ```html Item 1 Item 2 ``` ## 예시 {#examples} ### 드롭다운 메뉴 {#example-dropdown} [``](/ko/docs/2/components/dropdown) 컴포넌트와 함께 사용하여 드롭다운 메뉴를 구현합니다. ```html open dropdown Item 1 Item 2 ``` ### 컴팩트 레이아웃 {#example-dense} `` 컴포넌트에 `dense` 속성을 추가하면 컴팩트 레이아웃을 구현할 수 있습니다. ```html Item 1 Item 2 Item 3 ``` ### 메뉴 항목 비활성화 {#example-disabled} `` 컴포넌트에 `disabled` 속성을 추가하면 메뉴 항목을 비활성화할 수 있습니다. ```html Item 1 Item 2 Item 3 ``` ### 단일 선택 지원 {#example-selects-single} `` 컴포넌트에 `selects` 속성을 `single`로 지정하면 단일 선택 기능을 구현할 수 있습니다. 이때 ``의 `value` 값은 현재 선택된 ``의 `value` 값입니다. ```html Item 1 Item 2 ``` ### 다중 선택 지원 {#example-selects-multiple} `` 컴포넌트에 `selects` 속성을 `multiple`로 지정하면 다중 선택 기능을 구현할 수 있습니다. 이때 ``의 `value` 값은 현재 선택된 ``의 `value` 값으로 구성된 배열입니다. 참고: 다중 선택 모드에서는 ``의 `value` 값이 배열이므로 JavaScript 속성으로서만 값을 읽고 설정할 수 있습니다. ```html Item 1 Item 2 Item 3 ``` ### 아이콘 {#example-icon} `` 컴포넌트에서 `icon` 및 `end-icon` 속성을 설정하면 메뉴 항목의 왼쪽과 오른쪽에 각각 Material Icons 아이콘을 추가할 수 있습니다. `end-text` 속성을 설정하면 오른쪽에 텍스트를 추가할 수 있습니다. 또한 `icon`, `end-icon`, `end-text` 슬롯을 통해 메뉴 항목의 왼쪽과 오른쪽에 아이콘과 텍스트를 추가할 수 있습니다. 다른 메뉴 항목과의 정렬을 유지하기 위해 메뉴 항목 왼쪽에 아이콘 공간을 비워 두려면 `icon` 속성을 빈 문자열로 설정하면 됩니다. ```html Item 1 Item 2 Ctrl+X Item 3 ``` 단일 선택 또는 다중 선택 모드에서는 `selected-icon` 속성 또는 `selected-icon` 슬롯을 통해 선택 상태의 아이콘을 설정할 수 있습니다. ```html Item 1 Item 2 ``` ### 링크 {#example-link} `` 컴포넌트에 `href` 속성을 설정하면 메뉴 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html Item 1 Item 2 ``` ### 하위 메뉴 {#example-submenu} `` 컴포넌트에서 `submenu` 슬롯을 사용해 하위 메뉴 항목의 요소를 지정할 수 있습니다. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` `` 컴포넌트에서 `submenu-trigger` 속성으로 하위 메뉴의 트리거 방식을 설정할 수 있습니다. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` `submenu-trigger` 속성이 `hover`로 설정된 경우 `` 컴포넌트에서 `submenu-open-delay` 및 `submenu-close-delay` 속성으로 하위 메뉴의 열기 지연 시간과 닫기 지연 시간을 설정할 수 있습니다. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` ### 사용자 정의 내용 {#example-custom} `` 컴포넌트에서 `custom` 슬롯을 사용하면 메뉴 항목의 내용을 완전히 사용자 정의할 수 있습니다. ```html
ABS
숫자의 절대값을 반환합니다
ACOS
숫자의 아크코사인 값을 라디안 단위로 반환합니다
ACOSH
숫자의 하이퍼볼릭 아크코사인 값을 반환합니다
 ``` ## mdui-menu-item API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value true string

메뉴 항목의 값입니다.
disabled disabled true boolean false

메뉴 항목을 비활성화할지 여부를 설정합니다.
icon icon true string

왼쪽의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.

왼쪽에 아이콘을 표시할 필요는 없지만 아이콘 위치를 확보해야 하는 경우 빈 문자열을 전달하여 자리를 채울 수 있습니다.
end-icon endIcon true string

오른쪽의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
end-text endText true string

오른쪽의 텍스트입니다. slot="end-text"을 통해서도 설정할 수 있습니다.
selected-icon selectedIcon true string

선택됨 상태의 Material Icons 아이콘 이름입니다. slot="selected-icon"을 통해서도 설정할 수 있습니다.
submenu-open submenuOpen true boolean false

하위 메뉴를 열지 여부를 설정합니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
submenu-open

하위 메뉴 열림이 시작될 때 발생합니다. event.preventDefault()를 호출하여 하위 메뉴 열림을 막을 수 있습니다.
submenu-opened

하위 메뉴 열림 애니메이션이 완료되면 발생합니다.
submenu-close

하위 메뉴 닫힘이 시작될 때 발생합니다. event.preventDefault()를 호출하여 하위 메뉴 닫힘을 막을 수 있습니다.
submenu-closed

하위 메뉴 닫힘 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

메뉴 항목의 텍스트
icon

메뉴 항목 왼쪽 아이콘
end-icon

메뉴 항목 오른쪽 아이콘
end-text

메뉴 오른쪽의 텍스트
selected-icon

선택됨 상태의 아이콘
submenu

하위 메뉴
custom

임의의 사용자 정의 콘텐츠
### CSS Parts
이름 설명
container

메뉴 항목의 컨테이너
icon

왼쪽 아이콘
label

텍스트 콘텐츠
end-icon

오른쪽 아이콘
end-text

오른쪽 텍스트
selected-icon

선택됨 상태의 아이콘
submenu

하위 메뉴 요소
## mdui-menu API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
selects selects true 'single' | 'multiple'

메뉴 항목의 선택 가능 상태입니다. 기본값은 선택 불가입니다. 사용 가능한 값:

  • single: 단일 선택
  • multiple: 다중 선택
value value false string | string[]

현재 선택된 <mdui-menu-item>의 값입니다.

참고: 이 프로퍼티의 HTML 속성 값은 항상 문자열이며, selects="single"일 때만 HTML 속성을 통해 초기값을 설정할 수 있습니다. 이 프로퍼티의 JavaScript 프로퍼티 값은 selects="single"일 때는 문자열, selects="multiple"일 때는 문자열 배열입니다. 따라서 selects="multiple"일 때는 JavaScript 프로퍼티를 통해서만 이 값을 수정할 수 있습니다.
dense dense true boolean false

메뉴 항목에 간격이 좁은 레이아웃을 사용할지 여부를 설정합니다.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

하위 메뉴의 트리거 방식입니다. 여러 값을 공백으로 구분하여 지정할 수 있습니다. 사용 가능한 값:

  • click: 메뉴 항목 클릭 시 하위 메뉴 열기
  • hover: 메뉴 항목에 마우스 호버 시 하위 메뉴 열기
  • focus: 메뉴 항목에 포커스 시 하위 메뉴 열기
  • manual: 프로그래밍 방식으로만 하위 메뉴를 열고 닫을 수 있습니다. 다른 트리거 방식을 함께 지정할 수 없습니다.
submenu-open-delay submenuOpenDelay true number 200

마우스 호버로 하위 메뉴가 열리는 지연 시간(밀리초)입니다.
submenu-close-delay submenuCloseDelay true number 200

마우스 호버로 하위 메뉴가 닫히는 지연 시간(밀리초)입니다.
### 메서드
이름 설명
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
change

메뉴 항목 선택 상태가 변경될 때 발생합니다.
### Slots
이름 설명
기본

하위 메뉴 항목(<mdui-menu-item>), 구분선(<mdui-divider>) 등의 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 하단 내비게이션 바 컴포넌트 NavigationBar 내비게이션 바는 모바일 페이지에서 몇 개의 주요 페이지 간을 쉽게 전환할 때 사용합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` 사용 예시: (예시의 `style="position: relative"`는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.) ```html Item 1 Item 2 Item 3 ``` **주의 사항:** 이 컴포넌트는 기본적으로 `position: fixed` 위치 지정을 사용하며, 페이지 내용이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 `body`에 `padding-bottom` 스타일을 추가합니다. 하지만 다음 두 가지 경우에는 기본적으로 `position: absolute` 위치 지정을 사용합니다: 1. `scroll-target` 속성이 지정된 경우. 이 경우 `scroll-target` 요소에 `padding-bottom` 스타일이 추가됩니다. 2. 컴포넌트가 [``](/ko/docs/2/components/layout) 내에 위치한 경우. 이 경우 `padding-bottom` 스타일이 추가되지 않습니다. ## 예시 {#examples} ### 텍스트 레이블 표시 상태 {#example-label-visibility} 내비게이션 바의 텍스트 레이블은 기본적으로 내비게이션 항목이 3개 이하일 때 항상 표시되고, 내비게이션 항목이 3개를 초과하면 선택된 상태의 텍스트만 표시됩니다. ```html Item 1 Item 2 Item 3
Item 1 Item 2 Item 3 Item 4 ``` `` 컴포넌트에 `label-visibility` 속성을 설정하여 텍스트 레이블의 표시 상태를 조정할 수 있습니다. 가능한 값은 다음과 같습니다: - `selected`: 선택된 상태의 텍스트만 표시 - `labeled`: 항상 텍스트 표시 - `unlabeled`: 항상 텍스트 표시 안 함 ```html Item 1 Item 2 Item 3 selected labeled unlabeled ``` ### 지정된 컨테이너 내에 위치시키기 {#example-scroll-target} 기본적으로 내비게이션 바는 현재 창을 기준으로 페이지 하단에 표시됩니다. 내비게이션 바를 지정된 컨테이너 안에 넣으려면 `` 컴포넌트에 `scroll-target` 속성을 지정하면 됩니다. 이 속성의 값은 스크롤 가능한 내용의 컨테이너에 대한 CSS 선택자 또는 DOM 요소입니다. 이 경우 내비게이션 바는 부모 요소를 기준으로 표시됩니다(부모 요소에 `position: relative; overflow: hidden` 스타일을 직접 추가해야 합니다). ```html
Item 1 Item 2 Item 3
페이지 내용
``` ### 스크롤 시 숨기기 {#example-scroll-behavior} `` 컴포넌트에 `scroll-behavior` 속성을 `hide`로 설정하면 페이지를 아래로 스크롤할 때 내비게이션 바를 숨기고 위로 스크롤할 때 다시 표시할 수 있습니다. `scroll-threshold` 속성을 사용해 내비게이션 바 숨기기를 시작할 스크롤 픽셀 수를 설정할 수 있습니다. ```html
Item 1 Item 2 Item 3
페이지 내용
``` ### 아이콘 {#example-icon} `` 컴포넌트에서 `icon` 속성은 비활성화 상태의 내비게이션 항목 아이콘을 설정하고, `active-icon` 속성은 활성화 상태의 내비게이션 항목 아이콘을 설정할 때 사용합니다. `icon` 및 `active-icon` 슬롯을 통해 비활성화 및 활성화 상태의 아이콘 요소를 설정할 수도 있습니다. ```html Item 1 Item 2 ``` ### 링크 {#example-link} `` 컴포넌트에 `href` 속성을 설정하면 내비게이션 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html Item 1 Item 2 ``` ### 배지 {#example-badge} `` 컴포넌트에서 `badge` 슬롯을 통해 배지를 추가할 수 있습니다. ```html Item 1 99+ Item 2 ``` ## mdui-navigation-bar-item API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
icon icon true string

비활성 상태의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
active-icon activeIcon true string

활성 상태의 Material Icons 아이콘 이름입니다. slot="active-icon"을 통해서도 설정할 수 있습니다.
value value true string

내비게이션 항목의 값입니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
### Slots
이름 설명
기본

내비게이션 항목 텍스트
icon

아이콘
active-icon

활성 상태의 아이콘 요소
badge

배지
### CSS Parts
이름 설명
container

내비게이션 항목 컨테이너
indicator

표시기
badge

배지
icon

아이콘
active-icon

활성 상태의 아이콘
label

내비게이션 항목 텍스트
### CSS 사용자 정의 속성
이름 설명
--shape-corner-indicator

표시기의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
## mdui-navigation-bar API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
hide hide true boolean false

숨길지 여부를 설정합니다.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

텍스트의 표시 상태입니다. 사용 가능한 값:

  • auto: 옵션이 3개 이하일 때는 항상 텍스트를 표시하고, 옵션이 3개를 초과할 때는 선택된 상태의 텍스트만 표시합니다.
  • selected: 선택된 상태에서만 텍스트를 표시합니다.
  • labeled: 항상 텍스트를 표시합니다.
  • unlabeled: 항상 텍스트를 표시하지 않습니다.
value value true string

현재 선택된 <mdui-navigation-bar-item>의 값입니다.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

스크롤 동작을 지정합니다. 사용 가능한 값:

  • hide: 스크롤 시 숨깁니다.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

스크롤 이벤트를 감지할 요소입니다. CSS 선택자, DOM 요소 또는 JQ 객체를 지정할 수 있습니다. 기본적으로 window 객체의 스크롤 이벤트를 감지합니다.
scroll-threshold scrollThreshold true number

스크롤 동작을 트리거하는 데 필요한 스크롤 거리입니다. 단위는 px입니다.
order order true number

<mdui-layout> 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 0입니다.
### 이벤트
이름 설명
change

값이 변경될 때 발생합니다.
show

표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 표시를 막을 수 있습니다.
shown

표시 애니메이션이 완료되면 발생합니다.
hide

숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 숨김을 막을 수 있습니다.
hidden

숨김 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

<mdui-navigation-bar-item> 컴포넌트
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 내비게이션 드로어 컴포넌트 NavigationDrawer 내비게이션 드로어는 페이지 측면에 탐색 기능을 제공하여 사용자가 다양한 페이지나 콘텐츠에 빠르게 접근할 수 있도록 합니다. 일반적으로 내비게이션 드로어 내에서 [``](/ko/docs/2/components/list) 컴포넌트를 사용해 탐색 항목을 추가할 수 있습니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/navigation-drawer.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` 사용 예시: ```html 내비게이션 드로어 닫기 내비게이션 드로어 열기 ``` **주의 사항:** 이 컴포넌트는 기본적으로 `position: fixed` 위치 지정을 사용합니다. `modal` 속성이 `false`이고 브레이크포인트가 [`--mdui-breakpoint-md`](/ko/docs/2/styles/design-tokens#breakpoint) 이상일 때, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 `body`에 `padding-left` 또는 `padding-right` 스타일을 추가합니다. 하지만 다음 두 가지 경우에는 기본적으로 `position: absolute` 위치 지정을 사용합니다: 1. `contained` 속성이 `true`인 경우. 2. 컴포넌트가 [``](/ko/docs/2/components/layout) 내에 위치한 경우. 이 경우 `padding-left` 또는 `padding-right` 스타일이 추가되지 않습니다. ## 예시 {#examples} ### 지정된 컨테이너 내에 위치시키기 {#example-contained} 기본적으로 내비게이션 드로어는 현재 창을 기준으로 페이지 왼쪽 또는 오른쪽에 표시됩니다. 내비게이션 드로어를 지정된 컨테이너 안에 넣으려면 `contained` 속성을 추가합니다. 이 경우 내비게이션 드로어는 부모 요소를 기준으로 표시됩니다(부모 요소에 `position: relative; overflow: hidden;` 스타일을 직접 추가해야 합니다). ```html
내비게이션 드로어 닫기
내비게이션 드로어 열기
``` ### 모달 방식 {#example-modal} `modal` 속성을 추가하면 내비게이션 드로어를 열 때 오버레이 레이어가 표시됩니다. 창이나 부모 요소의 너비가 [`--mdui-breakpoint-md`](/ko/docs/2/styles/design-tokens#breakpoint) 미만일 때는 이 매개변수와 관계없이 항상 오버레이 레이어가 표시됩니다. `close-on-esc` 속성을 추가하면 ESC 키를 누를 때 내비게이션 드로어가 닫힙니다. `close-on-overlay-click` 속성을 추가하면 오버레이 레이어를 클릭할 때 내비게이션 드로어가 닫힙니다. ```html
내비게이션 드로어 닫기
내비게이션 드로어 열기
``` ### 오른쪽에 위치시키기 {#example-placement} `placement` 속성을 `right`로 설정하면 내비게이션 드로어를 페이지 오른쪽에 표시할 수 있습니다. ```html
내비게이션 드로어 닫기
내비게이션 드로어 열기
``` ## mdui-navigation-drawer API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
open open true boolean false

내비게이션 드로어를 열지 여부를 설정합니다.
modal modal true boolean false

내비게이션 드로어가 열릴 때 오버레이를 표시할지 여부를 설정합니다.

좁은 화면 기기(화면 너비가 --mdui-breakpoint-md 미만)에서는 이 매개변수와 관계없이 항상 오버레이가 표시됩니다.
close-on-esc closeOnEsc true boolean false

오버레이가 있는 경우 ESC 키를 눌러 내비게이션 드로어를 닫을지 여부를 설정합니다.
close-on-overlay-click closeOnOverlayClick true boolean false

오버레이 클릭 시 내비게이션 드로어를 닫을지 여부를 설정합니다.
placement placement true 'left' | 'right' 'left'

내비게이션 드로어의 위치입니다. 사용 가능한 값:

  • left: 왼쪽
  • right: 오른쪽
contained contained true boolean false

기본적으로 내비게이션 드로어는 body 요소를 기준으로 표시됩니다. 이 속성이 true로 설정되면 내비게이션 드로어는 상위 요소를 기준으로 표시됩니다.

참고: 이 속성을 설정할 때는 상위 요소에 position: relative; overflow: hidden; 스타일을 수동으로 설정해야 합니다.
order order true number

<mdui-layout> 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 0입니다.
### 이벤트
이름 설명
open

내비게이션 드로어가 열리기 전에 발생합니다. event.preventDefault()를 호출하여 내비게이션 드로어 열림을 막을 수 있습니다.
opened

내비게이션 드로어 열림 애니메이션이 완료되면 발생합니다.
close

내비게이션 드로어가 닫히기 전에 발생합니다. event.preventDefault()를 호출하여 내비게이션 드로어 닫힘을 막을 수 있습니다.
closed

내비게이션 드로어 닫힘 애니메이션이 완료되면 발생합니다.
overlay-click

오버레이를 클릭할 때 발생합니다.
### Slots
이름 설명
기본

내비게이션 드로어의 콘텐츠
### CSS Parts
이름 설명
overlay

오버레이
panel

내비게이션 드로어 컨테이너
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 측면 내비게이션 레일 컴포넌트 NavigationRail 측면 내비게이션 레일은 태블릿 및 데스크톱 컴퓨터에서 다른 주요 페이지에 접근할 수 있는 방법을 제공합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` 사용 예시: (예시의 `style="position: relative"`는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.) ```html Recent Images Library ``` **주의 사항:** 이 컴포넌트는 기본적으로 `position: fixed` 위치 지정을 사용하며, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 `body`에 `padding-left` 또는 `padding-right` 스타일을 추가합니다. 하지만 다음 두 가지 경우에는 기본적으로 `position: absolute` 위치 지정을 사용합니다: 1. `` 컴포넌트의 `contained` 속성이 `true`인 경우. 이 경우 부모 요소에 `padding-left` 또는 `padding-right` 스타일이 추가됩니다. 2. [``](/ko/docs/2/components/layout) 컴포넌트 내에 위치한 경우. 이 경우 `padding-left` 또는 `padding-right` 스타일이 추가되지 않습니다. ## 예시 {#examples} ### 지정된 컨테이너 내에 위치시키기 {#example-contained} 기본적으로 측면 내비게이션 레일은 현재 창을 기준으로 페이지 왼쪽 또는 오른쪽에 표시됩니다. 측면 내비게이션 레일을 지정된 컨테이너 안에 넣으려면 `` 컴포넌트에 `contained` 속성을 추가합니다. 이 경우 측면 내비게이션 레일은 부모 요소를 기준으로 표시됩니다(부모 요소에 `position: relative` 스타일을 직접 추가해야 합니다). ```html
Recent Images Library
페이지 내용
``` ### 오른쪽에 위치시키기 {#example-placement} `` 컴포넌트에 `placement` 속성을 `right`로 설정하면 측면 내비게이션 레일을 오른쪽에 표시할 수 있습니다. ```html
Recent Images Library
페이지 내용
``` ### 구분선 표시 {#example-divider} `` 컴포넌트에 `divider` 속성을 추가하면 측면 내비게이션 레일에 구분선을 추가하여 페이지 내용과 구분할 수 있습니다. ```html
Recent Images Library
페이지 내용
``` ### 상단/하단에 요소 추가 {#example-top-bottom} `` 컴포넌트 내에서 `top`, `bottom` 슬롯을 통해 상단과 하단에 요소를 추가할 수 있습니다. ```html
Recent Images Library
페이지 내용
``` ### 내비게이션 항목 수직 정렬 방식 {#example-alignment} `` 컴포넌트의 `alignment` 속성을 설정하여 내비게이션 항목의 수직 정렬 방식을 변경할 수 있습니다. ```html
Recent Images Library
start center end
``` ### 아이콘 {#example-icon} `` 컴포넌트에서 `icon` 속성을 사용해 비활성화 상태의 내비게이션 항목 아이콘을 설정하고, `active-icon` 속성을 사용해 활성화 상태의 내비게이션 항목 아이콘을 설정할 수 있습니다. `icon` 및 `active-icon` 슬롯을 사용해 비활성화 및 활성화 상태의 아이콘 요소를 설정할 수도 있습니다. ```html
Recent Images Library
페이지 내용
``` ### 아이콘만 사용 {#example-no-label} `` 컴포넌트는 텍스트 없이 아이콘만 사용합니다. ```html
페이지 내용
``` ### 링크 {#example-link} `` 컴포넌트에 `href` 속성을 설정하면 내비게이션 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html
Recent Images Library
페이지 내용
``` ### 배지 {#example-badge} `` 컴포넌트에서 `badge` 슬롯을 통해 배지를 추가할 수 있습니다. ```html
Recent 99+ Images Library
페이지 내용
``` ## mdui-navigation-rail-item API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
icon icon true string

비활성 상태의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
active-icon activeIcon true string

활성 상태의 Material Icons 아이콘 이름입니다. slot="active-icon"을 통해서도 설정할 수 있습니다.
value value true string

내비게이션 항목의 값입니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
### Slots
이름 설명
기본

텍스트 콘텐츠
icon

아이콘
active-icon

활성 상태의 아이콘
badge

배지
### CSS Parts
이름 설명
container

내비게이션 항목 컨테이너
indicator

표시기
badge

배지
icon

아이콘
active-icon

활성 상태의 아이콘
label

텍스트 콘텐츠
### CSS 사용자 정의 속성
이름 설명
--shape-corner-indicator

표시기의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
## mdui-navigation-rail API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value true string

현재 선택된 <mdui-navigation-rail-item>의 값입니다.
placement placement true 'left' | 'right' 'left'

내비게이션의 위치입니다. 사용 가능한 값:

  • left: 왼쪽
  • right: 오른쪽
alignment alignment true 'start' | 'center' | 'end' 'start'

<mdui-navigation-rail-item> 요소의 정렬 방식입니다. 사용 가능한 값:

  • start: 상단 정렬
  • center: 중앙 정렬
  • end: 하단 정렬
contained contained true boolean false

기본적으로 내비게이션은 body 요소를 기준으로 표시됩니다. 이 속성이 true로 설정되면 내비게이션은 상위 요소를 기준으로 표시됩니다.

참고: 이 속성을 설정할 때는 상위 요소에 position: relative; 스타일을 수동으로 설정해야 합니다.
divider divider true boolean false

내비게이션과 페이지 콘텐츠 사이에 구분선을 추가할지 여부를 설정합니다.
order order true number

<mdui-layout> 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 0입니다.
### 이벤트
이름 설명
change

값이 변경될 때 발생합니다.
### Slots
이름 설명
기본

<mdui-navigation-rail-item> 컴포넌트
top

상단의 요소
bottom

하단의 요소
### CSS Parts
이름 설명
top

상단 요소의 컨테이너
bottom

하단 요소의 컨테이너
items

<mdui-navigation-rail-item> 컴포넌트의 컨테이너
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 라디오 컴포넌트 Radio 라디오는 사용자가 옵션 그룹 중에서 하나를 선택할 수 있도록하며, 한 번에 하나의 옵션만 선택되도록합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` 사용 예시: ```html Chinese English ``` ## 예시 {#examples} ### 선택 상태 {#example-checked} `` 컴포넌트의 `value` 속성값은 현재 선택된 `` 컴포넌트의 `value` 속성값입니다. `` 컴포넌트의 `value` 속성값을 업데이트하여 현재 선택된 라디오를 전환할 수도 있습니다. ```html Chinese English ``` `` 컴포넌트를 단독으로 사용할 수 있으며, 이때는 `checked` 속성으로 선택 상태를 읽고 수정할 수 있습니다. ```html Radio ``` ### 비활성화 상태 {#example-disabled} `` 컴포넌트에 `disabled` 속성을 추가하면 전체 라디오 그룹을 비활성화할 수 있습니다. ```html Chinese English ``` 특정 라디오를 비활성화하려면 `` 컴포넌트에 `disabled` 속성을 추가합니다. ```html Chinese English ``` ### 아이콘 {#example-icon} `unchecked-icon` 및 `checked-icon` 속성을 설정하여 각각 미선택 및 선택 상태일 때 라디오의 Material Icons 아이콘을 지정할 수 있습니다. `unchecked-icon` 및 `checked-icon` 슬롯을 통해서도 설정할 수 있습니다. ```html Chinese English ``` ## mdui-radio-group API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
disabled disabled true boolean false

이 컴포넌트를 비활성화할지 여부를 설정합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
name name true string ''

라디오 그룹의 이름이며, 폼 데이터와 함께 제출됩니다.
value value true string ''

라디오 그룹에서 현재 선택된 값이며, 폼 데이터와 함께 제출됩니다.
undefined defaultValue false string ''

기본 선택 값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
required required true boolean false

폼 제출 시 라디오 중 하나를 반드시 선택해야 하는지 여부를 설정합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
change

선택된 값이 변경될 때 발생합니다.
input

선택된 값이 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

<mdui-radio> 요소
## mdui-radio API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value true string ''

현재 라디오의 값입니다.
disabled disabled true boolean false

현재 라디오를 비활성화할지 여부를 설정합니다.
checked checked true boolean false

현재 라디오가 선택되었는지 여부를 설정합니다.
unchecked-icon uncheckedIcon true string

선택되지 않은 상태의 Material Icons 아이콘 이름입니다. slot="unchecked-icon"을 통해서도 설정할 수 있습니다.
checked-icon checkedIcon true string

선택됨 상태의 Material Icons 아이콘 이름입니다. slot="checked-icon"을 통해서도 설정할 수 있습니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

해당 라디오를 선택할 때 발생합니다.
### Slots
이름 설명
기본

텍스트 콘텐츠
unchecked-icon

선택되지 않은 상태의 아이콘
checked-icon

선택됨 상태의 아이콘
### CSS Parts
이름 설명
control

왼쪽 아이콘 컨테이너
unchecked-icon

선택되지 않은 상태의 아이콘
checked-icon

선택됨 상태의 아이콘
label

텍스트 콘텐츠
# 범위 슬라이더 컴포넌트 RangeSlider 범위 슬라이더 컴포넌트는 사용자가 일련의 값 중에서 범위를 선택할 수 있도록 합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/range-slider.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 기본값 {#example-value} `value` 속성으로 범위 슬라이더의 현재 값을 읽거나 설정할 수 있습니다. 이 속성값은 배열이며, JavaScript 속성으로서만 읽고 설정할 수 있습니다. ```html ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 범위 슬라이더를 비활성화할 수 있습니다. ```html ``` ### 범위 {#example-min-max} `min` 및 `max` 속성을 사용해 범위 슬라이더의 최소값과 최대값을 설정합니다. ```html ``` ### 단계 간격 {#example-step} `step` 속성을 사용해 범위 슬라이더의 단계 간격을 설정합니다. ```html ``` ### 눈금 표시 {#example-tickmarks} `tickmarks` 속성을 추가하면 범위 슬라이더에 눈금을 표시할 수 있습니다. ```html ``` ### 텍스트 힌트 숨기기 {#example-nolabel} `nolabel` 속성을 추가하면 범위 슬라이더의 텍스트 힌트를 숨길 수 있습니다. ```html ``` ### 텍스트 힌트 수정 {#example-labelFormatter} `labelFormatter` JavaScript 속성으로 텍스트 힌트의 표시 형식을 수정할 수 있습니다. 이 속성값은 함수이며, 함수의 매개변수는 현재 범위 슬라이더의 값이고, 반환값은 표시하려는 텍스트입니다. ```html ``` ## mdui-range-slider API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
undefined defaultValue false number[] []

기본값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
undefined value false number[]

슬라이더의 값으로, 배열 형식이며 폼 데이터와 함께 제출됩니다.

참고: 이 프로퍼티는 HTML 속성으로 초기값을 설정할 수 없습니다. 이 값을 수정하려면 JavaScript 프로퍼티 값을 통해서만 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
min min true number 0

슬라이더의 최솟값입니다. 기본값은 0입니다.
max max true number 100

슬라이더의 최댓값입니다. 기본값은 100입니다.
step step true number 1

증분 간격입니다. 기본값은 1입니다.
tickmarks tickmarks true boolean false

눈금 표시를 추가할지 여부를 지정합니다.
nolabel nolabel true boolean false

텍스트 힌트를 숨길지 여부를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
name name true string ''

슬라이더의 이름이며, 폼 데이터와 함께 제출됩니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
undefined labelFormatter false (value: number) => string

레이블의 표시 형식을 사용자 정의하는 함수입니다. 함수의 인자는 슬라이더의 현재 값이며, 반환값은 표시할 텍스트입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

값이 변경되고 포커스를 잃으면 발생합니다.
input

값이 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### CSS Parts
이름 설명
track-inactive

비활성 상태 트랙
track-active

활성 상태 트랙
handle

핸들
label

힌트 텍스트
tickmark

눈금 표시
# 셀렉트 컴포넌트 Select 드롭다운 셀렉트 컴포넌트는 드롭다운 메뉴에 다양한 옵션을 제공하여 사용자가 필요한 내용을 빠르게 선택할 수 있도록 합니다. 이 페이지는 주로 `` 컴포넌트의 사용법을 소개하며, 드롭다운 메뉴 항목의 사용법은 [``](/ko/docs/2/components/menu#menu-item-api)을 참조하세요. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` 사용 예시: ```html Item 1 Item 2 ``` ## 예시 {#examples} ### 형태 {#example-variant} `variant` 속성으로 드롭다운 셀렉트의 형태를 설정합니다. ```html Item 1 Item 2 Item 1 Item 2 ``` ### 다중 선택 지원 {#example-multiple} 드롭다운 셀렉트는 기본적으로 단일 선택이며, `` 컴포넌트의 `value` 값은 현재 선택된 [``](/ko/docs/2/components/menu#menu-item-api)의 `value` 값입니다. `multiple` 속성을 추가하면 드롭다운 셀렉트가 다중 선택을 지원합니다. 이때 ``의 `value` 값은 현재 선택된 [``](/ko/docs/2/components/menu#menu-item-api)의 `value` 값으로 구성된 배열입니다. 참고: 다중 선택 지원 시 ``의 `value` 값은 배열이므로 JavaScript 속성으로서만 값을 읽고 설정할 수 있습니다. ```html Item 1 Item 2 Item 3 ``` ### 보조 텍스트 {#example-helper-text} `label` 속성을 사용해 드롭다운 셀렉트 상단의 레이블 텍스트를 설정합니다. ```html Item 1 Item 2 ``` `placeholder` 속성을 사용해 값이 선택되지 않았을 때의 플레이스홀더 텍스트를 설정합니다. ```html Item 1 Item 2 ``` `helper` 속성을 사용해 드롭다운 셀렉트 하단의 도움말 텍스트를 설정합니다. `helper` 슬롯을 사용해 도움말 텍스트를 설정할 수도 있습니다. ```html Item 1 Item 2 Item 1 Item 2 Supporting text ``` ### 읽기 전용 모드 {#example-readonly} `readonly` 속성을 추가하면 드롭다운 셀렉트를 읽기 전용 모드로 설정할 수 있습니다. ```html Item 1 Item 2 ``` ### 비활성화 모드 {#example-disabled} `disabled` 속성을 추가하면 드롭다운 셀렉트를 비활성화할 수 있습니다. ```html Item 1 Item 2 ``` ### 비우기 가능 {#example-clearable} `clearable` 속성을 추가하면 드롭다운 셀렉트에 값이 있을 때 오른쪽에 비우기 버튼이 나타납니다. ```html Item 1 Item 2 ``` `clear` 슬롯을 통해 비우기 버튼을 사용자 정의할 수도 있습니다. ```html Item 1 Item 2 ``` ### 드롭다운 메뉴 위치 {#example-placement} `placement` 속성으로 드롭다운 메뉴의 위치를 설정할 수 있습니다. ```html Item 1 Item 2 ``` ### 텍스트 오른쪽 정렬 {#example-end-aligned} `end-aligned` 속성을 추가하면 텍스트를 오른쪽으로 정렬할 수 있습니다. ```html Item 1 Item 2 ``` ### 앞뒤 텍스트 및 아이콘 {#example-prefix-suffix} `icon` 및 `end-icon` 속성을 설정하면 드롭다운 셀렉트의 왼쪽과 오른쪽에 Material Icons 아이콘을 추가할 수 있습니다. `icon` 및 `end-icon` 슬롯을 통해 드롭다운 셀렉트의 왼쪽과 오른쪽에 요소를 추가할 수도 있습니다. ```html Item 1 Item 2

Item 1 Item 2 ``` `prefix` 및 `suffix` 속성을 설정하면 드롭다운 셀렉트의 왼쪽과 오른쪽에 텍스트를 추가할 수 있습니다. `prefix` 및 `suffix` 슬롯을 통해 드롭다운 셀렉트의 왼쪽과 오른쪽에 텍스트 요소를 추가할 수도 있습니다. 이 텍스트는 드롭다운 셀렉트가 포커스를 받거나 값이 있을 때만 표시됩니다. ```html Item 1 Item 2

Item 1 Item 2 $ /100 ``` ## mdui-select API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'filled' | 'outlined' 'filled'

셀렉트의 스타일입니다. 사용 가능한 값은 다음과 같습니다:

  • filled: 배경색이 채워진 셀렉트, 시각적 강조 효과가 높습니다.
  • outlined: 테두리가 있는 셀렉트, 시각적 강조 효과가 낮습니다.
multiple multiple true boolean false

다중 선택을 지원할지 여부를 설정합니다.
name name true string ''

셀렉트의 이름이며, 폼 데이터와 함께 제출됩니다.
value value false string | string[] ''

셀렉트의 값이며, 폼 데이터와 함께 제출됩니다.

multiple 속성을 지정하지 않으면 이 값은 문자열입니다. multiple 속성을 지정하면 이 값은 문자열 배열입니다. HTML 속성은 문자열 값만 설정할 수 있습니다. 배열 값을 설정해야 하는 경우 JavaScript 프로퍼티를 통해 설정하십시오.
undefined defaultValue false string | string[] ''

기본 선택 값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
label label true string

레이블 텍스트입니다.
placeholder placeholder true string

플레이스홀더 텍스트입니다.
helper helper true string

셀렉트 하단의 도움말 텍스트입니다. slot="helper"을 통해서도 설정할 수 있습니다.
clearable clearable true boolean false

셀렉트를 비울 수 있는지 여부를 설정합니다.
clear-icon clearIcon true string

셀렉트를 비울 수 있을 때 셀렉트 오른쪽에 표시되는 지우기 버튼의 Material Icons 아이콘 이름입니다. slot="clear-icon"을 통해서도 설정할 수 있습니다.
placement placement true 'auto' | 'bottom' | 'top' 'auto'

셀렉트의 위치입니다. 사용 가능한 값:

  • auto: 위치 자동 판단
  • bottom: 아래쪽에 위치
  • top: 위쪽에 위치
end-aligned endAligned true boolean false

텍스트를 오른쪽 정렬할지 여부를 설정합니다.
prefix prefix true string

셀렉트의 접두사 텍스트입니다. 포커스 상태이거나 셀렉트에 값이 있을 때만 표시됩니다. slot="prefix"을 통해서도 설정할 수 있습니다.
suffix suffix true string

셀렉트의 접미사 텍스트입니다. 포커스 상태이거나 셀렉트에 값이 있을 때만 표시됩니다. slot="suffix"을 통해서도 설정할 수 있습니다.
icon icon true string

셀렉트 앞쪽 아이콘의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
end-icon endIcon true string

셀렉트 뒤쪽 아이콘의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
error-icon errorIcon true string

폼 필드 유효성 검사 실패 시 셀렉트 오른쪽에 표시되는 Material Icons 아이콘 이름입니다. slot="error-icon"을 통해서도 설정할 수 있습니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
readonly readonly true boolean false

읽기 전용 여부를 설정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
required required true boolean false

폼 제출 시 이 필드가 필수인지 여부를 설정합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

선택된 값이 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
clear

clearable 속성으로 생성된 지우기 버튼을 클릭할 때 발생합니다. event.preventDefault()를 호출하여 셀렉트 비우기를 막을 수 있습니다.
### Slots
이름 설명
기본

<mdui-menu-item> 요소
icon

왼쪽 아이콘
end-icon

오른쪽 아이콘
error-icon

유효성 검사 실패 상태의 오른쪽 아이콘
prefix

왼쪽 텍스트
suffix

오른쪽 텍스트
clear-button

지우기 버튼
clear-icon

지우기 버튼 내의 아이콘
helper

하단의 도움말 텍스트
### CSS Parts
이름 설명
chips

다중 선택 시 선택된 값에 해당하는 칩을 배치하는 컨테이너
chip

다중 선택 시 각 선택된 값에 해당하는 칩
chip__button

칩 내부의 <button> 요소
chip__label

칩 내부의 텍스트
chip__delete-icon

칩 내부의 삭제 아이콘
text-field

텍스트 필드, 즉 <mdui-text-field> 요소
text-field__container

text-field 내부의 텍스트 필드 컨테이너
text-field__icon

text-field 내부의 왼쪽 아이콘
text-field__end-icon

text-field 내부의 오른쪽 아이콘
text-field__error-icon

text-field 내부의 유효성 검사 실패 상태의 오른쪽 아이콘
text-field__prefix

text-field 내부의 왼쪽 텍스트
text-field__suffix

text-field 내부의 오른쪽 텍스트
text-field__label

text-field 내부의 레이블 텍스트
text-field__input

text-field 내부의 <input> 요소
text-field__clear-button

text-field 내부의 지우기 버튼
text-field__clear-icon

text-field 내부의 지우기 버튼 내의 아이콘
text-field__supporting

text-field 내부의 하단 보조 정보 컨테이너(helper 및 error 포함)
text-field__helper

text-field 내부의 하단 도움말 텍스트
text-field__error

text-field 내부의 하단 오류 설명 텍스트
menu

드롭다운 메뉴, 즉 <mdui-menu> 요소
# 세그먼트 버튼 컴포넌트 SegmentedButton 세그먼트 버튼 컴포넌트는 버튼 그룹을 캡슐화하여 옵션 제공, 보기 전환, 요소 정렬 등에 사용됩니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` 사용 예시: ```html Day Week Month ``` ## 예시 {#examples} ### 전체 너비 표시 {#example-full-width} `` 요소에 `full-width` 속성을 추가하면 컴포넌트가 전체 너비를 차지합니다. ```html Day Week Month ``` ### 단일 선택 모드 {#example-selects-single} `` 요소에 `selects` 속성을 `single`로 지정하면 단일 선택 모드를 구현할 수 있습니다. 이때 ``의 `value` 속성값은 현재 선택된 ``의 `value` 속성값입니다. ```html Day Week Month Day Week Month ``` ### 다중 선택 모드 {#example-selects-multiple} `` 요소에 `selects` 속성을 `multiple`로 지정하면 다중 선택 모드를 구현할 수 있습니다. 이때 ``의 `value` 속성값은 현재 선택된 ``의 `value` 속성값으로 구성된 배열입니다. 참고: 다중 선택 모드에서는 ``의 `value` 속성값이 배열이므로 JavaScript 속성으로서만 값을 읽고 설정할 수 있습니다. ```html Day Week Month Day Week Month ``` ### 아이콘 {#example-icon} `` 요소에 `icon` 및 `end-icon` 속성을 설정하면 버튼의 왼쪽과 오른쪽에 각각 Material Icons 아이콘을 추가할 수 있습니다. 또한 `icon` 및 `end-icon` 슬롯을 통해 버튼의 왼쪽과 오른쪽에 요소를 추가할 수 있습니다. ```html Day Week Month ``` `` 요소에 `selected-icon` 속성을 추가하면 선택 상태의 Material Icons 아이콘을 설정할 수 있습니다. `selected-icon` 슬롯을 통해서도 설정할 수 있습니다. ```html Day Week ``` ### 링크 {#example-link} `` 요소에 `href` 속성을 설정하면 버튼을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(`download`, `target`, `rel`)도 함께 사용합니다. ```html Link Week Month ``` ### 비활성화 및 로딩 중 상태 {#example-disabled} `` 요소에 `disabled` 속성을 추가하면 전체 세그먼트 버튼 그룹을 비활성화할 수 있습니다. ```html Day Week Month ``` `` 요소에 `disabled` 속성을 추가하면 특정 버튼을 비활성화할 수 있고, `loading` 속성을 추가하면 특정 버튼에 로딩 중 상태를 추가할 수 있습니다. ```html Day Week Month Year ``` ## mdui-segmented-button-group API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
full-width fullWidth true boolean false

부모 요소의 너비를 채울지 여부를 설정합니다.
selects selects true 'single' | 'multiple'

세그먼트 버튼의 선택 가능 상태입니다. 기본값은 선택 불가입니다. 사용 가능한 값:

  • single: 단일 선택
  • multiple: 다중 선택
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
required required true boolean false

폼 제출 시 반드시 선택해야 하는지 여부를 설정합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
name name true string ''

폼 제출 시 이름이며, 폼 데이터와 함께 제출됩니다.
value value false string | string[] ''

현재 선택된 <mdui-segmented-button>의 값입니다.

참고: 이 프로퍼티의 HTML 속성 값은 항상 문자열이며, selects="single"일 때만 HTML 속성을 통해 초기값을 설정할 수 있습니다. 이 프로퍼티의 JavaScript 프로퍼티 값은 selects="single"일 때는 문자열, selects="multiple"일 때는 문자열 배열입니다. 따라서 selects="multiple"일 때는 JavaScript 프로퍼티를 통해서만 이 값을 수정할 수 있습니다.
undefined defaultValue false string | string[] ''

기본 선택 값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
change

선택된 값이 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

<mdui-segmented-button> 컴포넌트
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
## mdui-segmented-button API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
icon icon true string

왼쪽의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
end-icon endIcon true string

오른쪽의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
selected-icon selectedIcon true string

선택됨 상태의 Material Icons 아이콘 이름입니다. slot="selected-icon"을 통해서도 설정할 수 있습니다.
href href true string

링크의 대상 URL입니다.

이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
download download true string

다운로드할 링크 대상을 지정합니다.

참고: href 속성이 지정된 경우에만 유효합니다.
target target true '_blank' | '_parent' | '_self' | '_top'

링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _blank: 새 창에서 링크 열기
  • _parent: 부모 프레임에서 링크 열기
  • _self: 기본값. 현재 프레임에서 링크 열기
  • _top: 전체 창에서 링크 열기

참고: href 속성이 지정된 경우에만 유효합니다.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:

  • alternate: 현재 문서의 대체 버전
  • author: 현재 문서 또는 글의 작성자
  • bookmark: 가장 가까운 상위 섹션으로의 영구 링크
  • external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음
  • help: 관련 도움말 문서로 링크
  • license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨
  • me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄
  • next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임
  • nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음
  • noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.
  • opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함
  • prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임
  • search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공
  • tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공

참고: href 속성이 지정된 경우에만 사용 가능합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
loading loading true boolean false

로딩할지 여부를 설정합니다.
name name true string ''

버튼의 이름이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
value value true string ''

버튼의 초기값이며, 폼 데이터와 함께 제출됩니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
type type true 'submit' | 'reset' | 'button' 'button'

버튼의 유형입니다. 기본 유형은 button입니다. 사용 가능한 유형은 다음과 같습니다:

  • submit: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다.
  • reset: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다.
  • button: 이 유형의 버튼은 기본 동작이 없습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.

참고: href 속성이 지정되지 않은 경우에만 유효합니다.
formaction formAction true string

폼을 제출할 URL을 지정합니다.

이 속성이 지정되면 <form> 요소의 action 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • application/x-www-form-urlencoded: 이 속성을 지정하지 않았을 때의 기본값
  • multipart/form-data: 폼에 <input type="file"> 요소가 포함된 경우 사용
  • text/plain: HTML5에서 새로 추가되었으며, 디버깅용입니다.

이 속성이 지정되면 <form> 요소의 enctype 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formmethod formMethod true 'post' | 'get'

폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • post: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다.
  • get: 폼 데이터가 ? 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다.

이 속성이 설정되면 <form> 요소의 method 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formnovalidate formNoValidate true boolean false

이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다.

이 속성을 설정하면 <form> 요소의 novalidate 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다:

  • _self: 기본값, 현재 프레임에서 열기
  • _blank: 새 창에서 열기
  • _parent: 부모 프레임에서 열기
  • _top: 전체 창에서 열기

이 속성을 설정하면 <form> 요소의 target 속성을 재정의합니다.

참고: href 속성이 지정되지 않고 type="submit"인 경우에만 유효합니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
기본

세그먼트 버튼 항목의 텍스트 콘텐츠
icon

세그먼트 버튼 항목의 왼쪽 아이콘
selected-icon

선택됨 상태의 왼쪽 아이콘
end-icon

세그먼트 버튼 항목의 오른쪽 아이콘
### CSS Parts
이름 설명
button

내부의 <button> 또는 <a> 요소
icon

왼쪽 아이콘
selected-icon

선택됨 상태의 왼쪽 아이콘
end-icon

오른쪽 아이콘
label

텍스트 콘텐츠
loading

로딩 중 상태의 <mdui-circular-progress> 요소
# 슬라이더 컴포넌트 Slider 슬라이더 컴포넌트는 사용자가 슬라이더를 슬라이딩하여 일련의 값 중에서 선택할 수 있도록 합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/slider.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 기본값 {#example-value} `value` 속성으로 슬라이더의 현재 값을 읽거나 설정할 수 있습니다. ```html ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 슬라이더를 비활성화할 수 있습니다. ```html ``` ### 범위 {#example-min-max} `min` 및 `max` 속성을 사용해 슬라이더의 최소값과 최대값을 설정합니다. ```html ``` ### 단계 간격 {#example-step} `step` 속성으로 슬라이더의 단계 간격을 설정할 수 있습니다. ```html ``` ### 눈금 표시 {#example-tickmarks} `tickmarks` 속성을 추가하면 슬라이더에 눈금을 표시할 수 있습니다. ```html ``` ### 텍스트 힌트 숨기기 {#example-nolabel} 슬라이더의 텍스트 힌트를 숨기려면 `nolabel` 속성을 추가합니다. ```html ``` ### 텍스트 힌트 수정 {#example-labelFormatter} `labelFormatter` JavaScript 속성으로 텍스트 힌트의 표시 형식을 수정할 수 있습니다. 이 속성의 값은 함수여야하며, 이 함수는 현재 슬라이더 값을 매개변수로 받아 표시하려는 텍스트를 반환합니다. ```html ``` ## mdui-slider API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value false number 0

슬라이더의 값이며, 폼 데이터와 함께 제출됩니다.
undefined defaultValue false number 0

기본값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
min min true number 0

슬라이더의 최솟값입니다. 기본값은 0입니다.
max max true number 100

슬라이더의 최댓값입니다. 기본값은 100입니다.
step step true number 1

증분 간격입니다. 기본값은 1입니다.
tickmarks tickmarks true boolean false

눈금 표시를 추가할지 여부를 지정합니다.
nolabel nolabel true boolean false

텍스트 힌트를 숨길지 여부를 지정합니다.
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
name name true string ''

슬라이더의 이름이며, 폼 데이터와 함께 제출됩니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
undefined labelFormatter false (value: number) => string

레이블의 표시 형식을 사용자 정의하는 함수입니다. 함수의 인자는 슬라이더의 현재 값이며, 반환값은 표시할 텍스트입니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

값이 변경되고 포커스를 잃으면 발생합니다.
input

값이 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### CSS Parts
이름 설명
track-inactive

비활성 상태 트랙
track-active

활성 상태 트랙
handle

핸들
label

힌트 텍스트
tickmark

눈금 표시
# 스낵바 컴포넌트 Snackbar 스낵바 컴포넌트는 페이지에 간단한 애플리케이션 프로세스 정보를 표시할 때 사용합니다. 컴포넌트를 직접 사용하는 것 외에도 mdui는 [`mdui.snackbar`](/ko/docs/2/functions/snackbar) 함수를 제공하여 Snackbar 컴포넌트 사용을 간소화할 수 있습니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/snackbar.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` 사용 예시: ```html Photo archived Snackbar 열기 ``` ## 예시 {#examples} ### 위치 {#example-placement} `placement` 속성으로 Snackbar의 표시 위치를 설정할 수 있습니다. ```html
Photo archived top-start Photo archived top Photo archived top-end
Photo archived bottom-start Photo archived bottom Photo archived bottom-end
``` ### 작업 버튼 {#example-action} `action` 속성을 사용해 Snackbar 오른쪽에 작업 버튼을 추가하고, 이 속성으로 버튼의 텍스트를 지정할 수 있습니다. 작업 버튼을 클릭하면 `action-click` 이벤트가 트리거됩니다. 작업 버튼을 로딩 중 상태로 표시하려면 `action-loading` 속성을 추가합니다. ```html Photo archived Snackbar 열기 ``` `action` 슬롯을 통해 Snackbar 오른쪽에 사용자 정의 요소를 추가할 수도 있습니다. ```html Photo archived Undo Snackbar 열기 ``` ### 닫기 가능 {#example-closeable} `closeable` 속성을 추가하면 Snackbar 오른쪽에 닫기 버튼이 나타납니다. 이 버튼을 클릭하면 Snackbar가 닫히고 `close` 이벤트가 트리거됩니다. ```html Photo archived Snackbar 열기 ``` `close-button` 슬롯을 통해 닫기 버튼의 요소를 사용자 정의할 수 있습니다. ```html Photo archived Snackbar 열기 ``` `close-icon` 속성을 설정하여 기본 닫기 버튼의 Material Icons 아이콘을 수정할 수 있습니다. `close-icon` 슬롯을 통해 닫기 버튼의 아이콘 요소를 사용자 정의할 수도 있습니다. ```html Photo archived Snackbar 열기 ``` ### 텍스트 행 수 {#example-message-line} 기본적으로 메시지 텍스트는 행 수 제한이 없습니다. `message-line` 속성으로 텍스트 행 수를 제한할 수 있으며, 최대 2행까지 설정할 수 있습니다. ```html The item already has the label "travel". You can add a new label. You can add a new label. Snackbar 열기 ``` ### 자동 닫힘 지연 시간 {#example-auto-close-delay} `auto-close-delay` 속성을 사용해 자동 닫힘 지연 시간을 설정할 수 있습니다. 단위는 밀리초이며, 기본값은 5000밀리초입니다. ```html Photo archived Snackbar 열기 ``` ### 외부 영역 클릭 시 닫기 {#example-close-on-outside-click} `close-on-outside-click` 속성을 추가하면 Snackbar 외부 영역을 클릭할 때 Snackbar를 닫을 수 있습니다. ```html Photo archived Snackbar 열기 ``` ## mdui-snackbar API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
open open true boolean false

스낵바를 표시할지 여부를 설정합니다.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

스낵바의 표시 위치입니다. 기본값은 bottom입니다. 사용 가능한 값:

  • top: 상단 중앙
  • top-start: 상단 왼쪽 정렬
  • top-end: 상단 오른쪽 정렬
  • bottom: 하단 중앙
  • bottom-start: 하단 왼쪽 정렬
  • bottom-end: 하단 오른쪽 정렬
action action true string

작업 버튼의 텍스트입니다. slot="action"을 통해 작업 버튼을 설정할 수도 있습니다.
action-loading actionLoading true boolean false

작업 버튼을 로딩할지 여부를 설정합니다.
closeable closeable true boolean false

오른쪽에 닫기 버튼을 표시할지 여부를 설정합니다.
close-icon closeIcon true string

닫기 버튼의 Material Icons 아이콘 이름입니다. slot="close-icon"을 통해서도 설정할 수 있습니다.
message-line messageLine true 1 | 2

메시지 텍스트의 최대 표시 줄 수입니다. 기본값은 제한 없음입니다. 사용 가능한 값:

  • 1: 최대 한 줄 표시
  • 2: 최대 두 줄 표시
auto-close-delay autoCloseDelay true number 5000

자동 닫힘 지연 시간(밀리초)입니다. 0으로 설정하면 자동으로 닫히지 않습니다. 기본값은 5000밀리초입니다.
close-on-outside-click closeOnOutsideClick true boolean false

스낵바 외부 영역을 클릭하거나 터치할 때 스낵바를 닫을지 여부를 설정합니다.
### 이벤트
이름 설명
open

스낵바 표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 스낵바 표시를 막을 수 있습니다.
opened

스낵바 표시 애니메이션이 완료되면 발생합니다.
close

스낵바 숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 스낵바 닫힘을 막을 수 있습니다.
closed

스낵바 숨김 애니메이션이 완료되면 발생합니다.
action-click

작업 버튼을 클릭할 때 발생합니다.
### Slots
이름 설명
기본

스낵바의 메시지 텍스트 콘텐츠
action

오른쪽의 작업 버튼
close-button

오른쪽의 닫기 버튼. closeable 속성이 true로 설정되어야 표시됩니다.
close-icon

닫기 버튼 내의 아이콘
### CSS Parts
이름 설명
message

메시지 텍스트
action

작업 버튼
close-button

닫기 버튼
close-icon

닫기 버튼 내의 아이콘
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 스위치 컴포넌트 Switch 스위치 컴포넌트는 단일 옵션의 켜짐 또는 꺼짐 상태를 전환하는 데 사용되며, 직관적인 상호 작용 디자인을 통해 사용자가 설정을 쉽게 조정할 수 있습니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/switch.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 선택 상태 {#example-checked} 스위치가 선택되면 `checked` 속성값이 `true`가 됩니다. `checked` 속성을 추가하여 스위치가 기본적으로 선택된 상태가 되도록 할 수도 있습니다. ```html ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 스위치 컴포넌트를 비활성화할 수 있습니다. ```html ``` ### 아이콘 {#example-icon} `unchecked-icon` 속성으로 미선택 상태의 Material Icons 아이콘을 설정하고, `checked-icon` 속성으로 선택 상태의 Material Icons 아이콘을 설정할 수 있습니다. `unchecked-icon` 및 `checked-icon` 슬롯을 통해 미선택 및 선택 상태의 아이콘 요소를 사용자 정의할 수도 있습니다. ```html ``` ## mdui-switch API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
disabled disabled true boolean false

비활성화할지 여부를 설정합니다.
checked checked true boolean false

선택됨 여부를 설정합니다.
undefined defaultChecked false boolean false

기본 선택 상태입니다. 폼을 재설정할 때 이 상태로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
unchecked-icon uncheckedIcon true string

선택되지 않은 상태의 Material Icons 아이콘 이름입니다. slot="unchecked-icon"을 통해서도 설정할 수 있습니다.
checked-icon checkedIcon true string

선택됨 상태의 Material Icons 아이콘 이름입니다. slot="checked-icon"을 통해서도 설정할 수 있습니다.

기본값은 check 아이콘입니다. 빈 문자열을 전달하여 기본 아이콘을 제거할 수 있습니다.
required required true boolean false

폼 제출 시 이 스위치가 필수인지 여부를 설정합니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
name name true string ''

스위치의 이름이며, 폼 데이터와 함께 제출됩니다.
value value true string 'on'

스위치의 값이며, 폼 데이터와 함께 제출됩니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

선택 상태가 변경될 때 발생합니다.
input

선택 상태가 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
### Slots
이름 설명
unchecked-icon

선택되지 않은 상태의 요소
checked-icon

선택됨 상태의 요소
### CSS Parts
이름 설명
track

트랙
thumb

아이콘 컨테이너
unchecked-icon

선택되지 않은 상태의 아이콘
checked-icon

선택됨 상태의 아이콘
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트 트랙의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--shape-corner-thumb

컴포넌트 아이콘 컨테이너의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
# 탭 컴포넌트 Tabs 탭 컴포넌트는 콘텐츠나 데이터 세트를 그룹화하여 표시하는 데 사용되며, 사용자가 다양한 범주 간에 빠르게 전환할 수 있도록 합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` 사용 예시: ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## 예시 {#examples} ### 탭 스타일 {#example-variant} `` 컴포넌트에 `variant` 속성을 사용해 탭의 스타일을 설정할 수 있습니다. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### 탭 위치 {#example-placement} `` 컴포넌트에 `placement` 속성을 사용해 탭의 위치를 설정할 수 있습니다. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### 전체 너비 표시 {#example-full-width} `` 컴포넌트에 `full-width` 속성을 추가하면 탭이 전체 너비를 차지하며, 각 탭은 너비를 균등하게 분배합니다. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### 아이콘 {#example-icon} `` 컴포넌트에 `icon` 속성을 설정하면 탭에 Material Icons 아이콘을 추가할 수 있습니다. `icon` 슬롯을 통해 아이콘 요소를 추가할 수도 있습니다. `inline` 속성을 추가하면 아이콘과 텍스트를 수평으로 정렬할 수 있습니다. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### 배지 {#example-badge} `` 컴포넌트에서 `badge` 슬롯을 통해 배지를 추가할 수 있습니다. ```html Tab 1 99+ Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### 사용자 정의 내용 {#example-custom} `` 컴포넌트에서 `custom` 슬롯을 사용하면 탭의 내용을 완전히 사용자 정의할 수 있습니다. ```html Tab 1 Icon Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value true string

탭 패널 항목의 값입니다.
### Slots
이름 설명
기본

탭 패널 항목 콘텐츠
## mdui-tab API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
value value true string

탭 내비게이션 항목의 값입니다.
icon icon true string

Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
inline inline true boolean false

아이콘과 텍스트를 가로로 정렬할지 여부를 설정합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
### Slots
이름 설명
기본

탭 내비게이션 항목의 텍스트 콘텐츠
icon

탭 내비게이션 항목 내의 아이콘
badge

배지
custom

탭 내비게이션 항목 내의 전체 콘텐츠를 사용자 정의합니다.
### CSS Parts
이름 설명
container

탭 내비게이션 항목 컨테이너
icon

탭 내비게이션 항목 내의 아이콘
label

탭 내비게이션 항목의 텍스트
## mdui-tabs API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'primary' | 'secondary' 'primary'

탭 모양입니다. 사용 가능한 값:

  • primary: <mdui-top-app-bar> 아래에 위치하여 앱의 메인 페이지를 전환하는 시나리오에 적합합니다.
  • secondary: 페이지 내에 위치하여 관련 콘텐츠 그룹을 전환하는 시나리오에 적합합니다.
value value true string

현재 활성화된 <mdui-tab>의 값입니다.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

탭 위치입니다. 기본값은 top-start입니다. 사용 가능한 값:

  • top-start: 위쪽, 왼쪽 정렬
  • top: 위쪽, 중앙 정렬
  • top-end: 위쪽, 오른쪽 정렬
  • bottom-start: 아래쪽, 왼쪽 정렬
  • bottom: 아래쪽, 중앙 정렬
  • bottom-end: 아래쪽, 오른쪽 정렬
  • left-start: 왼쪽, 상단 정렬
  • left: 왼쪽, 중앙 정렬
  • left-end: 왼쪽, 하단 정렬
  • right-start: 오른쪽, 상단 정렬
  • right: 오른쪽, 중앙 정렬
  • right-end: 오른쪽, 하단 정렬
full-width fullWidth true boolean false

부모 요소의 너비를 채울지 여부를 설정합니다.
### 이벤트
이름 설명
change

선택된 값이 변경될 때 발생합니다.
### Slots
이름 설명
기본

<mdui-tab> 요소
panel

<mdui-tab-panel> 요소
### CSS Parts
이름 설명
container

<mdui-tab> 요소의 컨테이너
indicator

활성 상태 표시기
# 텍스트 필드 컴포넌트 TextField 텍스트 필드 컴포넌트는 사용자가 페이지에 텍스트를 입력할 수 있도록하며, 일반적으로 양식과 대화 상자에 사용됩니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/text-field.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` 사용 예시: ```html ``` ## 예시 {#examples} ### 형태 {#example-variant} `variant` 속성으로 텍스트 필드의 형태를 설정합니다. ```html

``` ### 보조 텍스트 {#example-helper-text} `label` 속성으로 텍스트 필드 상단의 레이블 텍스트를 설정합니다. ```html ``` `placeholder` 속성으로 값이 없을 때의 플레이스홀더 텍스트를 설정합니다. ```html ``` `helper` 속성으로 텍스트 필드 하단의 도움말 텍스트를 설정합니다. `helper` 슬롯을 사용해 도움말 텍스트를 설정할 수도 있습니다. `helper-on-focus` 속성을 추가하면 입력 필드가 포커스를 받을 때만 도움말 텍스트를 표시합니다. ```html Supporting text ``` ### 비우기 가능 {#example-clearable} `clearable` 속성을 추가하면 텍스트 필드에 값이 있을 때 오른쪽에 비우기 버튼이 추가됩니다. ```html ``` ### 텍스트 오른쪽 정렬 {#example-end-aligned} `end-aligned` 속성을 추가하면 텍스트를 오른쪽으로 정렬할 수 있습니다. ```html ``` ### 앞뒤 텍스트 및 아이콘 {#example-prefix-suffix} `icon` 및 `end-icon` 속성을 설정하면 텍스트 필드의 왼쪽과 오른쪽에 Material Icons 아이콘을 추가할 수 있습니다. `icon` 및 `end-icon` 슬롯을 통해 텍스트 필드의 왼쪽과 오른쪽에 요소를 추가할 수도 있습니다. ```html

``` `prefix` 및 `suffix` 속성을 설정하면 텍스트 필드의 왼쪽과 오른쪽에 텍스트를 추가할 수 있습니다. `prefix` 및 `suffix` 슬롯을 통해 텍스트 필드의 왼쪽과 오른쪽에 텍스트 요소를 추가할 수도 있습니다. 이 텍스트는 텍스트 필드가 포커스를 받거나 값이 있을 때만 표시됩니다. ```html

$ /100 ``` ### 읽기 전용 모드 {#example-readonly} `readonly` 속성을 추가하면 텍스트 필드를 읽기 전용 모드로 설정할 수 있습니다. ```html ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 텍스트 필드를 비활성화할 수 있습니다. ```html ``` ### 여러 줄 텍스트 필드 {#example-rows} `rows` 속성으로 여러 줄 텍스트 필드의 행 수를 설정할 수 있습니다. ```html ``` `autosize` 속성을 추가하면 텍스트 필드가 입력 내용의 길이에 따라 자동으로 높이를 조정할 수 있습니다. `min-rows` 및 `max-rows` 속성으로 자동 높이 조정 시 최소 행 수와 최대 행 수를 지정할 수 있습니다. ```html

``` ### 글자 수 통계 {#example-counter} `maxlength` 속성으로 최대 글자 수를 설정한 경우 `counter` 속성을 추가하여 텍스트 필드 하단에 글자 수 통계를 표시할 수 있습니다. ```html ``` ### 비밀번호 필드 {#example-password} `type="password"`일 때 `toggle-password` 속성을 추가하면 텍스트 필드 오른쪽에 비밀번호 표시 전환 버튼을 추가할 수 있습니다. ```html ``` ## mdui-text-field API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'filled' | 'outlined' 'filled'

텍스트 필드의 모양입니다. 기본값은 filled입니다. 사용 가능한 값:

  • filled: 배경색이 채워진 텍스트 필드, 시각적 강조 효과가 높습니다.
  • outlined: 테두리가 있는 텍스트 필드, 시각적 강조 효과가 낮습니다.
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

텍스트 필드 입력 유형입니다. 기본값은 text입니다. 사용 가능한 값:

  • text: 기본값. 텍스트 필드
  • number: 숫자만 입력 가능합니다. 가상 키보드가 있는 장치에서는 숫자 키보드가 표시됩니다.
  • password: 비밀번호 입력용이며, 값이 가려집니다.
  • url: URL 입력용이며, URL 형식을 확인합니다. 가상 키보드를 지원하는 장치에서는 해당 용도에 맞는 키보드가 표시됩니다.
  • email: 이메일 주소 입력용이며, 이메일 형식을 확인합니다. 가상 키보드를 지원하는 장치에서는 해당 용도에 맞는 키보드가 표시됩니다.
  • search: 검색 상자용입니다. 가상 키보드가 있는 장치에서 Enter 아이콘이 검색 아이콘으로 변경됩니다.
  • tel: 전화번호 입력용입니다. 가상 키보드가 있는 장치에서는 전화 숫자 키보드가 표시됩니다.
  • hidden: 컨트롤을 숨기지만 값은 서버에 제출됩니다.
  • date: 날짜(년, 월, 일, 시간 제외)를 입력하는 컨트롤입니다. 지원되는 브라우저에서 활성화하면 날짜 선택기 또는 년/월/일 숫자 휠이 열립니다.
  • datetime-local: 시간대를 제외한 날짜와 시간을 입력하는 컨트롤입니다. 지원되는 브라우저에서 활성화하면 날짜 선택기 또는 년/월/일 숫자 휠이 열립니다.
  • month: 시간대 없이 년과 월을 입력하는 컨트롤입니다.
  • time: 시간대 없이 시간을 입력하는 컨트롤입니다.
  • week: 시간대 없이 년과 주차로 구성된 날짜를 입력하는 컨트롤입니다.
name name true string ''

텍스트 필드 이름이며, 폼 데이터와 함께 제출됩니다.
value value false string ''

텍스트 필드의 값이며, 폼 데이터와 함께 제출됩니다.
undefined defaultValue false string ''

기본값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
label label true string

레이블 텍스트입니다.
placeholder placeholder true string

플레이스홀더 텍스트입니다.
helper helper true string

텍스트 필드 하단의 도움말 텍스트입니다. slot="helper"을 통해서도 설정할 수 있습니다.
helper-on-focus helperOnFocus true boolean false

포커스를 얻었을 때만 하단 도움말 텍스트를 표시할지 여부를 설정합니다.
clearable clearable true boolean false

텍스트 필드 콘텐츠를 비울 수 있는지 여부를 설정합니다.
clear-icon clearIcon true string

텍스트 필드를 비울 수 있을 때 텍스트 필드 오른쪽에 표시되는 지우기 버튼의 Material Icons 아이콘 이름입니다. slot="clear-icon"을 통해서도 설정할 수 있습니다.
end-aligned endAligned true boolean false

텍스트를 오른쪽 정렬할지 여부를 설정합니다.
prefix prefix true string

텍스트 필드의 접두사 텍스트입니다. 텍스트 필드가 포커스되거나 값이 있을 때만 표시됩니다. slot="prefix"을 통해서도 설정할 수 있습니다.
suffix suffix true string

텍스트 필드의 접미사 텍스트입니다. 텍스트 필드가 포커스되거나 값이 있을 때만 표시됩니다. slot="suffix"을 통해서도 설정할 수 있습니다.
icon icon true string

텍스트 필드 앞쪽 아이콘의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
end-icon endIcon true string

텍스트 필드 뒤쪽 아이콘의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
error-icon errorIcon true string

폼 필드 유효성 검사 실패 시 텍스트 필드 오른쪽에 표시되는 Material Icons 아이콘 이름입니다. slot="error-icon"을 통해서도 설정할 수 있습니다.
form form true string

연결된 <form> 요소입니다. 이 속성 값은 동일한 페이지에 있는 <form> 요소의 id여야 합니다.

이 속성을 지정하지 않으면 이 요소는 <form> 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 <form> 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
readonly readonly true boolean false

읽기 전용 여부를 설정합니다.
disabled disabled true boolean false

입력 필드를 비활성화할지 여부를 설정합니다.
required required true boolean false

폼 제출 시 이 필드가 필수인지 여부를 설정합니다.
rows rows true number

텍스트 필드의 고정 줄 수입니다.
autosize autosize true boolean false

입력 콘텐츠에 따라 텍스트 필드 높이를 자동으로 조정할지 여부를 설정합니다.
min-rows minRows true number

autosize가 true일 때 텍스트 필드의 최소 줄 수입니다.
max-rows maxRows true number

autosize가 true일 때 텍스트 필드의 최대 줄 수입니다.
minlength minlength true number

허용되는 최소 문자 수입니다.
maxlength maxlength true number

허용되는 최대 문자 수입니다.
counter counter true boolean false

글자 수 통계를 표시할지 여부를 설정합니다. maxlength가 지정된 경우에만 유효합니다.
min min true number

type이 number일 때 허용되는 최소 숫자입니다.
max max true number

type이 number일 때 허용되는 최대 숫자입니다.
step step true number

type이 number일 때 숫자 증감 단계입니다.
pattern pattern true string

폼 유효성 검사에 사용되는 정규 표현식입니다.
toggle-password togglePassword true boolean false

type이 password일 때 이 속성을 설정하면 일반 텍스트와 암호문 간에 전환할 수 있는 토글 버튼이 추가됩니다.
show-password-icon showPasswordIcon true string

비밀번호 토글 버튼의 Material Icons 아이콘으로, 비밀번호가 일반 텍스트일 때 표시됩니다. slot="show-password-icon"을 통해서도 설정할 수 있습니다.
hide-password-icon hidePasswordIcon true string

비밀번호 토글 버튼의 Material Icons 아이콘으로, 비밀번호가 암호문일 때 표시됩니다. slot="hide-password-icon"을 통해서도 설정할 수 있습니다.
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

iOS의 비표준 속성으로, 텍스트의 첫 글자를 자동으로 대문자로 만들지 여부를 제어합니다. iOS5 이상 버전에서 유효합니다. 사용 가능한 값:

  • none: 첫 글자 대문자 변환 비활성화
  • sentences: 문장 첫 글자 대문자
  • words: 단어 첫 글자 대문자
  • characters: 모든 문자 대문자
autocorrect autocorrect true string

input 요소의 autocorrect 속성입니다.
autocomplete autocomplete true string

input 요소의 autocomplete 속성입니다.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

input 요소의 enterkeyhint 속성으로, 가상 키보드에서 Enter 키의 표시 텍스트 또는 아이콘을 사용자 정의하는 데 사용됩니다. 구체적인 표시 효과는 사용자의 기기와 언어에 따라 다릅니다. 사용 가능한 값:

  • enter: 새 줄 삽입
  • done: 입력 완료, 가상 키보드 닫기
  • go: 입력 텍스트의 대상으로 이동
  • next: 다음 입력 항목으로 이동
  • previous: 이전 입력 항목으로 이동
  • search: 검색 결과로 이동
  • send: 텍스트 정보 전송
spellcheck spellcheck true boolean false

맞춤법 검사를 활성화할지 여부를 설정합니다.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

input 요소의 inputmode 속성으로, 가상 키보드의 유형을 사용자 정의하는 데 사용됩니다. 사용 가능한 값:

  • none: 가상 키보드 없음. 자체 키보드 입력 컨트롤을 구현해야 할 때 유용합니다.
  • text: 표준 텍스트 입력 키보드
  • decimal: 소수점 입력 키보드로, 숫자 외에 소수점 . 또는 천 단위 구분 기호 쉼표 ,가 포함될 수 있습니다.
  • numeric: 0-9 숫자 키보드 표시
  • tel: 전화 숫자 키보드, 0-9 숫자, 별표 * 또는 우물정자 # 키 포함
  • search: 검색 입력에 최적화된 가상 키보드, 제출 버튼은 일반적으로 search 또는 "검색"을 표시합니다.
  • email: 이메일 주소 입력에 최적화된 가상 키보드, 일반적으로 @ . 등의 키가 있습니다.
  • url: URL 입력에 최적화된 가상 키보드, 일반적으로 . / # 등의 키가 있습니다.
undefined validity false ValidityState

폼 유효성 검사 상태 객체입니다. 자세한 내용은 ValidityState를 참조하십시오.
undefined validationMessage false string

폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
undefined valueAsNumber false number

현재 값을 가져와 number 유형으로 변환하거나 number 유형의 값을 설정합니다. 값을 number 유형으로 변환할 수 없으면 NaN을 반환합니다.
autofocus autofocus true boolean false

페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
tabindex tabIndex false number

Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
### 메서드
이름 설명
select(): void

텍스트 필드의 텍스트를 선택합니다.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

텍스트 필드에서 특정 범위의 콘텐츠를 선택합니다.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

텍스트 필드에서 특정 범위의 텍스트를 새 텍스트로 바꿉니다.
checkValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.
reportValidity(): boolean

폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 false를 반환하고 invalid 이벤트를 트리거합니다. 통과하면 true를 반환합니다.

유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
setCustomValidity(message: string): void

사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
click(): void

마우스 클릭을 시뮬레이션합니다.
focus(options?: FocusOptions): void

현재 요소에 포커스를 설정합니다.

객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:

  • preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
blur(): void

현재 요소에서 포커스를 제거합니다.
### 이벤트
이름 설명
focus

포커스를 얻었을 때 발생합니다.
blur

포커스를 잃었을 때 발생합니다.
change

텍스트 필드의 값이 변경되고 포커스를 잃으면 발생합니다.
input

텍스트 필드의 값이 변경될 때 발생합니다.
invalid

폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
clear

clearable 속성으로 생성된 지우기 버튼을 클릭할 때 발생합니다. event.preventDefault()를 호출하여 텍스트 필드 비우기를 막을 수 있습니다.
### Slots
이름 설명
icon

왼쪽 아이콘
end-icon

오른쪽 아이콘
error-icon

유효성 검사 실패 상태의 오른쪽 아이콘
prefix

왼쪽 텍스트
suffix

오른쪽 텍스트
clear-button

지우기 버튼
clear-icon

지우기 버튼 내의 아이콘
toggle-password-button

비밀번호 표시 상태 토글 버튼
show-password-icon

비밀번호 표시 상태에서 비밀번호 표시 상태 토글 버튼 내의 아이콘
hide-password-icon

비밀번호 숨김 상태에서 비밀번호 표시 상태 토글 버튼 내의 아이콘
helper

하단의 도움말 텍스트
### CSS Parts
이름 설명
container

텍스트 필드 컨테이너
icon

왼쪽 아이콘
end-icon

오른쪽 아이콘
error-icon

유효성 검사 실패 상태의 오른쪽 아이콘
prefix

왼쪽 텍스트
suffix

오른쪽 텍스트
label

상단의 레이블 텍스트
input

내부의 <input> 또는 <textarea> 요소
clear-button

지우기 버튼
clear-icon

지우기 버튼 내의 아이콘
toggle-password-button

비밀번호 표시 상태 토글 버튼
show-password-icon

비밀번호 표시 상태에서 비밀번호 표시 상태 토글 버튼 내의 아이콘
hide-password-icon

비밀번호 숨김 상태에서 비밀번호 표시 상태 토글 버튼 내의 아이콘
supporting

하단 보조 정보 컨테이너(helper, error, counter 포함)
helper

하단의 도움말 텍스트
error

하단의 오류 설명 텍스트
counter

하단 오른쪽의 글자 수 통계
# 툴팁 컴포넌트 Tooltip 툴팁은 특정 요소에 대한 보충 텍스트 힌트나 컨텍스트 정보를 제공하여 사용자가 해당 요소의 기능이나 용도를 더 잘 이해할 수 있도록 합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/tooltip.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` 사용 예시: ```html button ``` ## 예시 {#examples} ### 순수 텍스트 툴팁 {#example-plain} 기본값은 순수 텍스트 툴팁입니다. `content` 속성으로 툴팁의 내용을 설정할 수 있습니다. ```html button ``` `content` 슬롯을 통해 툴팁의 내용을 설정할 수도 있습니다. ```html button
title
content
 ``` ### 리치 툴팁 {#example-rich} `variant` 속성을 `rich`로 설정하면 리치 툴팁을 만들 수 있습니다. `headline` 속성으로 툴팁의 제목을, `content` 속성으로 툴팁의 내용을 설정할 수 있습니다. ```html button ``` `headline`, `content` 슬롯을 통해 툴팁의 제목과 내용을 설정할 수 있습니다. `action` 슬롯을 통해 툴팁의 작업 버튼을 설정할 수 있습니다. ```html button
Rich tooltip
Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.
Action ``` ### 위치 {#example-placement} `placement` 속성으로 툴팁의 위치를 설정할 수 있습니다. ```html
``` ### 트리거 방식 {#example-trigger} `trigger` 속성으로 툴팁의 트리거 방식을 설정할 수 있습니다. ```html button ``` ### 열기/닫기 지연 시간 {#example-delay} 트리거 방식이 `hover`일 때 `open-delay` 및 `close-delay` 속성으로 각각 툴팁 열기 및 닫기 지연 시간을 설정할 수 있습니다. 단위는 밀리초입니다. ```html button ``` ### 비활성화 상태 {#example-disabled} `disabled` 속성을 추가하면 툴팁을 비활성화할 수 있습니다. ```html button ``` ## mdui-tooltip API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'plain' | 'rich' 'plain'

툴팁의 모양입니다. 기본값은 plain입니다. 사용 가능한 값:

  • plain: 일반 텍스트, 간단한 한 줄 텍스트에 적합합니다.
  • rich: 리치 텍스트, 제목, 본문 및 작업 버튼을 포함할 수 있습니다.
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

툴팁의 위치입니다. 기본값은 auto입니다. 사용 가능한 값:

  • auto: 위치 자동 판단. variant="plain"일 때는 top을 우선 사용하고, variant="rich"일 때는 bottom-right를 우선 사용합니다.
  • top-left: 왼쪽 상단에 위치
  • top-start: 상단, 왼쪽 정렬
  • top: 상단, 중앙 정렬
  • top-end: 상단, 오른쪽 정렬
  • top-right: 오른쪽 상단에 위치
  • bottom-left: 왼쪽 하단에 위치
  • bottom-start: 하단, 왼쪽 정렬
  • bottom: 하단, 중앙 정렬
  • bottom-end: 하단, 오른쪽 정렬
  • bottom-right: 오른쪽 하단에 위치
  • left-start: 왼쪽, 상단 정렬
  • left: 왼쪽, 중앙 정렬
  • left-end: 왼쪽, 하단 정렬
  • right-start: 오른쪽, 상단 정렬
  • right: 오른쪽, 중앙 정렬
  • right-end: 오른쪽, 하단 정렬
open-delay openDelay true number 150

마우스 호버로 표시되는 지연 시간(밀리초)입니다.
close-delay closeDelay true number 150

마우스 호버로 숨겨지는 지연 시간(밀리초)입니다.
headline headline true string

툴팁의 제목입니다. variant="rich"일 때만 사용할 수 있습니다. slot="headline"을 통해서도 설정할 수 있습니다.
content content true string

툴팁의 콘텐츠입니다. slot="content"을 통해서도 설정할 수 있습니다.
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

트리거 방식입니다. 여러 값을 공백으로 구분하여 지정할 수 있습니다. 사용 가능한 값:

  • click: 클릭 시 트리거
  • hover: 마우스 호버 시 트리거
  • focus: 포커스 시 트리거
  • manual: 프로그래밍 방식으로만 툴팁을 열고 닫을 수 있습니다. 다른 트리거 방식을 함께 지정할 수 없습니다.
disabled disabled true boolean false

툴팁을 비활성화할지 여부를 설정합니다.
open open true boolean false

툴팁을 표시할지 여부를 설정합니다.
### 이벤트
이름 설명
open

툴팁 표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 툴팁 열림을 막을 수 있습니다.
opened

툴팁 표시 애니메이션이 완료되면 발생합니다.
close

툴팁 숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 툴팁 닫힘을 막을 수 있습니다.
closed

툴팁 숨김 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

툴팁의 트리거 대상 요소입니다. default slot의 첫 번째 요소만 대상 요소가 됩니다.
headline

툴팁의 제목입니다. variant="rich"일 때만 이 slot이 유효합니다.
content

툴팁의 콘텐츠로, HTML을 포함할 수 있습니다. 일반 텍스트만 포함하는 경우 content 속성을 대신 사용할 수 있습니다.
action

툴팁 하단의 버튼입니다. variant="rich"일 때만 이 slot이 유효합니다.
### CSS Parts
이름 설명
popup

툴팁의 컨테이너
headline

제목
content

본문
action

작업 버튼
### CSS 사용자 정의 속성
이름 설명
--shape-corner-plain

variant="plain"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--shape-corner-rich

variant="rich"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# 상단 앱 바 컴포넌트 TopAppBar 상단 앱 바는 페이지 상단에 핵심 정보와 관련 작업을 표시하여 사용자에게 명확한 탐색과 편리한 기능 접근성을 제공합니다. ## 사용법 {#usage} 컴포넌트 가져오기: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` 컴포넌트의 TypeScript 타입 가져오기: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` 사용 예시: (예시의 `style="position: relative"`는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.) ```html Title
``` **주의 사항:** 이 컴포넌트는 기본적으로 `position: fixed` 위치 지정을 사용하며, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 `body`에 `padding-top` 스타일을 추가합니다. 하지만 다음 두 가지 경우에는 기본적으로 `position: absolute` 위치 지정을 사용합니다: 1. `scroll-target` 속성이 지정된 경우. 이 경우 `scroll-target` 요소에 `padding-top` 스타일이 추가됩니다. 2. [``](/ko/docs/2/components/layout) 컴포넌트 내에 위치한 경우. 이 경우 `padding-top` 스타일이 추가되지 않습니다. ## 예시 {#examples} ### 지정된 컨테이너 내에 위치시키기 {#example-scroll-target} 기본적으로 상단 앱 바는 현재 창을 기준으로 페이지 상단에 표시됩니다. 상단 앱 바를 지정된 컨테이너 안에 넣으려면 `` 컴포넌트에 `scroll-target` 속성을 지정하면 됩니다. 속성값은 스크롤 가능한 내용의 컨테이너에 대한 CSS 선택자 또는 DOM 요소입니다. 이 경우 상단 앱 바는 부모 요소를 기준으로 표시됩니다(부모 요소에 `position: relative; overflow: hidden` 스타일을 직접 추가해야 합니다). ```html
Title
``` ### 형태 {#example-variant} `` 컴포넌트에 `variant` 속성을 사용해 상단 앱 바의 형태를 설정할 수 있습니다. ```html
Title
center-aligned small medium large
``` ### 페이지 스크롤 시 동작 {#example-scroll-behavior} `` 컴포넌트에 `scroll-behavior` 속성을 설정하여 페이지 스크롤 시 상단 앱 바의 동작을 정의할 수 있습니다. 여러 동작을 동시에 설정할 수 있으며, 공백으로 구분하면 됩니다. 스크롤 동작에는 다음이 포함됩니다: - `hide`: 페이지를 아래로 스크롤할 때 상단 앱 바를 숨기고, 위로 스크롤할 때 다시 표시합니다. - `shrink`: `variant` 속성이 `medium` 또는 `large`일 때만 유효합니다. 페이지를 아래로 스크롤할 때 상단 앱 바를 축소하고, 위로 스크롤할 때 확장합니다. - `elevate`: 페이지를 아래로 스크롤할 때 상단 앱 바에 그림자를 추가하고, 페이지가 맨 위로 돌아가면 그림자를 제거합니다. `scroll-threshold` 속성을 사용해 상단 앱 바의 스크롤 동작을 트리거할 스크롤 픽셀 수를 설정할 수 있습니다. (참고: 신속한 응답을 위해 `elevate` 스크롤 동작을 사용할 때는 `scroll-threshold` 속성을 설정하지 마세요.) **예시: 스크롤 시 숨기기** ```html
Title
``` **예시: 스크롤 시 그림자 추가** ```html
Title
``` **예시: 스크롤 시 축소** ```html
Title
``` **예시: 스크롤 시 축소 및 그림자 추가** ```html
Title
``` ### 확장 상태의 텍스트 {#label-large} `variant` 속성이 `medium` 또는 `large`이고 `scroll-behavior` 속성이 `shrink`인 상단 앱 바의 경우 `` 컴포넌트에 `label-large` 슬롯을 추가하여 확장 상태의 텍스트를 설정할 수 있습니다. ```html
접힌 상태의 제목입니다 펼쳐진 상태의 제목입니다
``` ## mdui-top-app-bar-title API ### Slots
이름 설명
기본

상단 앱 바의 제목 텍스트
label-large

확장 상태의 제목 텍스트
### CSS Parts
이름 설명
label

제목 텍스트
label-large

확장 상태의 제목 텍스트
## mdui-top-app-bar API ### 속성
HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값 설명
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

상단 앱 바의 모양입니다. 기본값은 small입니다. 사용 가능한 값:

  • center-aligned: 작은 앱 바, 제목 중앙 정렬
  • small: 작은 앱 바
  • medium: 중간 앱 바
  • large: 큰 앱 바
hide hide true boolean false

숨길지 여부를 설정합니다.
shrink shrink true boolean false

variant="small" 스타일로 축소할지 여부를 설정합니다. variant="medium" 또는 variant="large"일 때만 적용됩니다.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

스크롤 동작을 지정합니다. 여러 값을 공백으로 구분하여 동시에 사용할 수 있습니다. 사용 가능한 값:

  • hide: 스크롤 시 숨깁니다.
  • shrink: 중형, 대형 앱 바에서 사용 가능하며, 스크롤 시 작은 앱 바 스타일로 축소됩니다.
  • elevate: 스크롤 시 그림자를 추가합니다.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

스크롤 이벤트를 감지할 요소입니다. CSS 선택자, DOM 요소 또는 JQ 객체를 지정할 수 있습니다. 기본적으로 window 객체의 스크롤 이벤트를 감지합니다.
scroll-threshold scrollThreshold true number

스크롤 동작을 트리거하는 데 필요한 스크롤 거리입니다. 단위는 px입니다.
order order true number

<mdui-layout> 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 0입니다.
### 이벤트
이름 설명
show

표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 표시를 막을 수 있습니다.
shown

표시 애니메이션이 완료되면 발생합니다.
hide

숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 숨김을 막을 수 있습니다.
hidden

숨김 애니메이션이 완료되면 발생합니다.
### Slots
이름 설명
기본

상단 앱 바 내부의 요소
### CSS 사용자 정의 속성
이름 설명
--shape-corner

컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
--z-index

컴포넌트의 CSS z-index 값
# jq 도구 라이브러리 mdui에는 경량 JavaScript 도구 라이브러리가 내장되어 있으며, jQuery와 유사한 API와 체이닝 호출 방식을 제공하지만 용량은 jQuery의 6분의 1에 불과합니다. 이 도구 함수를 필요에 따라 가져올 수 있습니다: ```js import { $ } from 'mdui/jq.js'; ``` ## 핵심 {#api-core} ### `$()` {#dollar} 이 함수는 여러 가지 사용법이 있습니다: CSS 선택자를 매개변수로 전달하면 일치하는 요소를 포함하는 JQ 객체를 반환합니다. ```js $('.box'); ``` DOM 요소, 임의의 배열, NodeList 또는 JQ 객체를 전달하면 특정 요소를 포함하는 JQ 객체를 반환합니다. ```js $(document); ``` HTML 문자열을 전달하면 HTML에 따라 생성된 DOM을 포함하는 JQ 객체를 반환합니다. ```js $(`
`); ``` 함수를 전달하면 DOM 로드가 완료된 후 해당 함수를 호출합니다. ```js $(function () { console.log('DOM 로드됨'); }); ``` ## 확장 {#api-extend} ### `$.extend()` {#d-extend} 하나의 객체만 전달하면 해당 객체의 속성이 `$` 객체에 병합되어 `$`의 네임스페이스 아래에 새로운 기능을 추가하는 것과 같습니다. ```js $.extend({ customFunc: function () {}, }); // 그러면 다음과 같이 사용자 정의 메서드를 호출할 수 있습니다 $.customFunc(); ``` 두 개 이상의 객체를 전달하면 모든 객체의 속성이 첫 번째 객체에 추가되고 병합된 객체가 반환됩니다. 단, 값이 `undefined`인 속성은 병합되지 않습니다. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // 이때 첫 번째 객체와 반환값은 { key1: val1, key2: val2, key3: val3 } 입니다 ``` ### `$.fn.extend()` {#fn-extend} `$`의 프로토타입 체인에 메서드를 확장합니다. ```js $.fn.extend({ customFunc: function () {}, }); // 그러면 확장된 메서드를 다음과 같이 사용합니다 $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} 배열 또는 객체를 URL 쿼리 문자열로 직렬화합니다. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` 전달된 매개변수가 배열인 경우, 해당 배열의 형식은 [`.serializeArray()`](#serializeArray)에서 반환되는 형식과 일치해야 합니다. ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## 배열 및 객체 조작 {#api-array} ### `$.each()` {#d-each} 배열이나 객체를 순회합니다. 첫 번째 매개변수인 순회 대상 배열 또는 객체를 반환합니다. 콜백 함수의 첫 번째 매개변수는 배열의 인덱스 또는 객체의 키이고, 두 번째 매개변수는 배열 또는 객체의 해당 위치 값입니다. 콜백 함수 내에서 `this`는 배열 또는 객체의 해당 위치 값을 가리킵니다. 콜백 함수가 `false`를 반환하면 순회를 중지합니다. ```js // 배열 순회 $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // 결과: // 0:a // 1:b // 2:c ``` ```js // 객체 순회 $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // 결과 // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} 두 번째 배열의 요소를 첫 번째 배열에 추가하고 병합된 배열을 반환합니다. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} 배열에서 중복된 요소를 제거합니다. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} 배열이나 객체를 순회하고 콜백 함수의 반환값으로 구성된 새 배열을 반환합니다. 콜백 함수의 첫 번째 매개변수는 배열 또는 객체의 해당 위치 값이고, 두 번째 매개변수는 배열의 인덱스 또는 객체의 키입니다. 콜백 함수는 임의의 값을 반환할 수 있습니다. 배열을 반환하면 해당 배열이 펼쳐집니다. `null` 또는 `undefined`를 반환하면 해당 값은 무시됩니다. 콜백 함수 내부에서 `this`는 `window` 객체를 가리킵니다. ```js // 배열 순회 const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // 콜백 함수가 배열을 반환하면 배열이 펼쳐집니다 const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // 객체 순회 const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} 한 노드가 다른 노드를 포함하는지 판단합니다. 부모 노드가 자식 노드를 포함하면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## 데이터 타입 판단 {#api-type} ### `.is()` {#is} 컬렉션에 매개변수와 일치하는 요소가 하나라도 있는지 판단합니다. 일치하면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다. 매개변수는 CSS 선택자, DOM 요소, DOM 요소 배열, JQ 객체 또는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. 함수가 `true`를 반환하면 현재 요소가 매개변수와 일치하고, `false`를 반환하면 일치하지 않음을 의미합니다. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // 콜백 함수의 반환값으로 판단 $(document).is(function (index, element) { return element === document; }); // true ``` ## 객체 접근 {#api-object} ### `.length` {#length} 현재 컬렉션에 있는 요소의 개수를 반환합니다. ```js $('body').length; // 1 ``` ### `.each()` {#each} 현재 컬렉션을 순회하며 컬렉션의 각 요소에 대해 함수를 실행합니다. 함수가 `false`를 반환하면 순회를 중지합니다. 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} 현재 컬렉션을 순회하며 컬렉션의 각 요소에 대해 함수를 실행하고 함수 반환값으로 구성된 새 컬렉션을 반환합니다. 함수는 단일 데이터 또는 데이터 배열을 반환할 수 있습니다. 배열을 반환하면 배열의 요소가 순서대로 새 컬렉션에 추가됩니다. 함수가 `null` 또는 `undefined`를 반환하면 해당 값은 새 컬렉션에 추가되지 않습니다. 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result는 일치하는 요소의 값으로 구성된 JQ 객체입니다 ``` ### `.eq()` {#eq} 지정된 인덱스 위치의 요소만 포함하는 새 컬렉션을 반환합니다. ```js $('div').eq(0); // 첫 번째 요소만 포함하는 컬렉션 반환 $('div').eq(-1); // 마지막 요소만 포함하는 컬렉션 반환 $('div').eq(-2); // 끝에서 두 번째 요소만 포함하는 컬렉션 반환 ``` ### `.first()` {#first} 현재 컬렉션의 첫 번째 요소만 포함하는 새 컬렉션을 반환합니다. ```js $('div').first(); // 첫 번째 div만 포함하는 컬렉션 반환 ``` ### `.last()` {#last} 현재 컬렉션의 마지막 요소만 포함하는 새 컬렉션을 반환합니다. ```js $('div').last(); // 마지막 div만 포함하는 컬렉션 반환 ``` ### `.get()` {#get} 지정된 인덱스 위치의 요소를 반환합니다. 매개변수를 전달하지 않으면 컬렉션의 모든 요소로 구성된 배열을 반환합니다. ```js $('div').get(); // 모든 div 요소로 구성된 배열 반환 $('div').get(0); // 첫 번째 div 요소 반환 $('div').get(-1); // 마지막 div 요소 반환 ``` ### `.index()` {#index} 매개변수를 전달하지 않으면 현재 컬렉션의 첫 번째 요소가 형제 요소들 사이에서 차지하는 인덱스를 반환합니다. CSS 선택자를 전달하면 현재 컬렉션의 첫 번째 요소가 CSS 선택자와 일치하는 요소들 사이에서 차지하는 인덱스를 반환합니다. DOM 요소를 전달하면 현재 컬렉션에서 해당 요소의 인덱스를 반환합니다. JQ 객체를 전달하면 객체의 첫 번째 요소가 현재 컬렉션에서 차지하는 인덱스를 반환합니다. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} 현재 컬렉션의 하위 집합을 반환합니다. 두 개의 매개변수를 전달하여 하위 집합의 시작과 끝 위치(끝 위치의 요소는 포함하지 않음)를 지정할 수 있습니다. 두 번째 매개변수를 전달하지 않으면 시작 위치부터 컬렉션 끝까지의 모든 요소를 반환합니다. ```js // 컬렉션에서 세 번째(세 번째 포함) 이후의 모든 요소 반환 $('div').slice(3); // 컬렉션에서 세 번째부터 다섯 번째(세 번째 포함, 다섯 번째 미포함) 사이의 요소 반환 $('div').slice(3, 5); ``` ### `.filter()` {#filter} 현재 컬렉션에서 지정된 표현식과 일치하는 요소를 필터링합니다. 매개변수는 CSS 선택자, DOM 요소, DOM 요소 배열 또는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. 함수가 `true`를 반환하면 현재 요소가 유지되고, `false`를 반환하면 제거됩니다. ```js // .box 클래스를 가진 모든 div 요소 필터링 $('div').filter('.box'); // 선택된 모든 옵션 필터링 $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} 현재 컬렉션에서 지정된 표현식과 일치하지 않는 요소를 필터링합니다. 매개변수는 CSS 선택자, DOM 요소, DOM 요소 배열, JQ 객체 또는 `boolean` 값을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. 함수가 `true`를 반환하면 현재 요소가 제거되고, `false`를 반환하면 유지됩니다. ```js // .box 클래스가 없는 모든 div 요소 필터링 $('div').not('.box'); // 선택되지 않은 모든 옵션 필터링 $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS 클래스 {#api-css} ### `.hasClass()` {#hasClass} 컬렉션의 첫 번째 요소에 지정된 CSS 클래스가 있는지 판단합니다. ```js // 첫 번째 div 요소에 .item 클래스가 있는지 판단 $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} 컬렉션의 각 요소에 CSS 클래스를 추가합니다. 여러 클래스 이름은 공백으로 구분할 수 있습니다. 매개변수는 문자열 또는 CSS 클래스 이름을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 CSS 클래스 이름입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. ```js // 모든 div 요소에 .item 클래스 추가 $('div').addClass('item'); // 모든 div 요소에 .item1 및 .item2 클래스 추가 $('div').addClass('item1 item2'); // 콜백 함수가 반환하는 CSS 클래스를 모든 div 요소에 추가 $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} 컬렉션의 각 요소에서 지정된 CSS 클래스를 제거합니다. 여러 클래스 이름은 공백으로 구분할 수 있습니다. 매개변수는 문자열 또는 CSS 클래스 이름을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 CSS 클래스 이름입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. 매개변수를 전달하지 않으면 요소의 `class` 속성을 직접 제거합니다. ```js // 모든 div 요소에서 .item 클래스 제거 $('div').removeClass('item'); // 모든 div 요소에서 .item1 및 .item2 클래스 제거 $('div').removeClass('item1 item2'); // 콜백 함수가 반환하는 CSS 클래스를 모든 div 요소에서 제거 $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} 요소에 지정된 CSS 클래스가 있으면 삭제하고, 없으면 추가합니다. 여러 클래스 이름은 공백으로 구분할 수 있습니다. 매개변수는 문자열 또는 CSS 클래스 이름을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 CSS 클래스 이름입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. ```js // 모든 div 요소에서 .item 클래스 토글 $('div').toggleClass('item'); // 모든 div 요소에서 .item1 및 .item2 클래스 토글 $('div').toggleClass('item1 item2'); // 콜백 함수가 반환하는 CSS 클래스를 모든 div 요소에서 토글 $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## 노드 속성 {#api-attr} ### `.prop()` {#prop} 컬렉션의 첫 번째 요소의 JavaScript 프로퍼티 값을 가져옵니다. ```js // 첫 번째 요소의 checked 프로퍼티 값 가져오기 $('input').prop('checked'); ``` 두 개의 매개변수를 전달하면 컬렉션의 모든 요소에 지정된 JavaScript 프로퍼티 값을 설정합니다. 프로퍼티 값은 임의의 타입 값 또는 콜백 함수의 반환값일 수 있습니다. 콜백 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 프로퍼티 값이며, 함수 내부의 `this`는 현재 요소를 가리킵니다. 프로퍼티 값 또는 콜백 함수의 반환값이 `undefined`인 경우, 메서드는 요소의 원래 프로퍼티를 수정하지 않습니다. ```js // 모든 선택된 요소의 checked 프로퍼티 값을 true로 설정 $('input').prop('checked', true); // 콜백 함수의 반환값으로 프로퍼티 값 설정 $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` 객체를 전달하여 여러 프로퍼티를 동시에 설정할 수도 있습니다. ```js // 요소의 여러 프로퍼티 값 동시 설정 $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} 컬렉션의 모든 요소에서 지정된 JavaScript 프로퍼티 값을 삭제합니다. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} 컬렉션의 첫 번째 요소의 HTML 속성 값을 가져옵니다. ```js // 첫 번째 요소의 속성 값 가져오기 $('div').attr('username'); ``` 두 개의 매개변수를 전달하면 컬렉션의 모든 요소에 지정된 HTML 속성 값을 설정합니다. 속성 값은 문자열, 숫자 또는 속성 값을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 속성 값입니다. 함수 내부에서 `this`는 현재 요소를 가리킵니다. 속성 값 또는 콜백 함수의 반환값이 `null`인 경우, 메서드는 지정된 속성을 삭제하고, `undefined`인 경우 요소의 원래 속성을 수정하지 않습니다. ```js // 모든 선택된 요소의 속성 값 설정 $('div').attr('username', 'mdui'); // 콜백 함수의 반환값으로 속성 값 설정 $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` 객체를 전달하여 여러 속성을 동시에 설정할 수도 있습니다. ```js // 요소의 여러 속성 값 동시 설정 $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} 컬렉션의 모든 요소에서 지정된 HTML 속성을 제거합니다. 여러 속성 이름은 공백으로 구분할 수 있습니다. ```js // 컬렉션의 모든 요소에서 하나의 속성 제거 $('div').removeAttr('username'); // 컬렉션의 모든 요소에서 여러 속성 제거 $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} 컬렉션의 첫 번째 요소의 값을 반환합니다. 요소가 ``, ``, `