마커
마커
사물에 대한 모든 것을 한 단어로 압축한 캡슐: 상태, 이름, 버전, 카테고리. 코드와 상태가 하나의 헤더에서 나란히 서기 전까지는 두 개의 객체였습니다. 그 차이가 의미하는 바를 아무도 말할 수 없었습니다 — 그래서 형태는 하나이고, 톤은 그들을 구별하는 모든 것입니다. 그것이 담고 있는 것은 자유롭습니다: 단어, 숫자, 기호, 또는 이 셋 중 두 개. 원은 캡슐을 담을 공간이 없는 곳에 서 있으며, 행에서 걸려 있고 그 행의 텍스트 크기에 맞춰진 카운터가 여기서 유일하게 마커가 아닌 것입니다.
문장 중간에
읽히는 대로 분리된 단어: 버전, 단계, 카테고리. 중립적인 톤, 색이 있는 마커는 이미 그것이 표시하는 것에 대해 주장했기 때문에 — 그리고 문장에는 주장할 것이 없습니다.
버전 2.4는 출시됨 이 API는 사용 중단됨
카테고리들
서로를 구별하지만 순위를 매기지 않는 톤. 의미를 담고 있지 않습니다 — 세 번째가 다섯 번째보다 낫다는 것은 없습니다 — 이는 의미가 거짓이 되는 분류법에 사용 가능하게 만듭니다. 상태와 똑같이 착용됩니다: 같은 캡슐, 같은 리듬.
중립
ruby
grapefruit
bittersweet
sunflower
straw
grass
mint
teal
aqua
blue-jeans
plum
lavender
pink-rose
단어로 표현된 상태
문장이나 제목 옆에 발표되어, 열의 표시가 아닌 메시지입니다.
작업이 성공적으로 완료되었습니다
오류가 발생했습니다
주의하여 진행하세요
정보 제공을 위해
열두 개로 읽는 상태
열에서 중립적인 수치 옆의 체크는 두 개의 객체로 읽히고, 그것의 표는 잡음으로 읽힙니다. 여기서 색은 숫자를 감싸고 열은 한 번에 스캔됩니다 — 압축되어, 셀에 여유가 없습니다.
15
success
15
error
15
warning
15
info
15
running
15
pending
15
paused
15
play
15
skipped
15
disabled
담고 있는 것
상태가 무엇인지에 대한 단어, 몇 개인지에 대한 숫자, 둘 다 또는 아무것도 아닙니다. 숫자는 항상 나머지보다 한 걸음 뒤로 그려집니다: 상태를 수식하며, 상태가 아닙니다.
통과됨
15
통과됨15
나란히 있는 세 가지 형태
실제로 읽히는 자리의 동일한 정보. 원은 캡슐에 비해 너무 좁은 셀의 형태이며, 상태가 수량이라는 것을 보여줄 수 있는 유일한 것입니다 — 그리고 캡슐이 채우고 있는 색으로 그려집니다.
| 형태 | success | warning | error | skipped |
|---|---|---|---|---|
| 캡슐 | 15 | 15 | 15 | 15 |
| 원 |
원
단어가 아닌 원으로 표현된 상태, 열두 개로 읽히는 곳 — 실행 목록, 작업 행. 링은 색을 담고, 내부의 기호는 어떤 상태인지 말하며, 스택 양쪽의 마크업은 동일합니다.
success
error
warning
info
running
pending
paused
play
skipped
disabled
LED
밝혀진 점과 그 단어: 한 줄에서 한눈에 읽을 수 있는 상태, 요약 또는 서비스 목록에서 수십 개. 마커보다 작고, 원보다 조용함. 꺼짐은 점이 불이 꺼진 상태 — 0 카운트 —, 실행 중은 숨을 쉬는 상태.
success
info
running
warning
error
dev
off
cat-mint
34 정상
2 실행 중
0 오류
0 대기 중
카운트
아이콘이나 버튼의 모서리에서 알약처럼 보이는, 보기를 기다리는 수: 99 이상은 99+로 표시되며, 숫자 대신 단어(« 새로운 ») 또는 점으로 표시됨; 요청하지 않는 한 0일 때는 아무것도 없음. countApply()는 페이지가 변경될 때 현재 상태를 유지함.
2
받은 편지함 4
error 7
warning 14
success 21
info 28
accent 35
0으로 표시됨 0
수량인 상태
런은 수량이 있는 유일한 상태이므로, 그 링은 런이 도달한 만큼 그려집니다. Twig은 주어진 값을 인쇄합니다; 이후 이동하는 것은 브라우저의 일입니다.
0%
25%
50%
75%
100%
원 크기
마커 옆의 카운터
남은 유일한 구별, 그리고 그것은 의미에 관한 것이 아닙니다. 왼쪽에 카운터: 무엇인가 열두 개, 그것으로 이어지는 행에서 걸려 있고 그 행의 텍스트 크기에 맞춰져 있습니다. 오른쪽에 마커: 잘 된 무언가 열두 개, 독립적으로 서 있으며 토큰 크기에 맞춰져 있습니다. 메뉴 항목 옆의 수치는 카운터입니다; 파이프라인 열의 동일한 숫자는 마커입니다.
12
12
Vue
같은 컴포넌트, 구동됨: 유형이나 값을 전환하면 아크가 다시 그려지지 않고 이동합니다. 이는 상태가 독자의 눈앞에서 바뀔 예정일 때 앱이 배치하는 것입니다.
사용법
{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}