필터
필터 (Filters)
필터를 사용하면 사용자가 테이블, 데이터 목록, 카드 뷰 등 여러 곳의 데이터에서 콘텐츠를 좁혀 볼 수 있어요. 이 가이드라인은 다양한 필터 유형과 그 특성, 언제 어떤 필터를 써야 하는지를 설명해요.
출처: 문서
본문
필터 유형 (Filter types)
필터는 속성(attribute) 1개 또는 여러 개를 포함할 수 있어요. PatternFly 컴포넌트를 다양한 방식으로 조합해서 더 복잡한 필터링 경험을 만들 수 있어요. 이러한 서로 다른 필터 유형은 툴바 안에서 사용하거나 단독으로 사용할 수 있어요.
단일 속성으로 구성된 필터:
- 텍스트 입력 (Text entry)
- 단일 선택 (Single select)
- 체크박스 선택 (Checkbox select)
여러 속성으로 구성된 필터:
- 속성-값 (Attribute-value)
- 필터 그룹 (Filter group)
- 토글 그룹 (Toggle group)
- 패싯 필터 (Faceted filter)
필터 기능 (Filter features)
모든 유형의 필터에는 다음 속성 중 어떤 것이든 포함될 수 있어요:
- 필터 라벨(Filter labels): 메뉴가 닫혔을 때 사용자가 자신의 선택을 볼 수 있게 해주는 방식이에요.
- 타입어헤드(Typeahead): 사용자가 선택하려는 값을 찾을 때 옵션 목록을 좁혀 보게 해주는 방식이에요.
- 배지 개수(Badge count): 메뉴 안에서 몇 개의 선택이 이루어졌는지 나타내는 표시예요.
다음 표는 각 필터 유형에서 지원되는 기능을 정리한 거예요. 기능이 지원된다고 해서 반드시 필터에 사용해야 한다는 뜻은 아니에요.
| 필터 유형 | 필터 라벨 | 타입어헤드 | 배지 개수 |
|---|---|---|---|
| Text entry | 예 (속성 필터에서만) | 예 | 아니요 |
| Single select | 예 (속성 필터에서만) | 예 | 아니요 |
| Checkbox select | 예 | 아니요 (하지만 메뉴 안에 검색을 넣을 수 있음) | 예 |
| Attribute-value | 예 | 예 (체크박스 선택 제외) | 예 (체크박스 선택에서만) |
| Filter group | 예 | 예 (단일 선택에서만) | 예 (체크박스 선택에서만) |
| Toggle group | 아니요 | 아니요 | 아니요 |
| Faceted filter | 예 | 예 | 예 |
필터 라벨 (Filter labels)
필터가 적용되면 필터 라벨을 사용해 사용자가 무엇을 필터링하고 있는지 피드백을 줄 수 있어요.
- 필터 라벨: 사용자가 어떤 조건으로 필터링하고 있는지 보여줘요. 서로 다른 속성-값 쌍 사이의 부울(boolean) 관계를 보여줄 수 있어요. 각 라벨의 'x'를 클릭해 개별 필터 라벨을 제거할 수 있고, 그룹 'x'를 사용해 전체 필터 그룹을 제거할 수 있어요.
필터 라벨 사용 시 다음 모범 사례를 따르세요.
- 속성 카테고리 사이의 필터는 부울 "AND" 연산자로 결합해야 해요.
- 카테고리 안의 필터는 함께 그룹으로 표시되며 부울 "OR" 연산자로 결합해야 해요.
- 예: 항목은 Stopped "OR" Down 상태여야 하고 "AND" 공급업체가 Samsung "OR" Hewlett-Packard여야 합니다.
- 목록이 달리 정렬되어 있지 않다면 더 많은 필터를 충족하는 항목이 페이지 위쪽에 표시되어야 해요.
- 예: 공급업체로 Samsung과 Hewlett-Packard를 모두 가진 항목은 Samsung 또는 Hewlett-Packard만 가진 항목보다 위에 나열됩니다.
이 예시에서 결과는 상태가 stopped "OR" down "AND" 공급업체가 Samsung "OR" Hewlett-Packard "AND" 키워드와 일치하는 모든 항목을 보여주게 됩니다.
언제 사용하나요? (When to use)
다음과 같은 경우 필터 라벨을 사용하세요.
- 적용된 필터의 값이 컨트롤 자체에 표시되지 않을 때.
- 주어진 패싯에 값이 1개보다 많을 때.
- 적용되는 부울 필터 규칙이 있을 때.
컨트롤의 현재 설정만으로 적용된 필터를 충분히 전달할 수 있을 때는 필터 라벨을 사용하지 마세요.
타입어헤드 (Typeahead)
필터 드롭다운에서 선택할 항목의 수가 많을 때 필터에 타입어헤드 기능을 추가하면 유용해요. 사용자가 필드에 입력해서 필터링하려는 값을 빠르게 찾을 수 있어요.
타입어헤드는 1개의 입력을 처리할 수 있는 단일 선택, 패싯 필터에서 지원돼요. 사용자는 드롭다운 목록을 스크롤하거나 상자에 입력해서 원하는 옵션을 찾을 수 있어요.
언제 사용하나요? (When to use)
다음과 같은 경우 타입어헤드 필터를 사용하세요.
- 드롭다운 목록에 옵션 수가 많을 때. 이런 경우 타입어헤드는 사용자가 더 짧은 시간에 원하는 옵션을 찾게 도와줘요.
- 특정 경우, 텍스트박스 필터 대신 타입어헤드 필터를 사용할 수 있어요. 예를 들어 이름으로 필터링할 때, 타입어헤드 필터를 사용하면 유효한 필터만 표시되도록 보장해요. 이렇게 하면 잘못된 값이 입력되었을 때 빈 상태(empty state)를 제시할 필요가 없어요.
동작 (Behavior)
사용자가 새 값을 설정할 때마다 필터 쿼리가 트리거돼요. 다음은 앞선 예시에 나온 타입어헤드 필터 변형에 적용되는 트리거예요.
| 값 선택기 | 트리거 |
|---|---|
| Search field | 사용자가 입력하거나 입력 필드에 입력 후 Enter 키를 누릅니다. 이 동작은 필터링된 목록에 표시되는 첫 번째 값에 대한 필터를 생성합니다. |
| Select lists | 사용자가 목록의 항목을 선택하거나 선택 해제합니다. |
배지 개수 (Badge count)
배지는 개수를 나타내는 데 사용돼요. 필터에서는 배지를 다음과 같은 방식으로 사용할 수 있어요.
체크박스 선택의 배지 (Badge in checkbox select)
체크박스 선택에서 배지를 사용해 토글이 접혀 있을 때 사용자가 몇 개의 항목을 선택했는지 나타낼 수 있어요.
단일 속성의 변형 (Variations for 1 attribute)
사용자가 콘텐츠를 필터링하게 하는 다양한 방법이 있어요. 단일 필터링 방식에는 텍스트 입력 필터, 단일 선택, 체크박스 선택이 있어요.
텍스트 입력 필터 (Text entry filters)
텍스트 입력 필터는 사용자에게 뷰를 필터링할 값을 입력하는 입력 필드를 제공해요. 입력이 정확히 일치하는지 여부와는 무관해요. 텍스트 입력 필터는 검색 입력 컴포넌트(search input)를 사용하며, 버튼 유무에 관계없이 사용할 수 있어요.
- 기본 검색 입력(Basic search input): 사용자가 입력을 시작하는 즉시 자동으로 필터링합니다.
- 버튼이 있는 검색 입력(Search input with button): Enter 또는 화살표 버튼 클릭 시 필터링합니다.
텍스트 입력 필터의 플레이스홀더 텍스트는 사용자가 무엇을 필터링할 수 있는지 나타내야 합니다. 입력된 문자열이 단일 컬럼을 필터링하도록 제한된다면, 입력 필드의 플레이스홀더 텍스트는 "Filter by attribute name"으로 읽혀야 합니다. 입력된 문자열이 모든 컬럼을 필터링한다면, 플레이스홀더 텍스트는 대신 "Filter"로 읽혀야 합니다.
동작 (Behavior)
두 기본 필터 컴포넌트 모두 같은 최종 결과를 내지만, 검색이 언제 트리거되는지가 달라요. 검색 입력에서는 사용자가 입력하는 대로 테이블 데이터가 자동으로 필터링됩니다. 입력 그룹(input group)에서는 사용자가 Enter를 눌러야 검색이 적용되고 테이블 데이터 필터링이 시작됩니다.
참고: 두 기본 필터 컴포넌트 모두 사용자는 한 번에 1개의 입력으로만 필터링할 수 있어요.
언제 사용하나요? (When to use)
사용자에게 제한되지 않은(unbound) 데이터에서 값을 검색할 수 있는 기능을 제공하고 싶을 때 텍스트 입력 필터를 사용하세요. search input 컴포넌트를 사용하는 것이 선호되지만, 매번 키 입력 시마다 대규모 데이터셋을 쿼리하는 성능 문제가 걱정된다면 input group 컴포넌트를 사용하세요.
지원 기능 (Supported features)
텍스트 입력 필터는 필터 라벨을 지원하지만 타입어헤드와 배지는 지원하지 않아요.
텍스트 입력 필터에 필터 라벨은 지원되지만, 일반적으로는 중복을 피하기 위해 라벨을 표시하지 않는 걸 권장해요. 단, 텍스트 입력 필터가 속성-값 필터 안에서 사용될 때는 예외예요.
한 번에 1개의 값으로만 검색할 수 있으므로, 값은 이미 입력 필드에 표시됩니다. (다음 이미지 참고)
단일 선택 (Single select)
단일 선택은 사용자에게 고정된 값 집합을 제공하며 그중 1개의 값만 선택할 수 있어요. 이 필터 유형은 single select 컴포넌트를 사용해요.
단일 선택 필터가 툴바에서 유일한 필터라면, 기본으로 선택된 "All options" 메뉴 항목이 있어야 하며, 이는 필터가 선택되지 않은 것과 같은 역할을 해요.
다른 메뉴 항목이 선택되면 그것이 토글에 표시되어야 해요. "All options"를 선택하면 선택된 옵션이 재설정됩니다.
동작 (Behavior)
사용자에게 선택할 값 목록이 제시됩니다. 선택된 값은 값 오른쪽에 파란 체크 표시로 나타납니다. 값이 선택되면 해당 선택이 토글에 표시됩니다. 사용자가 다른 값을 선택하면 처음 선택한 값이 선택 해제되고, 새 값이 파란 체크 표시를 물려받아 토글에 반영됩니다.
언제 사용하나요? (When to use)
미리 정의된 옵션 목록에서 사용자가 1개의 옵션만 선택하게 하고 싶을 때 단일 선택 목록을 사용하세요.
지원 기능 (Supported features)
단일 선택에 타입어헤드 기능을 추가할 수 있어요. 사용자가 토글 안에서 검색을 입력해 표시되는 메뉴 옵션 목록을 좁힐 수 있게 해줍니다. 이는 사용자가 스크롤하기 불편한 아주 긴 목록에 특히 유용해요. 10개가 넘는 항목의 목록에는 타입어헤드를 권장합니다.
툴바에 있는 단독 단일 선택은 1개의 선택만 가능하고 그 선택이 이미 토글에 표시되므로 배지 개수나 필터 라벨을 사용하지 않아요.
체크박스 선택 (Checkbox select)
체크박스 선택은 사용자에게 고정된 값 집합을 제공하며 여러 값을 선택할 수 있어요. 이 필터 유형은 checkbox select 컴포넌트를 사용해요.
동작 (Behavior)
사용자에게 선택할 값 목록이 제시됩니다. 이 목록에서 사용자는 1개 이상의 값을 선택하거나 선택 해제할 수 있으며, 선택은 값 앞의 파란 체크박스로 표시됩니다. 사용자가 선택하는 동안 드롭다운은 사용자가 클릭해서 벗어나거나 직접 닫을 때까지 열려 있어야 합니다. 선택된 값은 필터 아래에 필터 라벨로 표시되어, 토글이 접혀 있어도 사용자가 자신의 선택을 볼 수 있게 해줍니다.
언제 사용하나요? (When to use)
미리 정의된 목록에서 여러 값을 선택할 때 체크박스 선택을 사용하세요. 여러 값은 논리적 "OR" 연산으로 결합됩니다.
지원 기능 (Supported features)
체크박스 선택의 지원 기능에는 필터 라벨과 선택적으로 배지가 포함돼요.
필터 라벨은 선택 메뉴가 접혔을 때 사용자가 모든 선택을 볼 수 있는 방식으로 사용됩니다.
배지는 선택이 몇 개 이루어졌는지 나타내기 위해 체크박스 선택 토글에 사용될 수 있지만 필수는 아닙니다.
체크박스 선택에는 타입어헤드가 지원되지 않지만, 사용자가 선택할 수 있는 항목 바로 위인 메뉴 안에 검색 입력을 추가할 수 있어요. 이렇게 하면 사용자가 옵션 목록을 필터링할 수 있습니다.
여러 속성의 변형 (Variations for multiple attributes)
단일 속성 필터의 변형을 여러 속성 필터로 결합하는 여러 방법이 있어요. 여기에는 속성-값 필터, 필터 그룹, 토글 그룹, 패싯 필터가 포함돼요.
속성-값 필터 (Attribute-value filter)
속성-값 필터는 사용자가 데이터셋을 필터링하기 위해 속성-값 쌍을 지정할 수 있게 해줘요.
다음 요소가 속성-값(텍스트박스) 필터를 구성해요.
- 속성 선택기(Attribute selector): 사용자가 필터링할 속성을 선택할 수 있게 하는 셀렉트 목록이에요.
- 값 선택기(Value selector): 필터에 값을 전달하는 데 사용되는 값 선택기예요. 값 선택기는 어떤 데이터 입력 컴포넌트든 될 수 있어요. 값 선택에 흔히 사용되는 컴포넌트:
- a. 키보드로 값을 입력하는 텍스트 입력 필드. 값을 비경계(unbounded) 데이터(예: 이름)로 입력할 때 사용하세요. 텍스트 입력 필드가 기본 검색 입력일 때 값은 자동으로 라벨로 나타나고 검색 검증이 시작됩니다. 텍스트 입력 필드가 버튼이 있는 검색 입력일 때 값은 라벨로 나타나고 사용자가 키보드의 Enter 키나 화살표 버튼을 누르면 검색이 검증됩니다.
- b. 미리 정의된 목록에서 값을 선택하는 단일 선택. 단독 단일 선택과 동일하게 동작하지만, 속성 필터에서는 어떤 선택이든 라벨을 만들기 때문에 메뉴에 "All" 옵션을 넣을 필요가 없어요. 사용자는 필터 라벨을 통해 필터를 재설정할 수 있으니까요.
- c. 미리 정의된 목록에서 여러 값을 선택하는 체크박스 선택. 여러 값은 논리적 "OR" 연산으로 결합됩니다.
- d. 날짜 범위를 선택하는 날짜 선택기(date picker). 필터링하려는 값이 날짜 및/또는 타임스탬프로 표현될 때 사용하세요.
동작 (Behavior)
속성-값 필터를 사용하려면 사용자는 먼저 왼쪽 토글로 필터링할 속성을 선택하고, 이어서 오른쪽 토글로 필터링할 특정 값을 선택해야 합니다. 속성 토글에서 선택한 것이 값 토글에 표시될 내용을 결정합니다.
값 토글은 "단일 속성의 변형" 섹션에서 설명한 대로 동작합니다. 여러 속성의 유일한 차이는 사용자가 속성 필터로 필터 선택을 할 때마다 각 선택이 항상 필터 아래에 라벨로 표시된다는 점입니다.
속성 필터를 사용할 때에도 사용자가 새 값을 설정할 때마다 필터 쿼리가 트리거됩니다. 다음은 위에 나온 속성-값 필터의 변형에 적용되는 트리거예요.
| 값 선택기 | 트리거 |
|---|---|
| Search field | 사용자가 입력을 시작하거나(검색 입력의 경우), Enter 키를 누르거나, 검색 버튼을 클릭(입력 그룹의 경우)합니다. |
| Select lists | 사용자가 목록의 항목을 선택하거나 선택 해제합니다. |
| Date picker | 사용자가 새 날짜 및/또는 시간을 선택합니다. |
언제 사용하나요? (When to use)
사용자가 필터링할 여러 속성을 가질 때 속성-값 필터를 사용하세요. 속성이 서로 다른 선택 형식을 사용할 때(예: 속성 A는 단일 선택, 속성 B는 체크박스 선택) 이 필터를 패싯 필터보다 사용해야 해요.
지원 기능 (Supported features)
속성-값 필터의 기능에는 필터 라벨, 배지, 타입어헤드가 포함돼요.
필터 라벨은 속성 필터에서 사용자가 속성 필터 사이를 전환할 때와 선택 메뉴가 접혔을 때 모든 선택을 볼 수 있게 하는 방식으로 강력히 권장됩니다.
배지는 몇 개의 선택이 이루어졌는지 나타내기 위해 체크박스 선택 값 선택기 토글에 사용될 수 있습니다.
타입어헤드는 사용자가 검색을 좁힐 수 있게 하며 체크박스 선택을 제외한 모든 값 선택 유형에서 지원됩니다. 체크박스 선택에는 타입어헤드가 지원되지 않지만, 사용자가 선택할 수 있는 항목 위인 메뉴 안에 검색 입력을 추가할 수 있습니다.
필터 그룹 (Filter group)
필터 그룹은 툴바 안에 나란히 나타나는 필터 집합이에요. 이 필터 유형은 select list 컴포넌트를 사용해요.
단일 선택만 있는 필터 그룹
- 옵션이 선택되면 토글에 반영됩니다.
- 기본 선택은 필터가 적용되지 않았음을 나타내는 "All attribute-name"이어야 합니다. 이 옵션은 사용자가 적용했을 수 있는 필터를 지울 수 있게도 해줍니다.
여러 선택 유형이 있는 필터 그룹
단일 선택, 체크박스 선택, 날짜 선택기가 있는 필터 그룹. 선택이 없을 때 토글에는 속성 이름이 포함되어야 합니다.
선택이 이루어지면 동작은 선택 유형에 따라 달라집니다:
- 단일 선택: 선택이 토글에 나타납니다.
- 체크박스 선택: 선택된 필터 수가 담긴 배지를 더해 속성 이름이 토글에 유지됩니다.
- 날짜 선택기: 선택이 토글에 나타납니다.
모든 경우에 선택은 필터 아래에 필터 라벨로 나타나야 합니다.
언제 사용하나요? (When to use)
보여주고 싶은 속성이 소수뿐일 때 필터 그룹을 사용하세요. 공간이 허락할 때만 이 필터를 사용하고, 그렇지 않으면 속성-값 또는 패싯 필터 사용을 고려하세요.
동작 (Behavior)
사용자가 목록의 항목을 선택하거나 선택 해제하거나, 날짜/시간 범위를 선택하면 필터 쿼리가 적용됩니다. 필터 그룹이 단일 선택만으로 구성된 경우 선택된 필터는 각 필터의 토글 안에 표시됩니다. 필터 그룹에 여러 선택 유형이 포함된 경우 선택된 필터는 필터 아래에 필터 라벨로 표시됩니다. 또한 각 필터에서 선택된 항목 수를 토글에 배지로 표시하도록 선택할 수도 있습니다. 필터 오른쪽의 clear filter 액션은 적용된 모든 필터를 제거합니다.
지원 기능 (Supported features)
필터 그룹은 필터 라벨, 배지, 타입어헤드를 지원해요.
필터 라벨은 체크박스 선택이 1개 이상 있는 필터 그룹에 권장됩니다. 필터 그룹이 단일 선택으로만 구성되어 있다면 개수가 항상 1이 되므로 필터 라벨을 추가할 필요가 없습니다.
배지는 해당 속성 필터에서 몇 개의 선택이 이루어졌는지 나타내기 위해 체크박스 선택 토글에 사용될 수 있습니다.
타입어헤드는 사용자가 검색을 좁힐 수 있게 하며 체크박스 선택을 제외한 모든 값 선택 유형에서 지원됩니다. 체크박스 선택에는 타입어헤드가 지원되지 않지만, 사용자가 선택할 수 있는 항목 위인 메뉴 안에 검색 입력을 추가할 수 있습니다.
토글 그룹 (Toggle group)
토글 그룹 필터는 사용자가 무언가를 필터링하기 위해 미리 정의된 서로 다른 요소 집합에서 선택할 수 있게 해줘요. 이 필터는 toggle group 컴포넌트를 사용해요.
언제 사용하나요? (When to use)
사용자가 필터링할 필터 옵션이 몇 개뿐이고, 그 옵션을 셀렉트 목록에 숨기지 않으려 할 때 토글 그룹 필터를 사용하세요. 토글 그룹의 일반적인 용도는 차트 뷰를 필터링해서 데이터 포인트를 뷰에 포함하거나 제거하는 것입니다.
동작 (Behavior)
사용자가 선택한 토글에 따라 정보가 사용자에게 표시됩니다. 무언가가 선택되었다면 해당 정보가 필터링되고 있다는 의미입니다.
지원 기능 (Supported features)
토글 그룹은 필터 라벨, 배지, 타입어헤드를 사용하지도 지원하지도 않아요.
패싯 필터 (Faceted filter)
패싯 필터링은 항목을 여러 차원이나 패싯에 따른 카테고리로 설명할 수 있을 때 유용해요. 이 필터는 보통 그룹화된 체크박스 선택 목록(grouped checkbox select list) 컴포넌트를 사용해요.
패싯(체크박스) 필터에는 다음 요소를 사용할 수 있어요:
- 패싯(Facets): Status나 Vendor 같은 필터 값을 담고 있는 서로 다른 카테고리예요.
- 값(Values): 사용자가 필터링할 수 있는 것들이에요. 각 카테고리는 체크박스 선택으로 구성되며, 각 카테고리에서 여러 옵션을 선택할 수 있어요. 같은 패싯 필터 안에 2개의 선택 유형을 넣지 마세요.
- 패싯(Facets): 옵션 메뉴가 접히면 선택된 값이 이름 있는 그룹의 라벨로 표시되며, 패싯 이름이 그룹 라벨로 사용됩니다.
참고: 항목이 지정된 값 중 어느 것에도 해당하지 않을 수 있는 속성 목록에는 "Other" 옵션을 추가하는 것을 고려하세요.
언제 사용하나요? (When to use)
다음과 같은 경우 패싯 필터를 사용하세요.
- 사용자가 집합 안에 무엇이 있는지에 대한 충분한 지식 없이 항목 집합을 탐색할 때.
- 필터링할 항목의 중요한 특성이 대부분 색상, 상태, 가용성, 유통업체 같은 작고 분리된 선택 집합을 가진 특성(임의의 텍스트나 숫자 값, 예: 이름, 생성 날짜, 가용 공간이 아닌)일 때.
- 필터링할 패싯이 모두 체크박스 선택일 때.
항목의 중요한 특성이 대부분 개방형(open-ended) 값이거나 단일/다중 선택이 섞여 있다면 패싯 필터를 사용하지 마세요. 또한 공간이 제한되어 있다면 속성-값 필터 사용을 고려하세요.
동작 (Behavior)
사용자가 체크박스를 사용해 값을 선택하거나 선택 해제하면 새 필터가 적용되거나 제거됩니다. 배지 개수를 토글에 선택적으로 추가해 필터에서 이루어진 선택 수를 나타낼 수 있습니다. 선택은 필터 아래에 필터 라벨로 나타납니다. 패싯 사이에는 "AND" 관계가, 값 사이에는 "OR" 관계가 있다는 점에 유의하세요.
지원 기능 (Supported features)
패싯 필터는 필터 라벨, 배지, 타입어헤드를 지원해요.
필터 검증 (Filter validation)
필터에 제한이 있다면 필터 토글에 오류 상태를 표시해서 이러한 제한을 사용자에게 전달할 수 있어요. 필터 검증을 사용하고 싶을 수 있는 예:
- 자유 형식 텍스트 입력 검증이 필요할 때
- 사용자가 한 번에 적용할 수 있는 필터 개수에 제한이 있을 때
- 1개 속성에 선택할 수 있는 옵션 수에 제한이 있을 때
필터에서 오류 검증을 사용할 때는 무엇이 잘못되었는지 설명하는 툴팁을 호버 시 포함하세요.
레이아웃 고려 사항 (Layout considerations)
필터는 툴바 안에 포함될 수 있고 보통 왼쪽 정렬돼요. 단일 툴바에 1개보다 많은 필터를 사용할 수 있고, 어떤 경우에는 커스텀 필터가 툴바 전체를 구성할 수도 있어요. 필터는 툴바 밖에서 단독으로 사용할 수도 있어요.
모바일 고려 사항 (Mobile considerations)
반응형 뷰에서 필터는 필터 아이콘 안에 숨길 수 있어요. 클릭하면 툴바가 확장되어 필터를 드러냅니다. 필터 요소가 여러 개라면 단일 패싯 필터로 접힙니다. 모바일 뷰의 툴바에 대해 자세히 알아보려면 toolbar 디자인 가이드라인을 읽어보세요.
예시 (Examples)
- 데이터 목록 툴바의 필터 그룹
- 테이블 툴바의 속성 필터
콘텐츠 (Content)
필터 (Filters)
입력 필드의 필터 플레이스홀더 텍스트는 "Filter by [attribute name]."로 읽혀야 합니다. 모든 플레이스홀더 텍스트는 sentence case로 작성하세요.
예시: Filter by status, Filter by vendor
필터 지우기 (Clearing filters)
모든 필터를 지우는 옵션은 마지막 필터 라벨 뒤에 표시됩니다. sentence case로 "Clear filters"라고 읽혀야 합니다. 클릭하면 적용된 모든 필터를 제거하고 툴바를 단일 행으로 접습니다.