ํ๋ ํธ
๊ณ ์ ํ๋ฆฌ์ ์์๊ณผ ๋ณต์ฌ ๊ฒฐ๊ณผ ํผ๋๋ฐฑ์ ๋๋ค.
๋ ๊ณ์ด
ํ๋ฆฌ์ ํ๋ ํธ
์์ ๊ฒฌ๋ณธ์ ์ ํํ๋ฉด ํด๋น ๋ณ์๋ฅผ ๋ณต์ฌํฉ๋๋ค.
blue
violet
๊ฐ ์์ ๊ฒฌ๋ณธ์ ๋ ํ
๋ง์์ ๊ฐ์ ๊ณ ์ ํ๋ฆฌ์
๊ฐ์ ํ์ํฉ๋๋ค.
์ฌ์ฉ ์์น: ์์ ๊ฐ์ด๋.
์ฌ์ฉ๋ฒ๊ณผ ์ธํฐํ์ด์ค
DemoPalette๋ ์คํ
์ด์ง ์์ div.ui-palette๊ฐ ์๋ ํธ๋ ์ด๋ฅผ ๋ ๋๋งํฉ๋๋ค. ๊ฐ ๊ณ์ด์๋ ์ด๋ฆ์ด ์๋ ui-palette-row๊ฐ, ๊ฐ ๋จ๊ณ์๋ ui-palette-chip ๋ฒํผ์ด ์์ต๋๋ค. families๋ ์์กฐ๋ฅผ ์ ํํฉ๋๋ค. ๊ฐ ์นฉ์ var(--color-<family>-<step>)์ ๋ณต์ฌํ๊ณ ๊ณต์ ui-copy-status ์ค์ ๊ฒฐ๊ณผ๋ฅผ ์๋ฆฝ๋๋ค.
<DemoPalette families={["blue", "violet"]} /><div class="ui-palette"> <div class="ui-palette-row" role="group" aria-label="blue palette"> <span>blue</span> <button type="button" class="ui-palette-chip" aria-label="Copy color-blue-5" style="background-color: โฆ"></button> โฆ </div></div>ํ์ด์ง๊ฐ ์ข์ผ๋ฉด ๊ฐ ํ์ 7์ด๋ก ์ค๋ฐ๊ฟ๋๊ณ ๊ณ์ด ์ด๋ฆ์ ๊ทธ ์์ ํ์๋ฉ๋๋ค.