mirror of
https://github.com/discourse/discourse.git
synced 2025-04-19 17:19:15 +08:00
59ec86933a
The `DMultiSelect` component provides a customizable multi-select dropdown with support for both mouse and keyboard interactions.  ### Parameters #### `@loadFn` (required) An async function that returns the data to populate the dropdown options. ```javascript const loadFn = async () => { return [ { id: 1, name: "Option 1" }, { id: 2, name: "Option 2" }, ]; }; ``` #### `@compareFn` A function used to determine equality between items. This is particularly useful when working with complex objects. By default, `id` will be used. ```javascript const compareFn = (a, b) => { return a.name === b.name; }; ``` #### `@selection` An array of pre-selected items that will be displayed as selected when the component renders. ```javascript const selection = [ { id: 1, name: "Option 1" }, { id: 2, name: "Option 2" }, ]; ``` #### `@label` Text label displayed in the trigger element when no items are selected. ```javascript @label="Select options" ``` ### Named Blocks #### :selection Block for customizing how selected items appear in the trigger. ```javascript <:selection as |result|>{{result.name}}</:selection> ``` #### :result Block for customizing how items appear in the dropdown list. ```javascript <:result as |result|>{{result.name}}</:result> ``` #### :result Block for customizing how errors appear in the component. ```javascript <:error as |error|>{{error}}</:error> ``` ### Example Usage ```javascript <DMultiSelect @loadFn={{this.loadOptions}} @selection={{this.selectedItems}} @compareFn={{this.compareItems}} @label="Select options"> <:selection as |result|>{{result.name}}</:selection> <:result as |result|>{{result.name}}</:result> <:error as |error|>{{error}}</:error> </DMultiSelect> ``` Co-Authored-By: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com> --------- Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
113 lines
3.3 KiB
YAML
113 lines
3.3 KiB
YAML
en:
|
|
admin_js:
|
|
admin:
|
|
site_settings:
|
|
categories:
|
|
styleguide: "Discourse Styleguide"
|
|
js:
|
|
styleguide:
|
|
title: "Styleguide"
|
|
welcome: "To get started, choose a section from the menu on the left."
|
|
|
|
categories:
|
|
syntax: Syntax
|
|
atoms: Atoms
|
|
molecules: Molecules
|
|
organisms: Organisms
|
|
|
|
sections:
|
|
bem:
|
|
title: "BEM"
|
|
typography:
|
|
title: "Typography"
|
|
example: "Welcome to Discourse"
|
|
paragraph: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
date_time_inputs:
|
|
title: "Date/Time inputs"
|
|
menus:
|
|
title: "Menus"
|
|
multi_select:
|
|
title: "Multi select"
|
|
toasts:
|
|
title: "Toasts"
|
|
font_scale:
|
|
title: "Font System"
|
|
colors:
|
|
title: "Colors"
|
|
icons:
|
|
title: "Icons"
|
|
full_list: "See the full list of Font Awesome Icons"
|
|
forms:
|
|
title: "Forms"
|
|
buttons:
|
|
title: "Buttons"
|
|
dropdowns:
|
|
title: "Dropdowns"
|
|
categories:
|
|
title: "Categories"
|
|
bread_crumbs:
|
|
title: "Bread Crumbs"
|
|
navigation:
|
|
title: "Navigation"
|
|
navigation_bar:
|
|
title: "Navigation Bar"
|
|
navigation_stacked:
|
|
title: "Navigation Stacked"
|
|
categories_list:
|
|
title: "Categories List"
|
|
topic_link:
|
|
title: "Topic Link"
|
|
topic_list_item:
|
|
title: "Topic List Item"
|
|
topic_statuses:
|
|
title: "Topic Statuses"
|
|
topic_list:
|
|
title: "Topic List"
|
|
basic_topic_list:
|
|
title: "Basic Topic List"
|
|
footer_message:
|
|
title: "Footer Message"
|
|
signup_cta:
|
|
title: "Signup CTA"
|
|
topic_timer_info:
|
|
title: "Topic Timers"
|
|
topic_footer_buttons:
|
|
title: "Topic Footer Buttons"
|
|
topic_notifications:
|
|
title: "Topic Notifications"
|
|
post:
|
|
title: "Post"
|
|
post_list:
|
|
title: "Post List"
|
|
empty_example: "<PostList /> empty state"
|
|
populated_example: "<PostList /> populated state"
|
|
topic_map:
|
|
title: "Topic Map"
|
|
site_header:
|
|
title: "Site Header"
|
|
suggested_topics:
|
|
title: "Suggested Topics"
|
|
post_menu:
|
|
title: "Post Menu"
|
|
modal:
|
|
title: "Modal"
|
|
header: "Modal Title"
|
|
footer: "Modal Footer"
|
|
user_about:
|
|
title: "User About Box"
|
|
header_icons:
|
|
title: "Header Icons"
|
|
spinners:
|
|
title: "Spinners"
|
|
empty_state:
|
|
title: "Empty State"
|
|
tooltips:
|
|
title: "Tooltips"
|
|
description: "Description"
|
|
header: "Header"
|
|
hover_to_see: "Hover to see a tooltip"
|
|
char_counter:
|
|
title: "Character Counter"
|
|
placeholder: "Enter your text here..."
|
|
|