en-us.json

{
  "mainNav": {
    "design": "DevUI Design",
    "components": "Components",
    "icons": "Icon Sets",
    "versions": "Versions"
  },
  "themePicker": {
    "theme": "Theme",
    "color": "Theme Color",
    "mode": "Theme Mode",
    "light": "Light Theme",
    "dark": "Dark Theme",
    "follow": "Follow System",
    "largeSize": "Large FontSize",
    "default": "Default",
    "extend": "Extend",
    "customize": "Customize",
    "customizeDark": "Dark",
    "customizeDownloadConfig": "Download Theme Config",
    "customizeDownloadConfigHelp": "Usage",
    "infinity": "Infinity",
    "sweet": "Sweet",
    "deep": "Deep",
    "provence": "Provence",
    "galaxy": "Galaxy"
  },
  "public": {
    "overview": {
      "title": "Components Overview",
      "description": "DevUI provides rich basic UI components for web applications. We will continue to explore the best UI practices of enterprise-level applications. Welcome to DevUI.",
      "placeholder": "Enter the component",
      "newChange": "UPDATED",
      "sunset": "Sunset",
      "lookingCmp": "Is the components you're looking for?",
      "suggestCmp": "Recommended Components",
      "filter": "Filter",
      "newChangeCmps": "Components with new changes",
      "recentlySuggestCmps": "Recently suggest components"
    },
    "start": "Getting Started",
    "themeDoc": "Customize Theme Docs",
    "globalDoc": "Customize Global Config",
    "versions": "Changelog",
    "whenToUse": "When To Use",
    "goTo": "Go To"
  },
  "codebox": {
    "showCode": "Show Code",
    "hideCode": "Hide Code",
    "copyCode": "Copy Code",
    "codesandbox": "Edit On CodeSandbox",
    "stackblitz": "Edit On StackBlitz",
    "success": "Success"
  },
  "components": {
    "accordion": {
      "name": "Accordion",
      "type": "Navigation",
      "path": "accordion",
      "description": "Navigation for your websites.",
      "tmw": "Accordion is used when you need to set a menu list navigation.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Transfer a menu to listen to the open/close event (menuToggle) or click event (itemClick) of an expandable menu that contains sub-items. By default, the open attribute is used for expandable menus, the active attribute is used for clicking menus, and the disabled attribute is used for disabled items. Set restrictOneOpen to specify whether to display only one level-1 menu.",
        "Only one level-1 menu can be expanded.": "Only one level-1 menu can be expanded.",
        "Embedded menu (no shadow)": "Embedded menu (no shadow)",
        "Content 1": "Content 1",
        "Subcontent 1": "Subcontent 1",
        "Subcontent 2": "Subcontent 2",
        "Subcontent 3": "Subcontent 3",
        "Content 2 (overlong, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long": "Content 2 (overlong, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long",
        "Subcontent 1 (Extremely long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long,": "Subcontent 1 (Extremely long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long,",
        "Content 3 (expanded by default)": "Content 3 (expanded by default)",
        "Subcontent 1 (disabled)": "Subcontent 1 (disabled)",
        "Subcontent 2 (activated by default)": "Subcontent 2 (activated by default)",
        "Content 4 (no sub-item)": "Content 4 (no sub-item)",
        "Content 5 (Disabled)": "Content 5 (Disabled)",
        "Content 6 (dynamic loading)": "Content 6 (dynamic loading)"
      },
      "changeKeyDemo": {
        "title": "Changing key value",
        "description": "Change the array key value through titleKey,childrenKey,disabledKey,activeKey to adapt to different interface types.",
        "Content 1": "Content 1",
        "Content 2 (expanded)": "Content 2 (expanded)",
        "Subcontent 1 (disabled)": "Subcontent 1 (disabled)",
        "Subcontent 2 (selected)": "Subcontent 2 (selected)",
        "Subcontent 3": "Subcontent 3"
      },
      "innerListTemplateDemo": {
        "title": "Using List Templates",
        "description": "Internal lists are used by developing innerListTemplate.",
        "test": "Content of content 2"
      },
      "linkDemo": {
        "title": "Built-in route and link type",
        "description": "Set linkType to switch the built-in route and link type. The default type is ''; Route type'routerLink' External link type:'hrefLink'; Determine the route or link type based on data: 'dependOnLinkTypeKey'.",
        "Route Link (Recommended)": "Route Link (Recommended)",
        "Native hyperlink (used in cross-site scenarios)": "Native hyperlink (used in cross-site scenarios)",
        "Hybrid link (used in some cross-site scenarios)": "Hybrid link (used in some cross-site scenarios)",
        "Basic components": "Basic components",
        "accordion": "accordion",
        "Anchor": "Anchor",
        "Button": "Button",
        "Advanced Component": "Advanced Component",
        "Table (Disabled)": "Table (Disabled)",
        "Dragging (Parameter Example)": "Dragging (Parameter Example)",
        "Others": "Others",
        "Icon Library": "Icon Library",
        "Home page": "Home page",
        "dragging": "dragging",
        "Home page (new window)": "Home page (new window)",
        "Home page (external link and open this window)": "Home page (external link and open this window)"
      },
      "multiLevelDemo": {
        "title": "Composite Hierarchy and Auto Expand",
        "description": "Multiple levels and no restriction on nesting levels are supported. You can use autoOpenActiveMenu independently to automatically expand the parent level of an activated menu.",
        "Automatically expand activated menus": "Automatically expand activated menus",
        "Content 1 (menu only)": "Content 1 (menu only)",
        "Content 2 (menu and content)": "Content 2 (menu and content)",
        "Subcontent 1": "Subcontent 1",
        "Subcontent 2": "Subcontent 2",
        "Subcontent 3": "Subcontent 3",
        "Content 3 (menu and content)": "Content 3 (menu and content)",
        "Subcontent 1 (with sublists)": "Subcontent 1 (with sublists)",
        "Subcontent 2 (with sublists)": "Subcontent 2 (with sublists)",
        "Sub-sub-content 1": "Sub-sub-content 1",
        "Sub-sub-content 2": "Sub-sub-content 2",
        "Sub-content 3": "Sub-content 3",
        "Content 4 (no content in the sublist)": "Content 4 (no content in the sublist)"
      },
      "templateDemo": {
        "title": "Using a Template",
        "description": "Expandable menus and clickable menus use different templates. You can expand the menuItemTemplate or click the menu to specify an itemTemplate. No contentTemplate is specified for the data template. You can run the showNoContent command to control whether to expand the content when there is no data. The loadingTemplate parameter is specified in the loading template. The value of loadingKey of an item controls whether to display the loading status.",
        "Reset": "Reset",
        "Number of clicks:": "Number of clicks:",
        "Not open yet. Please wait...": "Not open yet. Please wait...",
        "It's loading hard.": "It's loading hard.",
        "Content 1": "Content 1",
        "Content 2": "Content 2",
        "Content 3": "Content 3",
        "Content 4 (customized template without data)": "Content 4 (customized template without data)",
        "Content 5 (Customizing the Template Being Loaded)": "Content 5 (Customizing the Template Being Loaded)",
        "The expandable menu node must have a non-undefined child.": "The expandable menu node must have a non-undefined child.",
        "Subcontent 1": "Subcontent 1",
        "Subcontent 2": "Subcontent 2",
        "Subcontent 3": "Subcontent 3",
        "Subcontent 4": "Subcontent 4",
        "Subcontent 5": "Subcontent 5",
        "Subcontent 6": "Subcontent 6",
        "Subcontent 7": "Subcontent 7"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "use-built-in-routing-and-link-types": "Built-in route and link type",
        "using-templates": "Using a Template",
        "compound-level-and-auto-expand": "Composite Hierarchy and Auto Expand",
        "change-values": "Change key value"
      }
    },
    "input-group": {
      "name": "input-group",
      "type": "Data entry",
      "path": "input-group",
      "description": "Adds a prefix or suffix to the content of one or more class text boxes and provides the adaptive stitching effect.",
      "tmw": "Scenario where the content of multiple text boxes needs to be combined.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "It can contain one or more text box components. Line breaks are not allowed."
      },
      "responsiveDemo": {
        "title": "Responsive usage",
        "description": "It can be spliced based on the container width.",
        "alarmRule": "Alarm Rule",
        "defaultRule": "Default Rule",
        "indicatorName": "Indicator Name",
        "indicatorNamePlaceholder": "Enter an indicator name.",
        "valueType": "Average",
        "valueTypes": "Average, Maximum, Minimum"
      },
      "embedDemo": {
        "title": "Embed Usage",
        "description": "Works with the text-input component and does not support adaptive stitching."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "responsive-usage": "Responsive usage",
        "embed-usage": "Embed Usage"
      }
    },
    "alert": {
      "name": "Alert",
      "type": "Feedback",
      "path": "alert",
      "description": "Display warnings to users.",
      "tmw": "When the page needs to send a warning message to users.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "There are 4 types of Alert: success, danger, warning, info, ghost."
      },
      "closableDemo": {
        "title": "Closable Prompt",
        "description": "The close button is displayed. Click to close the prompt."
      },
      "directionFadeInDemo": {
        "title": "Without Icon",
        "description": "Without default icon."
      },
      "slideMenuDemo": {
        "title": "Without Icon",
        "description": "Without default icon."
      },
      "ModalDemo": {
        "title": "Without Icon",
        "description": "Without default icon."
      },
      "fadeInOutDemo": {
        "title": "Without Icon",
        "description": "Without default icon."
      }
    },
    "icon": {
      "name": "Icon",
      "type": "General",
      "path": "icon",
      "description": "Common icon display scenarios",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Basic icon usage",
        "default": "Default icon",
        "operableIcon": "Interactive Icon",
        "operableIconwithSuffix": "Icon - text suffix",
        "operableIconwithPrefix": "Icon - text prefix",
        "customIcon": "Customized icon"
      },
      "iconGroupDemo": {
        "title": "Icon Group",
        "description": "Use Scenarios of Common Icon Groups",
        "operable": "Operatable icon group",
        "exitFullscreen": "Static icon group"
      },
      "anchorLinkValues": {
        "basic": "Basic",
        "icon-group": "Icon Group"
      }
    },
    "animations": {
      "name": "Animations",
      "type": "Extended Service",
      "path": "animations",
      "description": "DevUI provides smooth, efficient, and simple animations for typical web interaction scenarios to improve user interaction experience.",
      "tmw": "1. The appearance or disappearance of elements; 2. The element status changes.",
      "collapsedDemo": {
        "title": "Expand Collapse",
        "description": "Used for expand and collapse of elements on a page. It is represented by uniaxial change of the container size. It is often used for components such as accordion, tree, and panel."
      },
      "fadeInOutDemo": {
        "title": "Fade In Out",
        "description": "Used for elements appear or disappear that are stacked on a page and have hosts , It is represented by the transparency change of the content area and uniaxial change of the container size. It is often used for components such as dropDown, select and datePicker."
      },
      "flyInOutDemo": {
        "title": "Fly In Out",
        "description": "Used for elements stacked on the page and covering the entire page appear and disappear, It is represented by the transparency change of the content area and displacement of the content area, It is often used for components such as drawer"
      },
      "wipeInOutDemo": {
        "title": "Wipe In Out",
        "description": "Used for elements that are stacked on the page but not at the page edge appear or disappear, It is represented by the transparency change of the content area and slight displacement of the content area based on the y-axis. It is often used for components such as modal"
      },
      "animationIconDemo": {
        "title": "Adding an icon effect through a public class"
      },
      "anchorLinkValues": {
        "expand-collapse": "Expand Collapse",
        "fade-in-out": "Fade In Out",
        "fly-in-out": "Fly In Out",
        "wipe-in-out": "Wipe In Out",
        "icon-class": "Class control icon animation"
      }
    },
    "anchor": {
      "name": "Anchor",
      "type": "Navigation",
      "path": "anchor",
      "description": "Go to one part of the page that in a specified location of a page.",
      "tmw": "When you need to quickly jump to parts of a page.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "For details about the scrolling effect, see sticky.",
        "attention": "The component implements only the anchor function and can be used with sticky. For details about the scrolling effect, see sticky.",
        "base-info": "Basic Information",
        "issue-list": "Requirement List",
        "case-list": "Test Case List",
        "quarlity-result": "Quality evaluation",
        "The basic information is displayed.": "The basic information is displayed.",
        "The requirement list is displayed.": "The requirement list is displayed.",
        "The test case list is displayed.": "The test case list is displayed.",
        "The quality assessment is displayed here.": "The quality assessment is displayed here."
      },
      "asyncDemo": {
        "title": "Asynchronous Loading",
        "description": "Asynchronous loading is supported. You can load menus or contents first, and then click the button to switch the loading.",
        "Click to switch to asynchronous loading content.": "Click to switch to asynchronous loading content.",
        "Asynchronous loading menu": "Asynchronous loading menu",
        "Asynchronous loading of content": "Asynchronous loading of content",
        "base-info": "Basic Information",
        "issue-list": "Requirement List",
        "case-list": "Test Case List",
        "quarlity-result": "Quality evaluation",
        "The basic information is displayed.": "The basic information is displayed.",
        "The requirement list is displayed.": "The requirement list is displayed.",
        "The test case list is displayed.": "The test case list is displayed.",
        "The quality assessment is displayed here.": "The quality assessment is displayed here."
      },
      "hashDemo": {
        "title": "URL Hash Anchor",
        "description": "Hash link for URL anchors and update hash.",
        "base-info": "Basic Information",
        "issue-list": "Requirement List",
        "case-list": "Test Case List",
        "quarlity-result": "Quality evaluation",
        "The basic information is displayed.": "The basic information is displayed.",
        "The requirement list is displayed.": "The requirement list is displayed.",
        "The test case list is displayed.": "The test case list is displayed.",
        "The quality assessment is displayed here.": "The quality assessment is displayed here.",
        "Activating an anchor": "The address hash value is updated during anchor activation.",
        "Refresh Hash Address": "Refresh the address hash value to take effect.",
        "Click the anchor link in the Case List area.": "Click the anchor link in the Case List area.",
        "Click the Quality Evaluation anchor.": "Click the Quality Evaluation anchor.",
        "Initialize scrolling to the corresponding anchor point.": "Scroll to the corresponding anchor point only during initialization",
        "Scroll to the corresponding anchor to take effect": "Scroll to the corresponding anchor to take effect",
        "Jump to Requirements List via Hash and initialize": "Jump to Requirements List via Hash and reinitialize",
        "Jump to the Requirement List via Hash": "Jump to the Requirement List via Hash"
      },
      "scrollTargetDemo": {
        "title": "Replace Rolling Container",
        "description": "Replacing a Rolling Container Using ScrollTarget.",
        "base-info": "Basic Information",
        "issue-list": "Requirement List",
        "case-list": "Test Case List",
        "quarlity-result": "Quality evaluation",
        "The basic information is displayed.": "The basic information is displayed.",
        "The requirement list is displayed.": "The requirement list is displayed.",
        "The test case list is displayed.": "The test case list is displayed.",
        "The quality assessment is displayed here.": "The quality assessment is displayed here."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "asynchronous-loading": "Asynchronous Loading",
        "scroll-target": "Replace Rolling Container",
        "support-hash": "URL Hash Anchor"
      }
    },
    "auto-complete": {
      "name": "AutoComplete",
      "type": "Data entry",
      "path": "auto-complete",
      "description": "Guess what users may need when entering.",
      "tmw": "When you need to deduce the content that a user may want to enter according to some characters entered by the user.",
      "basicDemo": {
        "title": "Basic usage",
        "description": "Set source to the data source that is automatically completed."
      },
      "objectDemo": {
        "title": "Customized data matching method",
        "description": "You can use searchFn to customize the data matching method and the returned data format."
      },
      "customDemo": {
        "title": "Customized template display",
        "description": "Use itemTemplate and noResultItemTemplate to customize the drop-down list box and display no matching message."
      },
      "disabledDemo": {
        "title": "Disabled",
        "description": "You can set the disabled parameter to disable it in the text box and disable the options in the drop-down list box by using the disabledKey parameter.",
        "Search Results": "Search Results"
      },
      "latestDemo": {
        "title": "Latest input",
        "description": "Set latestSource to the latest input."
      },
      "lazyLoadDemo": {
        "title": "Enable lazy load",
        "description": "enableLazyLoad: enables lazy loading."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "auto-object": "Customized data matching method",
        "auto-custom": "Customized template display",
        "auto-disable": "Disabled",
        "auto-latest": "Latest input",
        "auto-lazy-load": "Enable lazy load"
      }
    },
    "editormd": {
      "name": "Markdown",
      "type": "Data entry",
      "path": "editormd",
      "description": "Markdown Editor.",
      "tmw": "When you need to edit Markdown files.",
      "defaultDemo": {
        "title": "Basic usage",
        "description": "Displays the default basic functions of editor-md and supports bidirectional binding.",
        "Current value of content.": "Current value of content:",
        "Switching Modes": "Switching Modes",
        "The input cannot be empty.": "The input cannot be empty.",
        "Initialization Title": "Initialize the header. Do not use bidirectional binding to transfer values.",
        "Bidirectional binding": "Bidirectional binding",
        "preview": "preview",
        "edit": "edit",
        "changeMode": "Change mode."
      },
      "toolbarDemo": {
        "title": "Customized toolbar",
        "description": "Change the toolbar order and add custom buttons. The custom buttons support multiple input modes. (In this example, the Reference and Preview buttons are added.).",
        "Open Preview": "Open Preview",
        "Turn off preview": "Turn off preview",
        "Customizing Button Sequence and Display": "Customizing Button Sequence and Display and Reference Buttons",
        "Initialize when init": "Initialization is required during initialization to obtain the template reference.",
        "Default toolbarConfig of the editor": "The default toolbarConfig of the editor is as follows:",
        "quoting": "quoting"
      },
      "xssDemo": {
        "title": "Customized XSS filtering rules",
        "description": "Customizing a specified tag filtering rule.",
        "This is the input content.": "This is the input content.",
        "Defines a custom attribute.": "A custom attribute is defined here. This attribute is added to the custom trustlist in XSS. You can see that this attribute is rendered when you view the elements on the console.",
        "Another custom property is defined": "Another custom attribute is defined here. This attribute is not added to the XSS trustlist. The console displays that this attribute is not rendered.",
        "Tag name.": "Tag name.",
        "Current tag trustlist attribute array": "Current tag trustlist attribute array"
      },
      "renderDemo": {
        "title": "Render md text separately",
        "description": "Render md text separately.The content added by CustomParse will not enter the XSS filtering.",
        "This is the input content.": "This is the input content.",
        "Defines a custom attribute.": "A custom attribute is defined here. This attribute is added to the custom trustlist in XSS. You can see that this attribute is rendered when you view the elements on the console.",
        "Another custom property": "Another custom attribute is defined here. This attribute is not added to the XSS trustlist. The console displays that this attribute is not rendered.",
        "relative link": "relative link",
        "Tag name.": "Tag name.",
        "Current tag trustlist attribute array": "Current tag trustlist attribute array",
        "Added Text": "Here is the text added by the customized parse method,",
        "The content is not filtered by the trustlist.": "This command will be executed after the markdown is parsed. The content will not be filtered by the trustlist."
      },
      "parseDemo": {
        "title": "Customized parse method",
        "description": "The customized parse method processes the final output HTML.",
        "Initialization Content": "Initialization Content",
        "Added Text": "I am customizing what I add in the parse method, and I will be at the end anyway."
      },
      "imageDemo": {
        "title": "Configure image file upload",
        "description": "Configuring Image File Upload.After setting imageUploadToServer, the editor will also monitor the paste operation, and if there are pictures, the imageUpload event will also be triggered.",
        "Select an image to upload.": "Select an image and upload it to the server.",
        "After imageUploadToServer is set": "After imageUploadToServer is set, the editor listens on the paste operation. If an image exists, the imageUpload event is triggered.",
        "Open the file upload entry.": "Open the file upload entry.",
        "Selecting a picture type": "Select an image of the bmp/jpg/jpeg/png/gif/tiff type.",
        "Limit the image size.": "Select an image whose size is less than 1 MB.",
        "Uploading a file": "Uploading a file",
        "Failed to upload the image.": "Failed to upload the image."
      },
      "hintDemo": {
        "title": "Quick tips (@user)",
        "description": "This parameter can be used in scenarios such as @selecting users.",
        "Associated Member": "You can enter @ to associate a member and enter # to associate an order number.",
        "Set Search": "Sets the search time.",
        "User": "User",
        "Order No.": "Order No."
      },
      "markedDemo": {
        "title": "Customized rendering",
        "description": "Customizing the rendering rule from MD to HTML.",
        "Level-1 Title": "Level-1 Title",
        "Level-2 Title": "Level-2 Title",
        "Level-3 Title": "Level-3 Title",
        "Level-4 Title": "Level-4 Title",
        "Level-5 Title": "Level-5 Title",
        "Level 6 Title": "Level 6 Title"
      },
      "mermaidDemo": {
        "title": "Mermaid rendering",
        "description": "Suport rendering the flow chart , gantt chart, and sequence chart with mermaid.",
        "flowChart": "Flow chart",
        "gantt": "Gantt chart",
        "sequence": "Sequence chart"
      },
      "checkedDemo": {
        "title": "checkbox rendering",
        "description": "Support checkbox rendering。"
      },
      "latexDemo": {
        "title": "Latex Rendering",
        "description": "Mathematical Formula Rendering"
      },
      "tocDemo": {
        "title": "TOC rendering",
        "description": "Generating the TOC directory"
      },
      "plantumlDemo": {
        "title": "Plantuml rendering",
        "description": "Generating UML Diagrams"
      },
      "enormousTextDemo": {
        "title": "Processing a large amount of data",
        "description": "Manually obtain content, instead of sending back events in real time. Currently, no frame freezing occurs during editing. The rendering is delayed (experimental function).",
        "Generate 10,000 lines of data.": "Generate 10,000 lines of data.",
        "Output the content in the editing area.": "Contents in the editing area of the console output",
        "Initialization Title": "Initialize the header. Do not use bidirectional binding to transfer values.",
        "Incoming Initialization": "The value of initial content can be transferred.",
        "The change event is closed.": "If the change event is disabled, the content in the editing area is changed, and the event will not be triggered.",
        "For details, see codemirror.": "For details about the editorRef method, see the official codemirror document.",
        "Data": "This is the data in line ${i}."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic usage",
        "custom-toolbar": "Customized toolbar",
        "custom-xss": "Customized XSS filtering rules",
        "custom-render": "Customized rendering",
        "custom-parse": "Customized parse method",
        "img-upload": "Configure image file upload",
        "quick-suggestion": "Quick tips (@user)",
        "single-render-md": "Render md text separately",
        "mermaid-render": "Mermaid-render",
        "checked-render": "checkbox-render",
        "latex-render": "Latex-render",
        "toc-render": "TOC-render",
        "uml-render": "UML-render",
        "big-data-process": "Processing a large amount of data"
      }
    },
    "avatar": {
      "name": "Avatar",
      "type": "Data display",
      "path": "avatar",
      "description": "Display user's avatar.",
      "tmw": "When users want to display their own profile avatar.",
      "basicDemo": {
        "title": "Basic Rules",
        "description": "When the profile picture gadget transfers the name attribute, the profile picture field is displayed based on certain rules. For details, please see API.",
        "cnStart": "If the value starts with Chinese, the last two characters are used.",
        "enStart": "If the value starts with English, the first two characters are used.",
        "multi": "If there are multiple English names, use the first two letters of the name.",
        "others": "If the value does not start with Chinese or English, the first two characters are used."
      },
      "configDemo": {
        "title": "Basic Configuration",
        "description": "The width, height, and whether the avatar is a circular can be set. In addition, the display fields of the avatar can be customized, and the customized image can be transferred.",
        "smaller": "Sets the width. If the height is less than 30px, only one character is displayed.",
        "custome": "The customText field is transferred.",
        "img": "Import imgSrc:"
      },
      "specialDemo": {
        "title": "Special Display",
        "description": "The avatar component processes some special situations, for example, the user does not exist or the default avatar is displayed. For details, please see API.",
        "notExist": "If name, customText, and imgSrc are not transferred, the user who uses the avatar does not exist.",
        "beNull": "If the values of name, customText, and imgSrc are empty, the user who uses the avatar does not have a nickname and the default avatar is used."
      },
      "anchorLinkValues": {
        "basic-rules": "Basic Rules",
        "basic-configuration": "Basic Configuration",
        "special-display": "Special Display"
      }
    },
    "ImagePreview": {
      "name": "ImagePreview",
      "type": "Data display",
      "path": "ImagePreview",
      "description": "Preview one or more pictures.",
      "tmw": "Preview images or images in containers based on user input.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Run the image-preview command to preview images in the container."
      },
      "customDemo": {
        "title": "Customizing the preview window",
        "description": "Transfer subject to enable preview when next is triggered.",
        "previewImage": "Preview Picture"
      },
      "zIndexDemo": {
        "title": "Setting zIndex",
        "description1": "Set zIndex to control the level of the pop-up effect.Set backDropZIndex to control the level of the back drop effect of the pop-up.",
        "description2": "When zIndex is set to a value smaller than backDropZIndex, imagePreview is displayed below the back drop.",
        "description3": "You can disable imagePreview by Esc.",
        "previewImage": "Preview Picture"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "custom-usage": "Customizing the preview window",
        "z-index-usage": "Setting zIndex"
      }
    },
    "breadcrumb": {
      "name": "Breadcrumb",
      "type": "Navigation",
      "path": "breadcrumb",
      "description": "Show the current hierarchy of pages.",
      "tmw": "<div>1. When users want to know the current hierarchy.</div> <div>2. When Users want to quickly return to the previous page.</div> <div>3. When users want to navigate to any page at the same level.</div>",
      "basicDemo": {
        "title": "Basic Breadcrumbs",
        "itemText": "Define the display content through d-breadcrumb-item.",
        "sourceText": "Display default breadcrumbs by inputting source.",
        "content": "breadcrumbs"
      },
      "menuDemo": {
        "title": "Breadcrumbs with Dropdown menu"
      },
      "customDemo": {
        "title": "Customize",
        "breadText": "breadcrumbs",
        "anchorText": "Anchor",
        "btnText": "Button"
      },
      "sourceDemo": {
        "title": "Source Config"
      },
      "clickBlockDemo": {
        "title": "Click to intercept"
      },
      "anchorLinkValues": {
        "basic-breadcrumbs": "Basic Breadcrumbs",
        "source-config-breadcrumbs": "Source Config",
        "drop-down-breadcrumbs": "Breadcrumbs with Dropdown menu",
        "self-defined-breadcrumbs": "Customize",
        "click-block-breadcrumbs": "Click to block breadcrumbs"
      }
    },
    "back-top": {
      "name": "BackTop",
      "type": "Navigation",
      "path": "back-top",
      "description": "A button for returning to the top of the page.",
      "tmw": "When the page is too long, and the user wants to frequently return to the top to view related content.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Returns to the default style of the top button, 50px from the bottom, 30px on the right.",
        "default": "Default Style",
        "text": "After the function is enabled, slide down the scroll bar to view the default button on the top."
      },
      "customizeDemo": {
        "title": "Customize",
        "description": "You can customize the button style for the backTop. The width and height are limited to 40 px * 40 px. In addition, you can set the scrolling height of the button by setting visibleHeight.",
        "customizeStyle": "Customize the style of the back to top button. The width and height are limited to 40px * 40px.",
        "text": "Enable the switch and slide down the scroll bar to display the button.",
        "scrollHeight": "When the scrolling height reaches the value of visibleHeight, the button is displayed to the top."
      },
      "scrollDemo": {
        "title": "Scrolling Container",
        "description": "You can set the scrollTarget parameter to return to the top of a specified container."
      },
      "anchorLinkValues": {
        "back-top-basic": "Basic Usage",
        "back-top-customize": "Customize",
        "back-top-scroll-container": "Scrolling Container"
      }
    },
    "button": {
      "name": "Button",
      "type": "General",
      "path": "button",
      "description": "The button is used to start an instant operation.",
      "tmw": "When users want to mark or encapsulate a group of operation commands that respond to user clicks, and trigger the corresponding logic.",
      "button-primary": {
        "title": "Primary Buttons",
        "ok": "Confirm",
        "disabled": "Disabled"
      },
      "button-common": {
        "title": "Common Buttons",
        "cancel": "cancels",
        "disabled": "Disabled"
      },
      "button-primary-and-common": {
        "title": "Combinations of Primary & Common Buttons",
        "description": "When the primary and the common is used at the same time, a scene usually has only one primary button.",
        "ok": "ok",
        "cancel": "cancels",
        "last": "Previous",
        "next": "Next step"
      },
      "button-text": {
        "title": "Text Buttons",
        "ok": "ok",
        "cancel": "cancels",
        "disabled": "Disabled"
      },
      "button-danger": {
        "title": "Danger Buttons",
        "description": "Indicates key operations in the system, such as delete scenarios.",
        "purchase": "Buy"
      },
      "button-loading": {
        "title": "Loading Buttons"
      },
      "button-auto-focus": {
        "title": "Auto-focus Buttons",
        "description": "The autofocus button is used to automatically obtain the focus.",
        "ok": "ok",
        "cancel": "cancels"
      },
      "button-icon": {
        "title": "Icon Buttons",
        "new": "Newly created",
        "filter": "filtration",
        "newDisabled": "New Disabled",
        "filterDisabled": "Filter Disabled",
        "connect": "correlative",
        "run": "Execute",
        "connectDisabled": "Association Disabled",
        "runDisabled": "Execute Disable",
        "select": "Please select",
        "drop": "Select from the drop-down list box"
      },
      "button-size": {
        "title": "Button Size",
        "description": "There are four sizes of buttons. You can select a proper size based on the service scenario.",
        "tiny": "supersmall",
        "small": "trumpet",
        "normal": "Normal",
        "large": "large"
      },
      "button-groups": {
        "title": "Button Group",
        "description": "Put multiple buttons as a group into the button group container. The size of the button group can be set by size and mixed with the drop-down menu.",
        "text": "The button group has four sizes. You can set the size of all elements by setting the size.",
        "filter": "filtration",
        "new": "Newly created",
        "delete": "Deleted",
        "drop": "Click the drop-down button.",
        "itemOne": "Menu 1",
        "itemTwo": "Menu 2",
        "itemThree": "Menu 3"
      },
      "anchorLinkValues": {
        "button-primary": "Primary Buttons",
        "button-common": "Common Buttons",
        "button-primary-and-common": "Combinations of Primary & Common Buttons",
        "button-danger": "Danger Buttons",
        "button-text": "Text Buttons",
        "button-loading": "Loading Buttons",
        "button-auto-focus": "Auto-focus Buttons",
        "button-icon": "Icon Buttons",
        "button-size": "Button Size",
        "button-groups": "Button Group"
      }
    },
    "badge": {
      "name": "Badge",
      "type": "Data display",
      "path": "badge",
      "description": "Round logo of number in the upper right corner of the icon.",
      "tmw": "The badge is appeared at the upper right corner of the icon or the right of a list item. It's usually an icon that shows a message with a number to tell user what need to be handled.",
      "basicDemo": {
        "title": "Basic Badge",
        "description": "Basic badge type. When there is a package element, the badge and number are displayed in the upper right corner.",
        "basic": "Standard badge. The count parameter specifies the number of badges to be displayed. The status parameter specifies the status color of the badge.",
        "maxCount": "The maxCount parameter is used to set the maximum number of badges to be displayed. The default value is 99.",
        "statusColor": "The bgColor parameter is used to set the status color of the badge. The offset parameter is used to set the badge offset.",
        "position": "Set position to set the badge position.",
        "unread": "Unread messages"
      },
      "dotDemo": {
        "title": "Dotted Badge",
        "description": "Point badge type. When there is a package element and showDot is set to true, the dot is displayed in the upper right corner by default."
      },
      "countDemo": {
        "title": "Count Badge",
        "description": "When the badge is used independently and does not enclose any elements, only the badge status color and number are displayed.",
        "myCodeHub": "My Code Library",
        "myFocus": "My Concerns",
        "myManaged": "My Managed",
        "customFontColor": "Customizing text and background colors using textColor and bgColor",
        "code": "coded"
      },
      "statusDemo": {
        "title": "Status Badge",
        "description": "When the badge is used independently, does not contain any elements, and the showDot parameter is set to true, the badge is a status badge. Different color dots are displayed for different statuses."
      },
      "positionDemo": {
        "title": "Badge Position",
        "description": "Set position to set the badge position."
      },
      "customDemo": {
        "title": "Custom",
        "description": "The bgColor parameter is used to set the badge status color (the badge status color specified by status is invalid). The offset parameter is used to set the badge offset relative to the position.Customizing text and background colors using textColor and bgColor."
      },
      "anchorLinkValues": {
        "badge-basic": "Basic Badge",
        "badge-dot": "Dotted Badge",
        "badge-count": "Count Badge",
        "badge-status": "Status Badge",
        "position": "Badge Position",
        "custom": "Custom"
      }
    },
    "card": {
      "name": "Card",
      "type": "Data display",
      "path": "card",
      "description": "Card container.",
      "tmw": "This is a basic card container, which can contain text, list, picture, and paragraph. Generally used for overview.",
      "basicDemo": {
        "title": "Basic Usage",
        "cardTitle": "DEVUI best practice course",
        "cardContent": "DEVUI is an open-source, free-of-charge common solution for enterprise mid- and back-end products. Its design is based on \"simplicity\", \"immersive\", \"flexibility\", natural and humanistic combination."
      },
      "customDemo": {
        "title": "Customize Area",
        "cardTitle": "DEVUI best practice course",
        "text": "Updated on July 31 15:55"
      },
      "cardInteractiveDemo": {
        "title": "Interactive Card"
      },
      "mediaDemo": {
        "title": "With Images",
        "description": "You can use align to set the alignment mode of the d-card-actions operation area: start alignment, end alignment, and stretch alignment.",
        "cardTitle": "DEVUI best practice course",
        "cardContent": "DEVUI is an open-source, free-of-charge common solution for enterprise mid- and back-end products. Its design is based on \"simplicity\", \"immersive\", \"flexibility\", natural and humanistic combination."
      },
      "anchorLinkValues": {
        "card-basic": "Basic Usage",
        "card-with-media": "With Images",
        "card-interactive-usage": "Interactive Card",
        "card-custom": "Customize Area"
      }
    },
    "carousel": {
      "name": "Carousel",
      "type": "Data display",
      "path": "carousel",
      "description": "An area of carousel.",
      "tmw": "Used to display images or cards.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "triggerDemo": {
        "title": "Indicator & Toggle Arrow",
        "description": "If arrowTrigger is set to always, the arrow is permanently displayed. If dotTrigger is set to hover, it will switched when hover to the dots."
      },
      "autoplayDemo": {
        "title": "Automatic NVOD"
      },
      "withTransitionProgressDemo": {
        "title": "Show Transition Progress"
      },
      "customDemo": {
        "title": "Custom Operations"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "trigger-usage": "Indicator & Toggle Arrow",
        "autoplay-usage": "Automatic NVOD",
        "custom-usage": "Custom Operations",
        "with-transition-progress-usage": "Show Transition Progress"
      }
    },
    "checkbox": {
      "name": "CheckBox",
      "type": "Data entry",
      "path": "checkbox",
      "description": "Checkbox.",
      "tmw": "<div>1. Select multiple options from a group of options. </div> <div> 2. This operation can be used independently to switch between two states, which can be combined with the commit operation. </div>",
      "basicDemo": {
        "title": "Basic Usage",
        "selected": "Selected",
        "unselected": "Unselected",
        "customTitle": "Custom title",
        "selectedClose": "Selected status - disabled",
        "selectedDisable": "Disabled when selected",
        "unselectedDisable": "Disabled when unselected",
        "halfSelected": "Partially selected",
        "halfSelectedDisable": "Disabled in half-selected mode",
        "twoBind": "Bidirectional data binding",
        "Custom Selected Color": "Custom Selected Color",
        "Custom Half-Select Color": "Custom Half-Select Color",
        "Customizing a Label Template": "Customizing a Label Template"
      },
      "groupDemo": {
        "title": "Checkbox Group",
        "Input object array": "Input object array",
        "Input string array": "Input string array",
        "Disable Entire Group": "Disable Entire Group",
        "Custom Selected Color": "Custom Selected Color",
        "Selected status - disabled": "Selected status - disabled",
        "Multi-line checkbox": "Multi-line checkbox"
      },
      "conditionChangeDemo": {
        "title": "Stop Checkbox Switching",
        "description": "The switch status of the checkbox whose label is \"condition-based call-back forbidden\" is terminated based on the condition.",
        "Conditional Callback Allowed": "Conditional Callback Allowed",
        "Conditional judgment callback interception selected": "Conditional judgment callback interception selected"
      },
      "conditionGroupDemo": {
        "title": "Stop Checkbox Group Switching",
        "description": "The checkbox with the 'block' field cannot switch the status.",
        "stateNotSwitch": "The checkbox with the \"block\" field cannot switch the status.",
        "intercepts": "intercepts"
      },
      "anchorLinkValues": {
        "checkbox-basic": "Basic Usage",
        "tabs-group": "Checkbox Group",
        "condition-change": "Stop Checkbox Switching",
        "condition-group": "Stop Checkbox Group Switching"
      }
    },
    "common": {
      "name": "Common",
      "type": "General",
      "path": "common",
      "description": "Provide some common functions.",
      "tmw": "Can be used to deal with date string conversion, file download, a tag simulation, and lazy loading.",
      "lazyLoadDemo": {
        "title": "Lazyload Directive",
        "description": "Import the LazyLoadModule in the util module. The dLazyLoad instruction is used to respond to the loadMore event when the container is rolled to the bottom to implement lazy loading.",
        "p1": "Default Rolling Listening Host",
        "p2": "Scroll monitoring uses other elements, such as window."
      },
      "pipeDemo": {
        "dDatePipe": {
          "title": "DatePipe"
        },
        "dSafeNullPipe": {
          "title": "SafeNullPipe",
          "description": "When the data is '', null, undefined can be specified any character placeholder display,support for global configuration the default is: '--'"
        }
      },
      "browserDemo": {
        "title": "Current browser name and version"
      },
      "openURLDemo": {
        "title": "Open URL in A New Tag"
      },
      "iframePropagateDemo": {
        "title": "iframe Event Propagate API",
        "description": "Click event of iframe will pass to the parent element."
      },
      "clipboardDemo": {
        "title": "Copy to Clipboard Directive"
      },
      "helperDownloadDemo": {
        "title": "Download File"
      },
      "anchorLinkValues": {
        "lazy-load": "Lazyload Directive",
        "safe-null-pipe": "Safe Null Pipe",
        "browser-version": "Current browser name and version",
        "date-pipe": "Datepipe",
        "open-url": "Open URL in A New Tag",
        "download-file": "Download File",
        "iframe-propagate": "iframe Event Propagate API",
        "clipboard": "Copy to Clipboard Directive"
      }
    },
    "color-picker": {
      "name": "ColorPicker",
      "type": "Evolving",
      "path": "color-picker",
      "description": "A panel to enter or select colors.",
      "tmw": "When user want to select a color.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "tapDemo": {
        "title": "Used with Dropdown"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "with-dropdown": "Used with Dropdown"
      }
    },
    "design-link": {
      "name": "Link",
      "type": "Design tokens",
      "path": "design-link",
      "description": "Common style specifications of ng-devui.",
      "tmw": "When you want to query ng-devui related styles, scenario related styles, and changes of styles.",
      "hrefDemo": {
        "title": "Link",
        "description1": "1. Verify that the devui style sheet (devui.min.css) has been imported globally.",
        "description2": "2. Use class=\"devui-link\" to modify the style of <a>."
      },
      "anchorLinkValues": {
        "href-a": "Link"
      }
    },
    "design-color": {
      "name": "Color",
      "type": "Design tokens",
      "path": "design-color",
      "description": "Common style specifications of ng-devui.",
      "tmw": "When you want to query ng-devui related styles, scenario related styles, and changes of styles.",
      "colorDemo": {
        "title": "Color",
        "description1": "1. DevUI sorts color specifications, including common color values and dark mode color values, and lists the usage scenarios of these colors. To better control and display, DevUI classifies colors and names semantic variables.",
        "description2": "2. By `@import' ~ng-devui/styles-var/devui-var.scss '; `.The color variable can be used after being introduced.",
        "description3": "3. If the style sheet is a less file, '@import' ~ng-devui/styles-var/devui-var.less '; `, and change the variable prefix '$' to '@'.",
        "instance": {
          "title": "Instances",
          "description": "In this example, color variables are used, and the color blocks change with the theme switching.",
          "defaultTable": {
            "tab": "Default theme color comparison table",
            "colorVar": "Color variable",
            "normalColor": "Normal color value",
            "darkColor": "Dark Black Value",
            "themeValue": "Current Theme Color Value",
            "description": "Description"
          },
          "oldTable": {
            "tab": "Old theme color comparison table",
            "colorVar": "Color variable",
            "newVar": "New Variable",
            "normalColor": "Normal color value",
            "darkColor": "Dark Black Value",
            "description": "Description"
          },
          "colorSource": {
            "devui-global-bg": "Global background with background color",
            "devui-glass-morphism-bg": "Glass morphism background color",
            "devui-global-bg-normal": "Global white background",
            "devui-base-bg": "Base block background white",
            "devui-base-bg-dark": "Base Block Background Dark (Fixed)",
            "devui-brand": "Brand color",
            "devui-brand-foil": "brand color auxiliary color, positive color",
            "devui-brand-hover": "Brand color highlight (highlight)",
            "devui-brand-active": "Brand color active (dark)",
            "devui-brand-active-focus": "Brand color focus (heavy darkening)",
            "devui-contrast": "Brand color contrast, contrast, contrast, second brand color",
            "devui-text": "Body Text",
            "devui-text-weak": "Weakened text information (accordion subitem, table header)",
            "devui-aide-text": "auxiliary text, help information (breadcrumb)",
            "devui-aide-text-hover": "Hover color in auxiliary text and help information",
            "devui-aide-text-stress": "Accent color in auxiliary text and help information",
            "devui-placeholder": "Placeholder",
            "devui-light-text": "Font color on colored dark background (fixed)",
            "devui-dark-text": "Font color on tinted light background (fixed)",
            "devui-link": "Link text color",
            "devui-link-active": "Link text hover/active color",
            "devui-link-light": "Link text color on a dark background",
            "devui-link-light-active": "Link text hover/activate color on dark background",
            "devui-line": "Border divider, which is used only for borders.",
            "devui-dividing-line": "Content separation line, which is used to separate contents.",
            "devui-block": "Background color of a large non-collapsed block (for example, top navigation background color)",
            "devui-area": "Background color of the collapsible block (color of the expanded area)",
            "devui-danger": "Failure, Error, Alarm",
            "devui-warning": "Warning, caution type prompt",
            "devui-waiting": "Waiting",
            "devui-success": "Success, Correct",
            "devui-info": "Notification, General Prompt, Executing",
            "devui-initial": "Initialized, Not executed",
            "devui-unavailable": "Unavailable or Disabled",
            "devui-shadow": "shadow color",
            "devui-light-shadow": "Weak shadow color",
            "devui-icon-fill-weak": "Weakened icon fill color",
            "devui-shape-icon-fill": "Shape type svg icon fill color",
            "devui-shape-icon-fill-hover": "Shape type svg icon hover color",
            "devui-shape-icon-fill-active": "Shape type svg icon active color",
            "devui-shape-icon-fill-disabled": "Shape type svg icon disabled color",
            "devui-icon-text": "Text icon color, which is the same as the text color.",
            "devui-icon-bg": "svg Icon Background Color",
            "devui-icon-fill": "Grey fill color of the svg icon",
            "devui-icon-fill-hover": "svg Icon Gray Fill Color Hover Feedback Color",
            "devui-icon-fill-active": "svg Icon Highlight Fill Color (Active)",
            "devui-icon-fill-active-hover": "svg Icon Highlight Fill Color Hover Feedback Color",
            "devui-form-control-bg": "Form control background color",
            "devui-form-control-line": "Form control border color, which is the same as the border divider.",
            "devui-form-control-line-hover": "Form Control Border Hover Feedback Color",
            "devui-form-control-line-active": "Form Control Border Activation Color for Focus",
            "devui-form-control-line-active-hover": "Form Control Border Activation Color for Focus and Hover",
            "devui-list-item-active-bg": "List Type: Select Background",
            "devui-list-item-active-text": "List Type: Select the background and text, which is the same as the font color (fixed) on a colored dark background",
            "devui-list-item-active-hover-bg": "List Type: Select Background Hover Feedback Color (only for pagination)",
            "devui-list-item-hover-bg": "List Type Common Options Hover Background",
            "devui-list-item-hover-text": "List Type Normal Options Hover Background with Text",
            "devui-list-item-selected-bg": "List type: Select the selected row color. This parameter is used only for the table type.",
            "devui-list-item-strip-bg": "list type zebra color, used only for table classes",
            "devui-disabled-bg": "disabled Background Color",
            "devui-disabled-line": "disabled Border Color",
            "devui-disabled-text": "disabled Text Color",
            "devui-primary-disabled": "background color of the main button in disabled state",
            "devui-icon-fill-active-disabled": "svg Icon Activation State Disable Color",
            "devui-label-bg": "Default labeling option background color",
            "devui-connected-overlay-bg": "Single-layer background color of the pop-up menu with connection points",
            "devui-connected-overlay-line": "Single-layer border color of the pop-up menu with connection points",
            "devui-fullscreen-overlay-bg": "background color of the pop-up content layer in full screen mode (modal pop-up window)",
            "devui-feedback-overlay-bg": ": background color of the floating layer of the feedback type (toast or popover)",
            "devui-feedback-overlay-text": "Information Prompt Feedback Type Floating Layer Background Color with Text Color",
            "devui-embed-search-bg": "Background color of the nested search box without borders",
            "devui-embed-search-bg-hover": "Background color of the nested search box without borders",
            "devui-float-block-shadow": "special floating layer background color (to be corrected)",
            "devui-highlight-overlay": "Locally translucent global floating layer background color (such as bottom)",
            "devui-range-item-hover-bg": "Background color of the hover in the range (for example, the hover in the middle of the datepicker range)",
            "devui-primary": "Main button, same brand color",
            "devui-primary-hover": "Primary button hover",
            "devui-primary-active": "Primary button active",
            "devui-contrast-hover": "Hover the highlight button",
            "devui-contrast-active": "Highlight button active",
            "devui-danger-line": "Failure Border",
            "devui-danger-bg": "Failure background color",
            "devui-warning-line": "Warning Border",
            "devui-warning-bg": "Warning background color",
            "devui-info-line": "Notification Border",
            "devui-info-bg": "Notification background color",
            "devui-success-line": "Success border",
            "devui-success-bg": "Success background color",
            "devui-primary-line": "primary border",
            "devui-primary-bg": "Primary background color",
            "devui-default-line": "Default border",
            "devui-default-bg": "Default background color",
            "devui-connected-overlay-shadow": "Drop-down-menu shadow color",
            "devui-feedback-overlay-shadow": "Information feedback block shadow color"
          },
          "catalogs": {
            "basic": "Basic variable",
            "icon": "Icon",
            "form": "Form",
            "list": "List",
            "disable": "Disable",
            "specialBackground": "Special background color",
            "button": "Button",
            "status": "Status",
            "text": "Text/Icon",
            "brand": "Brand",
            "shadow": "Shadow",
            "border": "Border",
            "background": "Background",
            "others": "Others"
          },
          "catalogsList": {
            "text": "Text",
            "border": "Border",
            "background": "Background",
            "status": "Status/Function",
            "theme": "Theme Color"
          },
          "formColor": "Complete Swatches",
          "colors": {
            "global-bg": "Body with a light gray background",
            "bg-white": "Top navigation color, background color",
            "base-bg-white": "White background body",
            "block-bg-white": "Used in areas such as buttons and alert bar. In dark mode, the entire area is different from the common background color.",
            "brand-1": "Control Color",
            "brand-2": "Click the control color",
            "brand-3": "Select content background color, such as drop-down menu and table",
            "brand-4": "For light loading background color",
            "dark-1": "Main Information",
            "dark-2": "Help information, prompt information",
            "dark-3": "Placeholder",
            "dark-1-boxshadow-light": "Shadow Effect",
            "dark-1-boxshadow": "Shadow Effect",
            "dark-1-3": "In-table operation icon",
            "dividing": "Separation line color. The color is the same as gray-2.",
            "dropdown-overlay": "Used in the white area of the drop-down menu block. In dark mode, the color is slightly different from the common background color.",
            "font-dark": "Dark fonts for colored light backgrounds",
            "font-white": "For colored background",
            "full-screen-overlay": "Used for full-screen pop-up layers such as modal",
            "gray-1": "Main dividers, such as borders",
            "gray-2": "Minor divider",
            "gray-3": "Expand area color",
            "highlight-overlay": "Used for the bottom floating layer operation layer",
            "hover-control": "Mouse hover control",
            "hover-control-light": "Mouse-over control on a dark background",
            "hover-content": "Hover the mouse background color to enter the drop-down list and table.",
            "huawei-bg": "Top navigation color, background color",
            "huawei-red": "Top Menu Selection",
            "icon-gray-bg": "Gray background for the header buttons",
            "link": "Used for a label or link",
            "link-light": "Used for a tag or link on a dark background",
            "status-red": "Error, failure, and dangerous operation alarm color",
            "status-yellow": "Prompt",
            "status-waiting": "Waiting information",
            "status-green": "Success, Approved",
            "status-blue": "Running, Normal",
            "status-initial": "Initialization",
            "status-unavaliable": "Invalid, wait, rollback, and abort. The color is $gray-1.",
            "strip-color": "For table indirect rows",
            "tag-label-bgcolor": "Label type",
            "hwc-status-danger-border": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-danger-background": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-warning-border": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-warning-background": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-info-border": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-info-background": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-success-border": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-status-success-background": "is used to notify alerts and synchronize the HUAWEI CLOUD official website specifications.",
            "hwc-feedback-overlay-background": "is used for tooltips, popover, global toast in the upper right corner, and synchronization of HUAWEI CLOUD official website specifications",
            "hwc-feedback-overlay-font-color": "is used for tooltips, popover, global toast in the upper right corner, and synchronization of HUAWEI CLOUD official website specifications",
            "color-bg-primary": "For important buttons",
            "color-bg-primary-hover": "For important buttons",
            "color-bg-primary-active": "For important buttons",
            "hwc-drop-down-search": "Used for drop-down search box",
            "hwc-drop-down-search-hover": "is used to drop-down search box",
            "disabled-bg": "disabled background color",
            "disabled-border": "disabled border color",
            "disabled-content": "disabled content color"
          }
        }
      },
      "anchorLinkValues": {
        "color": "Color"
      }
    },
    "design-shadow": {
      "name": "Shadow",
      "type": "Design tokens",
      "path": "design-shadow",
      "description": "Common style specifications of ng-devui.",
      "tmw": "When you want to query ng-devui related styles, scenario related styles, and changes of styles.",
      "shadowDemo": {
        "title": "Shadow",
        "description1": "1. The component library provides shadow variables for users in different scenarios. The following table lists the names, values, and application scenarios of these variables.",
        "description2": "2. By `@import' ~ng-devui/styles-var/devui-var.scss '; `.The shadow variable can be used after being introduced. ",
        "description3": "3. If the style sheet is a less file, '@import' ~ng-devui/styles-var/devui-var.less '; `, and change the variable prefix '$' to '@'.",
        "instance": {
          "title": "Instance",
          "description": "Shading table",
          "description2": "Shadow color table",
          "defaultTable": {
            "tab": "Default Theme Shadow Table",
            "shadowName": "shadow variable name",
            "shadowValue": "shadow variable value",
            "themeValue": "Variable values in current theme",
            "description": "Description"
          },
          "oldTable": {
            "tab": "Old Theme Shadow Comparison Table",
            "shadowName": "shadow variable name",
            "newShadowName": "New variable name",
            "shadowValue": "shadow variable value",
            "description": "Description"
          },
          "colorTable": {
            "colorVar": "Color variable",
            "normalColor": "Normal color value",
            "darkColor": "Dark Black Value",
            "themeValue": "Current Theme Color Value",
            "description": "Description"
          },
          "shadows": {
            "devui-shadow-length-base": "Elements (such as cards) directly on the top of the page",
            "devui-shadow-length-slide-left": "Shadow that appears on the right edge when slides leftward (dataTable fixed right column slides leftward)",
            "devui-shadow-length-slide-right": "Shadow that appears on the left edge when slides rightward (dataTable fixes that the left column slides rightward)",
            "devui-shadow-length-connected-overlay": "Pop-up (overlay) layer with connection points (Drop-down menu for DatePicker Cascader Select TagsInput Pagination, etc.)",
            "devui-shadow-length-hover": "Where hover is involved",
            "devui-shadow-length-feedback-overlay": "Information Prompt Feedback Class (PopOver Tooltip Toast StepsGuide, etc.) and larger card",
            "devui-shadow-length-fullscreen-overlay": "Pop-up (overlay) layer without connection points (Drawer Modal ImagePreview, etc.)"
          },
          "oldShadows": {
            "hwc-shadow-1": "Card, Warning",
            "hwc-shadow-2": "Drop-down menu",
            "hwc-shadow-3": "tips, global prompt",
            "hwc-shadow-4": "Card component, floating",
            "hwc-shadow-5": "Buy Floating Layer",
            "hwc-shadow-6": "Button",
            "hwc-shadow-7": "Popup window",
            "hwc-shadow-8": "slider",
            "hwc-shadow-error": "Error message",
            "hwc-shadow-warn": "Alarm warning",
            "hwc-shadow-prompt": "Prompt",
            "hwc-shadow-success": "Success prompt",
            "hwc-shadow-dark": "Dark background shadow"
          },
          "shadowColor": {
            "devui-shadow": "shadow color",
            "devui-light-shadow": "Weak shadow color",
            "devui-connected-overlay-shadow": "Pop-up (overlay) layer with connection points shadow color",
            "devui-feedback-overlay-shadow": "Information Prompt Feedback Class shadow color",
            "devui-hover-shadow": "Dom hover shadow",
            "devui-float-block-shadow": "Special floating layer background color"
          }
        }
      },
      "anchorLinkValues": {
        "shadow": "Shadow"
      }
    },
    "design-font": {
      "name": "Font",
      "type": "Design tokens",
      "path": "design-font",
      "description": "Common style specifications of ng-devui.",
      "tmw": "When you want to query ng-devui related styles, scenario related styles, and changes of styles.",
      "fontDemo": {
        "title": "Font",
        "description1": "1. The component library provides font variables for users in different scenarios. The following table lists the names, values, and application scenarios of these variables.",
        "description2": "2. By `@import' ~ng-devui/styles-var/devui-var.scss '; `.The font variable can be used after being introduced.",
        "description3": "3. If the style sheet is a less file, '@import' ~ng-devui/styles-var/devui-var.less '; `, and change the variable prefix '$' to '@'.",
        "instance": {
          "title": "Instance",
          "description1": "I'm a page or card title.",
          "description2": "I am the body, help information, supplementary information",
          "tableTitle": "Font-related variable comparison table",
          "defaultTable": {
            "tab": "Default font-related variables",
            "fontName": "Font-related variable name",
            "fontValue": "Font-related variable values",
            "themeValue": "Variable values in current theme",
            "description": "Description"
          },
          "oldTable": {
            "tab": "Variants related to old fonts",
            "fontName": "Variable name of the old font",
            "newFontName": "Variable name related to the new font",
            "fontValue": "Font-related variable values",
            "description": "Description"
          },
          "fonts": {
            "devui-font-size-data-overview": "Data Overview",
            "devui-font-size-price": "Purchase price",
            "devui-font-size-modal-title": "pop-up window title and number",
            "devui-font-size-page-title": "Page Title",
            "devui-font-size-card-title": "Card Title",
            "devui-font-size": "Body, Help, Supplementary Information",
            "devui-font-size-icon": "Icon Size",
            "devui-font-size-sm": "Small Control Text Size",
            "devui-font-size-md": "Medium Control Text Size",
            "devui-font-size-lg": "Large Control Text Size",
            "devui-font-title-weight": "Title text weight",
            "devui-font-content-weight": "Content Text Thickness",
            "devui-line-height-base": "Standard row height"
          },
          "oldFonts": {
            "font-size-modal-title": "Title of the dialog box",
            "font-size-primary": "Page Title, Level-1 Card Title",
            "font-size-secondary-card-title": "Level-2 Card Title",
            "font-size-base": "Body, Help, Supplementary Information",
            "font-title-weight": "Title text weight",
            "font-content-weight": "Content text weight",
            "line-height-base": "Standard row height"
          }
        }
      },
      "anchorLinkValues": {
        "font": "Font"
      }
    },
    "design-border-radius": {
      "name": "BorderRadius",
      "type": "Design tokens",
      "path": "design-border-radius",
      "description": "Common style specifications of ng-devui.",
      "tmw": "When you want to query ng-devui related styles, scenario related styles, and changes of styles.",
      "cornerDemo": {
        "title": "border-radius",
        "description1": "1. The component library provides border-radius variables for users in different scenarios. The following table lists the names, values, and application scenarios of these variables.",
        "description2": "2. By `@import' ~ng-devui/styles-var/devui-var.scss '; `.The border-radius variable can be used after being introduced.",
        "description3": "3. If the style sheet is a less file, '@import' ~ng-devui/styles-var/devui-var.less '; `, and change the variable prefix '$' to '@'.",
        "instance": {
          "title": "Instance",
          "tableTitle": "Round Corner Variable Comparison Table",
          "table": {
            "cornerName": "Round variable name",
            "cornerValue": "Round variable value",
            "themeValue": "Round variable value in current theme",
            "description": "Description"
          },
          "borderRadius": {
            "devui-border-radius": "General round corner",
            "devui-border-radius-feedback": " Feedback Fillet",
            "devui-border-radius-card": "Card fillet"
          }
        }
      },
      "anchorLinkValues": {
        "border-radius": "border-radius"
      }
    },
    "design-animation": {
      "name": "Animation",
      "type": "Design tokens",
      "path": "design-animation",
      "description": "Common style specifications of ng-devui.",
      "tmw": "When you want to query ng-devui related styles, scenario related styles, and changes of styles.",
      "AnimationDemo": {
        "title": "Animation",
        "description1": "1. The component library provides border-radius variables for users in different scenarios. The following table lists the names, values, and application scenarios of these variables.",
        "description2": "2. By `@import' ~ng-devui/styles-var/devui-var.scss '; `.The animation variable can be used after being introduced.",
        "description3": "3. If the style sheet is a less file, '@import' ~ng-devui/styles-var/devui-var.less '; `, and change the variable prefix '$' to '@'.",
        "instance": {
          "title": "Instance",
          "tableTitle": "Animation Variable Comparison Table",
          "table": {
            "animationName": "Animation variable name",
            "animationValue": "Animation variable value",
            "description": "Description"
          },
          "animation": {
            "devui-animation-duration-slow": " dynamic effect duration parameter, which is usually used in scenarios such as large elements disappear and status changes.",
            "devui-animation-duration-base": " dynamic effect duration parameter, which is usually used in scenarios such as the disappearance of common elements and the status change.",
            "devui-animation-duration-fast": " dynamic effect duration parameter, which is usually used in scenarios such as the disappearance of small elements of the prompt type and the status changes.",
            "devui-animation-ease-in": "Element leaving effect curve, which is usually used in the scenario where an element disappears.",
            "devui-animation-ease-out": "Element entry dynamic effect curve, which is usually used in the scenario where an element appears.",
            "devui-animation-ease-in-out": " element transition dynamic effect curve, which is often used in content switching scenarios.",
            "devui-animation-ease-in-out-smooth": " element transition dynamic effect curve, which is usually used in suspension and highlight state switching scenarios.",
            "devui-animation-linear": "Linear dynamic effect curve, usually used in the scenario where the background mask layer disappears."
          }
        }
      },
      "anchorLinkValues": {
        "animation": "animation"
      }
    },
    "design-z-index": {
      "name": "Zindex Layer",
      "type": "Design tokens",
      "path": "design-z-index",
      "description": "Component library common style specifications.",
      "tmw": "View the styles, application scenarios, and changes of the component library.",
      "ZIndexDemo": {
        "title": "Layer",
        "description1": "1. The component library provides hierarchical variables for users in different scenarios. The following table lists the names, values, and application scenarios of these variables.",
        "description2": "2. Pass `@import '~ng-devui/styles-var/devui-var.scss'; `The level variables can be used after they are introduced.",
        "description3": "3. If the stylesheet is a less file, `@import' ~ng-devui/styles-var/devui-var.less '; `, and change the variable prefix '$' to '@';",
        "description4": "4. If a mask exists, the mask is based on the corresponding z-index value -1.",
        "description5": "5. Content layer. Set zIndex as required. The value of zIndex must be smaller than that of the temporary layer.",
        "description6": "6. Background layer. Set zIndex as required. The value of zIndex must be smaller than that of the content layer.",
        "title2": "Layer Rule",
        "description7": "According to the interaction mode, the content layer is classified into the background layer, content layer, and temporary layer. The sequence of the layers is as follows: Temporary layer > Content layer > Background layer. The sequence cannot be changed.",
        "subTitle1": "1. Temporary layer",
        "description8": "Temporary layer related to an operation or task. Generally, it carries tasks that need to be temporarily processed or feedback that needs to be received. It is higher than the content layer.",
        "description9": "There are two modes: one is that the content area cannot be operated and is disabled by the mask mask. The user must focus on the content of the pop-up window to continue other operations (pop-up window and modal drawer). The other is that the content area can be operated without a mask. (modeless drawer, lightweight pop-up window, floating menu, user guide)",
        "subTitle2": "2. Content layer",
        "description10": "Mainly carries page elements such as page information, components, and accordion.",
        "subTitle3": "3. Background layer",
        "description11": "The page background layer is always placed at the bottom of the page. The color of the page background layer is #EEF0F5, which is neutral and soft to highlight and focus the content layer.",
        "instance": {
          "title": "Instance",
          "tableTitle": "Hierarchical variable table",
          "table": {
            "zIndexName": "Layer variable name",
            "zIndexValue": "Level variable value",
            "description": "Description"
          },
          "zIndex": {
            "devui-z-index-full-page-overlay": " Full Screen Coverage Elements",
            "devui-z-index-pop-up": " prompt information, such as popover and tooltip",
            "devui-z-index-dropdown": "Dropdown menu, such as dropdown, compatible. Values to be redefined",
            "devui-z-index-modal": "Popup window",
            "devui-z-index-drawer": "Drawer Board",
            "devui-z-index-framework": "Framework element, header, sideMenu, etc."
          }
        }
      },
      "anchorLinkValues": {
        "z-index": "z-index"
      }
    },
    "codemirror": {
      "name": "CodeMirror",
      "type": "Extended service",
      "path": "codemirror",
      "description": "Code display.",
      "tmw": "Used to display logs, shell scripts or compile code.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Configuring themes and patterns."
      },
      "eventDemo": {
        "title": "Event Listening"
      },
      "anchorLinkValues": {
        "basic": "Basic Usage",
        "event": "Event Listening"
      }
    },
    "datatable": {
      "name": "DataTable",
      "type": "Data display",
      "path": "datatable",
      "description": "Displays row and column data.",
      "tmw": "<div>1. When a large amount of structured data need to be displayed.</div> <div>2. When complex operations such as data sorting, filtering, and customization are required.</div>",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Simple table, displaying list data\nTwo implementation modes are supported. Method 1 is implemented by customizing the head and body templates and the rows and cells in the templates. Method 2 is implemented by configuring columns."
      },
      "asyncDemo": {
        "title": "Asynchronously loading data, configuration columns, and empty data templates",
        "description": "Simulates asynchronous data loading, supports dynamic column configuration, and uses #noResultTemplateRef to configure an empty data template."
      },
      "cellMergeDemo": {
        "title": "Cell Merge",
        "description": "You can use properties such as colspan and rowspan to set cell combination. You can only customize the head and body templates and the rows and cells in the templates."
      },
      "checkOptionsDemo": {
        "title": "Customizing Table Selection",
        "description": "You can set checkOptions to configure the drop-down list box and the operations to be performed in the table header.\nTwo implementation modes are supported. Method 1 is implemented by customizing the head line, and method 2 is implemented by configuring columns."
      },
      "dragColumnDemo": {
        "title": "Column dragging",
        "description": "This field is a low-frequency operation and is not displayed by default. When you move the cursor to the table header, a flag is displayed, allowing users to quickly sort columns."
      },
      "dragRowDemo": {
        "title": "Row dragging",
        "description": "The DragDrop component can be used to drag rows in a table. You can only customize the head and body templates and the rows and cells in the templates."
      },
      "batchDragRowDemo": {
        "title": "Batch Row dragging",
        "description": "You can use the DragDrop component to drag rows in a table in batches. You can press Ctrl and select multiple rows and cells to drag them. You can only customize the head and body templates and the rows and cells in the templates."
      },
      "editableDemo": {
        "title": "Edit Cell",
        "description": "Two implementation modes are supported. Method 1 is implemented by customizing cells in the body template. Method 2 is implemented by configuring columns."
      },
      "expandRowDemo": {
        "title": "Extended Row",
        "description": "Two implementation modes are supported. Method 1 is implemented by customizing rows in the body template. Method 2 is implemented by defining tables by configuring columns and configuring input and row data."
      },
      "fixColumnDemo": {
        "title": "fixed column",
        "description": "If there are too many columns in a table, fixed columns facilitate data location and comparison when you swipe left or right on the screen. You can set fixedLeft and fixedRight to specify the columns.\nTwo implementation modes are supported. Method 1 is implemented by customizing the head and body templates and the rows and cells in the templates. Method 2 is implemented by configuring columns."
      },
      "fixHeightVirtualScrollDemo": {
        "title": "Table Header Fixed Virtual Scroll",
        "description": "Use fixHeader to set the table header fixed and enable virtual scrolling. The height is adaptive."
      },
      "headerGroupingDemo": {
        "title": "Header Group",
        "description": "Two implementation modes are supported. Method 1 is implemented by customizing colspan and rowspan of th in the head template. Method 2 is implemented by configuring advancedHeader of column."
      },
      "interactionDemo": {
        "title": "Table interaction",
        "description": "Supports column sorting, column filtering, customized filtering template, selection, and column width adjustment.\nTwo implementation modes are supported. Method 1 is implemented by customizing the head and body templates and the rows and cells in the templates. Method 2 is implemented by configuring columns."
      },
      "lazyDemo": {
        "title": "lazy loading",
        "description": "Use lazy to enable lazy loading. When the bottom of a table is scrolled, the loadMore event is triggered to implement lazy loading."
      },
      "maxHeightDemo": {
        "title": "Table Header Fixed",
        "description": "Use fixHeader to set the table header to be fixed so that the table header does not follow the scrolling process."
      },
      "mutiDragRowDemo": {
        "title": "Batch line dragging",
        "description": "You can use the DragDrop component to drag rows in a table in batches. You can press Ctrl and select multiple rows and cells to drag them. You can only customize the head and body templates and the rows and cells in the templates."
      },
      "virtualScrollTreeTableBasicDemo": {
        "title": "Tree table with a large amount of data Basic",
        "description": "To display 10,000 to 100,000 tree data records, use this table to ensure smooth operations."
      },
      "virtualScrollTreeTableOperationDemo": {
        "title": "Tree table with a large amount of data Operation",
        "description": "Basic operations, including adding, modifying, deleting, querying, copying, and cutting tree tables with a large amount of data."
      },
      "virtualScrollTreeTableInteractionDemo": {
        "title": "Tree table with a large amount of data Interaction",
        "description": "Advanced operations on tree tables with a large amount of data, including dragging, selecting, deleting, and inheriting most functions of the original table."
      },
      "virtualScrollTreeTableMultiDragDemo": {
        "title": "Draging Big Data Tree Tables in Batches",
        "description": "Hold down Ctrl to select and drag rows in batches."
      },
      "mutilStylesDemo": {
        "title": "Table Style"
      },
      "dynamicColDemo": {
        "title": "Dynamic Columns And Style"
      },
      "treeTableDemo": {
        "title": "Tree table",
        "description": "Configure the rendering tree table based on the nestedColumn attribute and the child and $isChildTableOpen fields of row data.\nTwo implementation modes are supported. Method 1 is implemented by customizing the head and body templates and the rows and cells in the templates. Method 2 is implemented by configuring columns."
      },
      "virtualScrollDemo": {
        "title": "Virtual scrolling",
        "description": "Use virtualScroll to enable virtual scrolling. The row height must be fixed and the same. If the row height is higher than the default 40px, virtualItemSize must be configured.\nIf there is no data in the initial state, set the height of the element whose class is `cdk-virtual-scroll-viewport`, and set the position of the `d-data-table` element and noResult template."
      },
      "allDemo": {
        "tab1": "Customizing a Template",
        "tab2": "Configuring columns"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "mutil-styles": "Table Style",
        "dynamic-cols": "Dynamic Columns And Style",
        "async-loading": "Asynchronous data loading",
        "table-interaction": "Table interaction",
        "table-check-options": "Customizing Table Selection",
        "lazy-loading-of-list-data": "Lazy loading",
        "virtual-scroll": "Virtual scrolling",
        "table-fixing": "Table Header Fixed",
        "fixed-virtual-scroll": "Table Header Fixed Virtual Scroll",
        "header-grouping": "Header Group",
        "edit-cell": "Edit Cell",
        "expand-row": "Extended Row",
        "tree-form": "Tree table",
        "fixed-column": "Fixed column",
        "column-dragging": "Column dragging",
        "cell-merge": "Cell Merge",
        "drag-row": "Row dragging",
        "muti-drag-row": "Batch Row dragging",
        "virtual-scroll-tree-table-basic": "Big Data Tree Table Basic",
        "virtual-scroll-tree-table-operation": "Big Data Tree Table Operation",
        "virtual-scroll-tree-table-interaction": "Big Data Tree Table Interaction",
        "virtual-scroll-tree-table-multi-drag": "Big Data Tree Table multiDrag"
      }
    },
    "datepickerPro": {
      "name": "DatePicker",
      "type": "Data entry",
      "path": "datepicker",
      "description": "Enter or select a date.",
      "tmw": "When users want to enter a date or click the input box to select a date."
    },
    "dashboard": {
      "name": "Dashboard",
      "type": "Experimental",
      "path": "dashboard",
      "description": "Dashboard supports various pendants.",
      "tmw": "Functions as a container to carry various types of content.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Supports drag-and-drop sorting, scaling, adding, deleting, resize, moving, and locking.",
        "addWidget": "Add a widget",
        "popWidget": "Delete the last widget",
        "coordinates": "Coordinates",
        "size": "Width and Height",
        "lock": "Lock",
        "position": "Location",
        "dragMove": "Drag Move",
        "dragSize": "Drag Size",
        "independentUse": "Independent use"
      },
      "configDemo": {
        "title": "More Settings",
        "description": "Supports read-only static configuration, floating configuration, continuous compact arrangement, external addition, and deletion.",
        "dragAdd": "Drag the card to the right.",
        "dragDelete": "Drag the dashboard card here to delete it.",
        "source": "Source:",
        "data": "Data",
        "drag": "Drag",
        "layout": "Layout",
        "columns": "Number of columns",
        "placeHolder1": "The value ranges from 1 to 12. For more than 12 columns, see the API configuration.",
        "rowHeight": "Row Height",
        "placeHolder2": "Number or character string, in pixels",
        "margins": "Margins",
        "minRowHeight": "Minimum row height",
        "placeHolder3": "Number. The value 0 indicates no restriction.",
        "maxRowHeight": "Maximum row height",
        "configuration": "Configuration",
        "static": "Static",
        "permittedOverhead": "Allow Overhead",
        "animation": "animation",
        "forbiddenMoving": "Forbidden Move",
        "forbiddenResizing": "Forbidden Resize",
        "showGrid": "Display Grid",
        "operation": "Operation",
        "autoArrangement": "Automatic Continuous Compact Arrangement"
      },
      "solutionDemo": {
        "title": "Solution",
        "description": "Provides a complete library addition solution"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "more-config": "More Settings",
        "solution": "Solution"
      }
    },
    "datepicker": {
      "name": "DatePicker",
      "type": "Data entry",
      "path": "datepicker",
      "description": "Enter or select a date.",
      "tmw": "When users want to enter a date or click the input box to select a date.",
      "basicDemo": {
        "title": "Basic Usage",
        "basic": "Basic Usage",
        "setCss": "Setting cssClass",
        "disableTitle": "In the disabled state, you can use this effect or set the value by referring to the dateRangePicker parameter."
      },
      "clearButtonDemo": {
        "clear": "purging",
        "today": "Today",
        "title": "Custom Clear Button",
        "description": "The clear button is added to customViewTemplate. The clearAll() button is used to trigger the clear operation.The clearAll() parameter can be transferred to define different reasons."
      },
      "templateDemo": {
        "selectYesterday": "Select Yesterday",
        "selectTomorrow": "Choose Tomorrow",
        "select": "Select",
        "title": "Custom Operation Area",
        "description": "Use customViewTemplate to customize the date or content in the operation area. You can use chooseDate(dateString: string) to set the date."
      },
      "formatDemo": {
        "reset": "Reset",
        "title": "formatting",
        "description": "Set the date format through dateFormat."
      },
      "limitDemo": {
        "title": "Max. and Min. Date Limit",
        "limit": "limit",
        "limitTogether": "simultaneous restriction"
      },
      "setModeDemo": {
        "title": "Set Mode ",
        "yearPicker": "Set year datePicker by mode='year'",
        "monthPicker": "Set year/month datePicker by mode='month'",
        "description": "Only the year or month or date can be selected. The specific day may not be required. For example, the year can be 1999, August 1994, or August 15th of 1994. If this parameter is not set, the default is date. There are two mode which are year and month."
      },
      "rangeDemo": {
        "selectToday": "Choose Today",
        "selectStart": "Select the iteration start date.",
        "selectWeek": "Select one week later",
        "selectEnd": "Select iteration end date",
        "title": "Range Date Picker",
        "description": "As with the Single Day Date Selector, the current date is selected by default when the Range Date Selector expands. The range date selector includes the start date selector and the end date selector. You can select a date."
      },
      "rangeClearDemo": {
        "clearTitle": "Date range selector: A parameter can be transferred to clearAll() to define different reasons. The everyRange method is for reference only. The business needs to process the parameter based on the site requirements.",
        "clear": "purging",
        "title": "Date Range Selector Custom Operation Area and Clear Button",
        "description": "Date range selector: A parameter can be transferred to clearAll() to define different reasons. The everyRange method is for reference only. The business needs to process the parameter based on the site requirements."
      },
      "rangePickerDemo": {
        "rangePicker": "Date Range Selector (auto-hide when selected):",
        "valuedRangePicker": "Assigned date range selector (default: left open when selected):",
        "cssRangePicker": "Date range selector (set cssClass):",
        "title": "Date Range Selector Integration Mode"
      },
      "rangeDisableDemo": {
        "rangePicker": "Date Range Selector:",
        "title": "Date Range Selector Forbidden",
        "description": "The disabled status of the datepicker is unavailable. You can perform the operation based on the service requirements."
      },
      "rangeFormatDemo": {
        "formaterRange": "Date range selector (set format):",
        "configRange": "Date Range Selector (set dateConfig):",
        "title": "Date Range Selector Formatting"
      },
      "rangeRestrictedDemo": {
        "limitRange": "The date range selector restricts the start and end ranges. The everyRange method is for reference only. The service side needs to process the method as required.",
        "limitStartRange": "Date Range Selector restricts the start range:",
        "limitEndRange": "Date Range Selector Limit To:",
        "title": "Date Range Selector Optional Range"
      },
      "rangeTimeDemo": {
        "dateTimeRange": "Date Time Range Selector:",
        "valuedTimeRange": "Date Time Range Selector has been assigned:",
        "title": "Date Range Selector Select Time"
      },
      "rangeTodayDemo": {
        "rangePicker": "Date Range Selector:",
        "selectYesterday": "Select Yesterday",
        "selectWeek": "Select Last Week",
        "selectToday": "Choose Today",
        "selectTomorrow": "Choose Tomorrow",
        "title": "Date Range Selector Custom Action Select Date",
        "description": "Select Date, together with rangeStart and rangeEnd to set a customized date."
      },
      "twoDatePickerDemo": {
        "twoRangePicker": "Hide after double date selector selection",
        "keepOpenedPicker": "Double date selector (set cssClass) remains open after the selection is complete.",
        "disabledPicker": "Disable the dual date selector (for reference only, or set by referring to dateRangePicker).",
        "title": "Double Date Selector"
      },
      "twoDatepickerFormatDemo": {
        "formaterRange": "Dual Date Selector Formatting",
        "configRange": "Setting dateConfig by Double Date Selector",
        "title": "Dual Date Selector Formatting"
      },
      "appendToBodyDemo": {
        "title": "Attached to the body"
      },
      "buttonDemo": {
        "title": "Date selection button",
        "description": "You can click the button to call the Datepicker."
      },
      "anchorLinkValues": {
        "datepicker-default": "Basic Usage",
        "datepicker-set-mode": "Set Mode",
        "datepicker-min-max": "Max. and Min. Date Limit",
        "datepicker-append-to-body": "Attached to the body",
        "datepicker-range": "Range Date Picker",
        "datepicker-range-basic": "Date Range Selector Integration Mode",
        "datepicker-range-format": "Date Range Selector Formatting",
        "datepicker-range-disabled": "Date Range Selector Forbidden",
        "datepicker-range-restricted-range": "Date Range Selector Optional Range",
        "datepicker-range-time": "Date Range Selector Select Time",
        "datepicker-clear-button": "Date Range Selector Custom Action Area, Clear",
        "datepicker-range-today": "Date Range Selector Custom Action Select Date",
        "datepicker-format": "formatting",
        "custom-view-template": "Custom Operation Area",
        "date-picker-clear-button": "Custom Clear Button",
        "date-picker-button": "Date selection button",
        "two-date-picker-basic": "Double Date Selector",
        "two-date-picker-format": "Dual Date Selector Formatting"
      }
    },
    "echarts": {
      "name": "Echarts",
      "type": "Extended service",
      "path": "echarts",
      "description": "Chart visualization.",
      "tmw": "Used to display statistics intuitively and visually.",
      "changeBgDemo": {
        "changeBg": "Modify Background Color",
        "clickChange": "Click to switch the background of the pie chart.",
        "title": "Changing the Chart Background Color",
        "description": "Real-time background color change."
      },
      "instanceDemo": {
        "listener": "Listening event",
        "clickTime": "clicks",
        "title": "Obtaining an Echarts Instance",
        "description": "Obtain the Echoarts instance and invoke the API."
      },
      "basicDemo": {
        "title": "Render a pie chart",
        "description": "Simple usage, rendering a pie chart."
      },
      "anchorLinkValues": {
        "render-pie": "Render a pie chart",
        "chart-bg": "Changing the Chart Background Color",
        "chart-ins": "Obtaining an Echarts Instance"
      }
    },
    "multi-auto-complete": {
      "name": "MultiAutoComplete",
      "type": "Data entry",
      "path": "multi-auto-complete",
      "description": "Match possible options of input.",
      "tmw": "When users want to select multiple options.",
      "defaultDemo": {
        "title": "Basic Usage",
        "description": "Set the data source through source.",
        "Please select": "Please select"
      },
      "arrayDemo": {
        "title": "Custom Matching Method",
        "description": "Use searchFn to customize the data matching method and returned data format. If you need to clear or copy data, you can use the customized button.",
        "Choose three options": "Select at least three options.",
        "emptied": "emptied",
        "replicated": "replicated",
        "Select Object": "Select Object",
        "Run the browser copy command.": "Run the browser copy command.",
        "Copy succeeded.": "Copy succeeded.",
        "Data replicated successfully": "The data was successfully copied to the clipboard."
      },
      "disabledDemo": {
        "title": "Use Disabled",
        "description": "Set disabled to disable the entire component, or pass disabledKey to disable a single option."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic usage",
        "auto-complete-array": "Custom matching method",
        "auto-complete-disabled": "Disabled"
      }
    },
    "form": {
      "name": "Form",
      "type": "Data entry",
      "path": "form",
      "description": "A form that supports data collection, verification, and submission, including check boxes, option boxes, text boxes, and drop-down list boxes.",
      "tmw": "Used for data collection, data verification, and data submission.",
      "basicDemo": {
        "title": "Basic usage",
        "description": "In basic usage, the label is above the data box.",
        "d-form-item-title": "Form item d-form-item",
        "d-form-item-description": "Indicates a form item, including the form label and a specific form input component.",
        "d-form-label-title": "Form item d-form-label",
        "d-form-label-description": "Indicates the form item label, which describes the form keyword, including the help information and whether the field is mandatory.",
        "d-form-control-title": "Control container d-form-control",
        "d-form-control-description": "Form item control container, which contains different form input components.",
        "d-form-operation-title": "Operation area container d-form-operation",
        "d-form-operation-description": "Operation area container, which is used to place elements such as buttons.",
        "That's the plan name.": "This is the plan name, the plan name, the plan name.",
        "Plan Name": "Plan Name",
        "Plan Description": "Plan Description",
        "Radio box": "Radio box",
        "Multiple options": "Multiple options",
        "Label Options": "Label Options",
        "Label": "Label",
        "switch": "switch",
        "Execution Date": "Execution Date",
        "Submit": "Submit",
        "cancels": "cancels",
        "Option": "Option",
        "Manual execution": "Manual execution",
        "Daily Scheduled Execution": "Daily Scheduled Execution",
        "Weekly scheduled execution": "Weekly scheduled execution",
        "Monday": "Monday",
        "tuesday": "tuesday",
        "Wednesday": "Wednesday",
        "thursday": "thursday",
        "friday": "friday",
        "Saturday": "Saturday",
        "Sunday": "Sunday",
        "Option (Multiple Choices with Delete)": "Option (Multiple Choices with Delete)"
      },
      "labelHorizontalDemo": {
        "title": "Label horizontal arrangement",
        "description": "Left-right layout of labels.",
        "Plan Name": "Plan Name",
        "Short Name": "Enter a short name that meets reading habits. The short name contains a maximum of 30 characters. It cannot be a system field or be the same as an existing field name.",
        "Plan Description": "Plan Description",
        "Radio box": "Radio box",
        "check box": "check box",
        "Label Options": "Label Options",
        "Single Option": "Single Option",
        "Label": "Label",
        "switch": "switch",
        "Execution Date": "Execution Date",
        "Submit": "Submit",
        "cancels": "cancels",
        "Select your execution cycle": "Select your execution period. You are advised to select Monday, Wednesday, or Friday.",
        "Option": "Option",
        "Manual execution": "Manual execution",
        "Daily Scheduled Execution": "Daily Scheduled Execution",
        "Weekly scheduled execution": "Weekly scheduled execution",
        "Monday": "Monday",
        "tuesday": "tuesday",
        "Wednesday": "Wednesday",
        "thursday": "thursday",
        "friday": "friday",
        "Saturday": "Saturday",
        "Sunday": "Sunday",
        "Option (Multiple Choices with Delete)": "Option (Multiple Choices with Delete)"
      },
      "modalDemo": {
        "title": "Pop-up form",
        "description": "Pop-up form. The recommended pop-up box size is 400px, 550px, 700px, and 900px. The recommended aspect ratio is 16:9 or 3:2.",
        "Pop-up form": "Pop-up form",
        "ok": "ok",
        "cancels": "cancels"
      },
      "multiColDemo": {
        "title": "Multiple Lists",
        "description": "Multiple lists.",
        "That's the plan name.": "This is the plan name, the plan name, the plan name.",
        "Plan Name": "Plan Name",
        "Radio box": "Radio box",
        "check box": "check box",
        "Label Options": "Label Options",
        "switch": "switch",
        "Execution Date": "Execution Date",
        "Submit": "Submit",
        "cancels": "cancels",
        "Option": "Option",
        "Manual execution": "Manual execution",
        "Daily Scheduled Execution": "Daily Scheduled Execution",
        "Weekly scheduled execution": "Weekly scheduled execution",
        "Monday": "Monday",
        "tuesday": "tuesday",
        "Wednesday": "Wednesday",
        "thursday": "thursday",
        "friday": "friday",
        "Saturday": "Saturday",
        "Sunday": "Sunday",
        "Option (Multiple Choices with Delete)": "Option (Multiple Choices with Delete)"
      },
      "templateValidateDemo": {
        "title": "Template driven form validation",
        "description": "To bind <code>ngModel, ngGroupModel, and ngForm</code> elements to the template, you can use <code>dValidateRules</code> to configure validation rules."
      },
      "innerValidatorDemo": {
        "title": "Verify a single element, use the built-in validator, and configure error message",
        "subtitle": "We have some integrated validators, you can go to API for more information.",
        "description": "<p> Currently, <code>DevUI</code> supports the following built-in validators: <code>required, minlength, maxlength, min, max, requiredTrue, email, pattern, and whitespace</code>. </p><p>If the user input cannot contain only spaces, use <code>whitespace</code>built-in validator</p><p>If the user input length needs to be restricted, it is a good idea to set the maximum limit to the actual verification value <code>+1</code>. In addition to <code>pattern</code>, other built-in validators also provide built-in error messages. If you do not customize a message, the default message is used. The value of </p><p><code>message</code> can be in the following formats: <code>string</code>object</code>. (The internationalization string can be configured, for example, <code>'zh-cn'</code>. The default value is <code>'default'</code>).</p>"
      },
      "customerValidatorDemo": {
        "title": "Verify a single element and customize a validator",
        "description": "<ul><li>A validator requires a unique <code>id</code> identifier. You can explicitly declare this <code>id</code> or declare a <code>key</code> that does not conflict with the reserved word, the <code>key</code> is identified as <code>id</code>, and <code>value</code> functions as a validator. </li><li>customized validator. You can return <code>true | false </code> to indicate whether the current validation is successful or return <code>string | null</code> to indicate whether the current validation is successful and return an error message. This method applies to dynamic error prompts. </li><li>If the validator is an asynchronous validator, you need to return your value as an <code>Observable</code> object. More, DevUI is compatible with the native <code>angular</code> validator. You can set <code>isNgValidator</code> to true. </li></ul>"
      },
      "customErrorStrategyDemo": {
        "title": "Verify a single element. The update policy errorStrategy is incorrectly configured and the validation moment updateOn is incorrectly configured.",
        "description": "<ul> <li> Specifies whether to display an error message if the verification of the <code>errorStrategy</code> element fails during initialization. The default value is <code>dirty</code>. If you want to display an error during initialization, set this parameter to <code>prisine</code>. </li> <li><code>errorStrategy</code> can be inherited. </li> <li> Set <code>updateOn</code> to specify the verification moment. The validator <code>updateOn</code> is set based on the <code>updateOn</code> of the bound model. You can specify the validator by using <code>ngModelOptions</code> in the template. The default value is <code>change</code>, the options are as follows: <code>blur</code> and <code>submit</code>. If <code>submit</code> is set, validation is triggered when the form where the element is located is submitted. </li> </ul>"
      },
      "customMessageShowDemo": {
        "title": "Verify a single element and customize management message prompts",
        "description": "<ul> <li>Set <code>messageShowType</code> to select the message automatic prompt mode. The default value is <code>popover</code>. </li> <li>If <code>popover</code> is set to <code>popover</code>, error information will be displayed as <code>popover</code> when the element is focused. If </li> is set to <code>text</code>, error information is automatically displayed under the element in text mode (used with the form control container). If </li> is set to <code>none</code>, error information is not automatically displayed in the view, you can obtain <code>message</code> from the template, or obtain the error <code>message</code> by listening to the <code>messageChange</code> event, or directly obtain the error <code>message</code> from the template by reference. </li> <li> This configuration can be inherited. The </li> </ul> <ul> <li> can customize the pop-up direction when the message prompt mode is set to <code>popover</code>. The default value is <code >['right','bottom']</code >. </li> <li> This configuration can be inherited. </li> </ul>"
      },
      "debounceTimeDemo": {
        "title": "Verify a single element and customize asyncDebounceTime",
        "description": "<ul> <li> The default value of <code>300ms debounce time</code> is provided for the asynchronous validator. </li> <li> You can also set <code>asyncDebounceTime</code> in <code>dValidateRules</code>. </li> If your synchronization validator also needs <code>debounce time</code>, the verification is asynchronous and you can convert it to an asynchronous validator. </li> <li> This configuration can be inherited. </li> </ul>"
      },
      "validateTemplateForm": {
        "title": "Form Validation and Submission",
        "description": "<ul> <li><code>dValidateRules</code> can also be used on the ngForm and ngModelGroup elements that have been bound to the elements to manage form status and error messages in a unified manner. </li> <li> For non-frame elements, you are advised to set <code>dHasFeedback</code> to true in the <code>d-form-item</code> container to provide error feedback. </li> <li> For <code>dForm</code>, the <code>dFormSubmit and dFormReset</code> instructions can be used to associate elements that will trigger the commit and reset operations. </li> <li> If asynchronous validation is set for the form, the <code>loading</code> button can be associated with the <code>pending</code> status of the form. </li> </ul>"
      },
      "userRegisterDemo": {
        "title": "Form verification and submission, user registration scenario",
        "description": "<ul> <li> For complex validation rules in form scenarios, it is recommended that you organize them in the controller to better organize and reuse your validation rules. </li> <li> For automatic error prompt mode, it is recommended that you set <code>messageShowType</code> in <code>dForm</code>. </li> <li> For the submission event triggered by <code>dFormSubmit</code>, you can bind <code>dSubmit</code> to the <code>dForm</code> layer, you can obtain the current <code>form</code> validation status and the corresponding <code>directive</code> reference. </li> <li> If the form is not in the visual center when it is submitted, you can use a prompt to guide the user visually. For the prompt when the form is submitted, it is recommended that <code>d-toast</code> be displayed. </li> </ul>"
      },
      "validateReactiveDemo": {
        "title": "Reactive form validation",
        "description": "Bind <code>formGroup, formControlName, and formControl</code> to the template and use <code>dValidateRules</code> to configure validation rules. <p>Recommended reading <a href=\"https://angular.cn/guide/reactive-forms\" target=\"_blank\"> [Angular reactive form]</a></p>"
      },
      "customStatusDemo": {
        "title": "Feedback status of a specified form",
        "description": "You can manually specify the feedback status by setting <code>feedbackStatus</code> for <code>d-form-control</code>. Currently, the following statuses are supported: <code>success, error, and pending</code>."
      },
      "validateSyncDemo": {
        "title": "Form collaboration verification",
        "description": "In some scenarios, your multiple form components depend on each other, joint verification (for example, password input and confirmation in registration scenarios) is required. In this case, you need to use the collaborative verification instruction <code>dValidateSyncKey</code> to specify the same <code>key</code><code>dValidateSyncKey</code> instruction for the components that require system verification to support template-driven forms and reactive forms, the following example uses a template-driven form as an example: <code>password</code> and <code>confirmPassword</code> are set to the same value of <code>dValidateSyncKey</code>. When the value of one component changes, the other component also verifies the value."
      },
      "validateCrossComponentDemo": {
        "title": "Cross-component verification",
        "description": "<ul><li>Current <code>Angular By default, Form</code> does not support cross-component form verification status sharing. For response forms, you can use <code>model</code> to centrally manage and transparently transmit components. </li><li>For template-driven forms, you can inject the required <code>ngModelGroup</code> or <code>NgForm</code> container by using container injection during subcomponent declaration, for form elements in the template to automatically obtain the parent container. </li></ul>"
      },
      "validateUpdate": {
        "title": "Update Validation Rule",
        "description": "You can invoke the <code>updateRules</code> method provided by the <code>dValidateRules</code> instruction to update validation rules."
      },
      "reactiveCrossComponent": {
        "title": "Responsive form cross-component validation"
      },
      "templateCrossComponent": {
        "title": "Template-driven form cross-component verification"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic usage",
        "demo-label-horizontal": "Label horizontal arrangement",
        "demo-modal": "Pop-up form",
        "demo-multi-col": "Multiple lists",
        "demo-filter": "Form filtering",
        "demo-validate-template": "Using validators in form",
        "demo-validate-reactive": "Reactive form validation",
        "demo-custom-status": "Specify form status",
        "demo-validate-sync": "Form collaboration verification",
        "demo-validate-cross-component": "Cross-component form validation",
        "demo-validate-update": "Update validate rules",
        "demo-inner-validator": "Using integrated validators",
        "demo-custom-validator": "Using custom validators",
        "demo-error-strategy": "Config error update strategy",
        "demo-custom-message": "Custom your error message",
        "demo-debounce-time": "Set validate debounce time",
        "demo-user-register": "Using in user register senario"
      }
    },
    "fullscreen": {
      "name": "Fullscreen",
      "type": "General",
      "path": "fullscreen",
      "description": "Full screen.",
      "tmw": "When users want to display an area with full screen mode.",
      "immersiveDemo": {
        "title": "Immersive full screen",
        "description": "Immersive full screen display.",
        "fullscreen": "Full screen",
        "exitFullscreen": "Exit full screen"
      },
      "normalDemo": {
        "title": "Common full screen",
        "description": "Full screen of the current browser window.",
        "fullscreen": "Full screen",
        "exitFullscreen": "Exit full screen"
      },
      "customDemo": {
        "title": "Custom full screen",
        "description": "Call the function method to trigger full screen in the specified container.",
        "fullscreen": "Full screen",
        "exitFullscreen": "Exit full screen"
      },
      "anchorLinkValues": {
        "immersive-full-screen": "Immersive full screen",
        "general-full-screen": "Common full screen",
        "custom-full-screen": "Custom full screen"
      }
    },
    "transfer": {
      "name": "Transfer",
      "type": "Data entry",
      "path": "transfer",
      "description": "Double-column selection box.",
      "tmw": "When you need to select multiple options, the tranfer can move data in both columns to complete the selection behavior. The left column means source, and the right column means target. The data in the two columns is returned for developers.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Basic Usage of Shuttle Boxes.",
        "sourceTitle": "Source Title",
        "targetTitle": "Target Title",
        "disabled:": "Disabled:",
        "option1": "Option 1 (including this option forbidding transfer)",
        "option2": "Option 2",
        "option3": "Option 3",
        "option4": "Option 4",
        "option5": "Option 5",
        "option6": "Option 6",
        "option7": "Option 7",
        "option8": "Option 8",
        "option9": "Option 9",
        "option10": "Option 10",
        "option11": "Option 11",
        "option12": "Option 12",
        "option13": "Option 13",
        "option14": "Option 14",
        "option15": "Option 15",
        "option16": "Option 16",
        "option17": "Option 17",
        "option18": "Option 18",
        "option19": "Option 19",
        "option20": "Option 20",
        "option21": "Option 21"
      },
      "searchDemo": {
        "title": "Search Shuttle Box",
        "description": "When there is a large amount of data, you can search for and filter the data.",
        "sourceTitle": "Source Title",
        "targetTitle": "Target Title",
        "disabled:": "Disabled:",
        "option1": "Option 1",
        "option2": "Option 2",
        "option3": "Option 3",
        "option4": "Option 4",
        "option5": "Option 5",
        "option6": "Option 6",
        "option7": "Option 7",
        "option8": "Option 8",
        "option9": "Option 9",
        "option10": "Option 10",
        "option11": "Option 11",
        "option12": "Option 12",
        "option13": "Option 13",
        "option14": "Option 14",
        "option15": "Option 15",
        "option16": "Option 16",
        "option17": "Option 17",
        "option18": "Option 18",
        "option19": "Option 19"
      },
      "sortDemo": {
        "title": "Sorting Shuttle Box",
        "description": "You can sort the data of the shuttle box source and destination boxes.",
        "sourceTitle": "Source Title",
        "targetTitle": "Target Title",
        "disabled:": "Disabled:",
        "option1": "Option 1",
        "option2": "Option 2",
        "option3": "Option 3",
        "option4": "Option 4",
        "option5": "Option 5",
        "option6": "Option 6",
        "option7": "Option 7",
        "option8": "Option 8",
        "option9": "Option 9",
        "option10": "Option 10",
        "option11": "Option 11",
        "option12": "Option 12",
        "option13": "Option 13",
        "option14": "Option 14",
        "option15": "Option 15",
        "option16": "Option 16",
        "option17": "Option 17",
        "option18": "Option 18",
        "option19": "Option 19",
        "option20": "Option 20",
        "option21": "Option 21"
      },
      "customDemo": {
        "title": "Custom Shuttle Box",
        "description": "You can customize the display of the contents of the shuttle box.",
        "sourceTitle": "Source Title",
        "targetTitle": "Target Title",
        "disabled:": "Disabled:",
        "option1": "Option 1",
        "option2": "Option 2",
        "option3": "Option 3",
        "option4": "Option 4",
        "option5": "Option 5",
        "option6": "Option 6",
        "option7": "Option 7",
        "option8": "Option 8",
        "option9": "Option 9",
        "option10": "Option 10",
        "option11": "Option 11",
        "option12": "Option 12",
        "option13": "Option 13",
        "option14": "Option 14",
        "option15": "Option 15",
        "option16": "Option 16",
        "option17": "Option 17",
        "option18": "Option 18",
        "option19": "Option 19",
        "option20": "Option 20",
        "option21": "Option 21"
      },
      "vitrualScrollDemo": {
        "title": "Virtual Scroll"
      },
      "anchorLinkValues": {
        "transfer-demo-base": "Basic Usage",
        "transfer-demo-search": "Search Shuttle Box",
        "transfer-demo-sort": "Sorting Shuttle Box",
        "transfer-demo-custom": "Custom Shuttle Box",
        "transfer-demo-virtual-scroll": "Virtual Scroll"
      }
    },
    "dragdrop": {
      "name": "DragDrop",
      "type": "General",
      "path": "dragdrop",
      "description": "Drag and drop.",
      "tmw": "When multiple steps are required and the sequence of the steps needs to be adjusted flexibly.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Dragging a container to another container and sorting.",
        "Default dragging": "Default dragging",
        "Dragable Item": "Dragable Item",
        "Place Sort Area": "Place Sort Area",
        "Placement Area (No Sorting)": "Placement Area (No Sorting)",
        "(Do not drag)": "(Do not drag)"
      },
      "treeDemo": {
        "title": "Multi-layer tree dragging",
        "description": "Sorting can be dragged to elements and hierarchical nesting is supported.",
        "Multi-layer tree dragging": "Multi-layer tree dragging",
        "Candidate area": "Candidate area",
        "Tree Sorting Area": "Tree Sorting Area"
      },
      "followDemo": {
        "title": "Drag Entity Elements to Follow",
        "description": "Allow non-transparent elements to follow when dragging. You can also use appendToBody: If the parent object in the source position is destroyed after dragging it away, you need to attach the clone to the body to prevent it from being destroyed. By default, the style of the entity to be cloned is copied to ensure that the style of the entity to be cloned is correct. However, some styles and attributes that depend on the DOM node location may fail. You need to manually adjust some styles.",
        "Drag Entity Elements to Follow": "Drag Entity Elements to Follow",
        "Dragable Item": "Dragable Item",
        "Place Sort Area": "Place Sort Area",
        "Attaching the clone entity to the body": "Attaching the clone entity to the body",
        "AppendToBody of dragFollowOptions is used in the following scenarios: If the parent object in the source location is destroyed after being dragged out, attach the clone to the body to prevent it from being destroyed. By default, the style of the cloned body is copied to ensure that the style of the cloned body is correct. However, some styles and attributes that depend on the DOM node location may fail. In this case, you need to manually adjust some styles.": "AppendToBody of dragFollowOptions is used in the following scenarios: If the parent object in the source location is destroyed after being dragged out, attach the clone to the body to prevent it from being destroyed. By default, the style of the cloned body is copied to ensure that the style of the cloned body is correct. However, some styles and attributes that depend on the DOM node location may fail. In this case, you need to manually adjust some styles."
      },
      "switchDemo": {
        "title": "Crossover Exchange",
        "description": "Sets switchWhileCrossEdge to allow switching when crossing the edge. Note: This parameter cannot be used together with dropOnItem. This parameter is invalid when dropOnItem is set to true.",
        "Move the mouse over the edge of the element.": "Move the mouse over the edge of the element.",
        "Drag-and-drop sorting exchange": "Drag-and-drop sorting exchange"
      },
      "positionDemo": {
        "title": "External Placement Position: near, front, rear",
        "description": "When you use defaultDropPostion to configure areas other than the sorter, the elements are added to the front or behind of the list by default. By default, the elements are added to the nearest area (closest).",
        "Drag-and-drop items": "Drag-and-drop items",
        "Drag and drop here Add to top": "Drag and drop here Add to top",
        "Drag and drop here Add to bottom": "Drag and drop here Add to bottom",
        "Drag and drop here Add nearest": "Drag and drop here Add nearest"
      },
      "dropScrollDemo": {
        "title": "Drag and scroll container enhancement",
        "description": "Use the dDropScrollEnhanced instruction to accelerate the scroll bar to both sides when dragging to the edge.",
        "Drag an element to the edge of the scroll bar to trigger scrolling.": "Drag an element to the edge of the scroll bar to trigger scrolling.",
        "Show drag-and-drop scrolling area": "Show drag-and-drop scrolling area",
        " Active area. Drag to trigger scrolling.": " Active area. Drag to trigger scrolling.",
        " Inactive area, elements under which elements are dragged are placed.": " Inactive area, elements under which elements are dragged are placed."
      },
      "originPlaceholderDemo": {
        "title": "Source Placeholder",
        "description": "Use originPlaceholder to display the placeholder for the source position, and the example disappears.",
        "Drag from here. The source placeholder disappears directly after being placed.": "Drag from here. The source placeholder disappears directly after being placed.",
        " Drag from here, the source placeholder disappears after the <strong> delay</strong>": " Drag from here, the source placeholder disappears after the <strong> delay</strong>",
        "Drag from here, the source placeholder disappears after it is placed. <strong> Animation</strong>": "Drag from here, the source placeholder disappears after it is placed. <strong> Animation</strong>"
      },
      "batchDragDemo": {
        "title": "Batch Drag",
        "description": "You can use the batchDrag command to drag multiple markers in batches. Press Ctrl to select multiple markers and drag them.",
        "Batch dragging is supported. Press Ctrl to select multiple items and drag them.": "Batch dragging is supported. Press Ctrl to select multiple items and drag them.",
        "Show Source Placeholders": "Show Source Placeholders",
        "crossover exchange": "crossover exchange",
        "Clear Selected": "Clear Selected"
      },
      "crossDimensionDemo": {
        "title": "2D Drag And Prewview Drag",
        "description": "Use the dDragDropSyncBox, dDragSync, and dDropSync instructions to implement 2D drag. Use dDragPreview Configure drag and drop preview. Use the d-drag-preview-clone-dom-ref to clone a dragged node.",
        "Owner": "Owner",
        "To be allocated": "To be allocated",
        "Lin Huahua": "Lin Huahua",
        "Wang Xiaoming": "Wang Xiaoming",
        "Newly created": "Newly created",
        "Ongoing": "Ongoing",
        "Completed": "Completed"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "multi-level-tree-drag": "Multi-layer tree dragging",
        "drag-entity-elements-to-follow": "Drag Entity Elements to Follow",
        "cross-edge-switching": "crossover exchange",
        "external-location": "External Placement Position",
        "drag-and-roll-container-enhancement": "Drag and scroll container enhancement",
        "source-placeholder": "Source Placeholder",
        "batch-drag-and-drop": "Batch dragging",
        "2D-drag-and-drop-preview": "Two-dimensional drag and preview"
      }
    },
    "drawer": {
      "name": "Drawer",
      "type": "Feedback",
      "path": "drawer",
      "description": "The floating layer panel that slides out from the screen edge.",
      "tmw": "<div>1. The drawer slides in from the edge of the parent window to cover part of the parent window, and you don't have to leave the current task. After the operations are complete, you can smoothly return to the original task. </div> <div> 2. When an additional panel is required to control the content of the parent form, the panel is called out when needed. For example, you can control the display style of the page and add content to the page. </div> <div> 3. Create or preview additional content when you need to insert a temporary task into the current task flow. For example, display agreement terms and create child objects. </div>",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Basic usage to control full screen, close, and set width."
      },
      "undestroyableDemo": {
        "title": "Do not destroy after being closed",
        "description": "Manual destruction is required. This mode applies to scenarios where immediate destruction is not required.",
        "openSlider": "Open side sliding window",
        "manualDestroy": "Manual Destroy",
        "closeManualDestroy": "If this function is disabled, it can be manually destroyed. If this function is enabled, it is invalid."
      },
      "templateDemo": {
        "title": "Custom Template",
        "description": "Custom Drawer Template."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "do-not-destroy-after-closing": "Do not destroy after being closed",
        "template": "Custom Template"
      }
    },
    "dropdown": {
      "name": "DropDown menu",
      "type": "Navigation",
      "path": "dropdown",
      "description": "Press to display the list.",
      "tmw": "When there are too many operation commands on the page, this component can be used to contain operation elements. When you click or move into a drop-down menu, You can select a value from the dropdown list.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "",
        "More Operations": "More Operations",
        "Text box": "Text box",
        "Disable Options": "Disable Options",
        "Newly created": "Newly created",
        "Deleted": "Deleted",
        "Menu 1": "Menu 1",
        "Menu 2": "Menu 2",
        "Menu 3": "Menu 3",
        "Menu 4": "Menu 4",
        "Attach to the body to prevent it from being blocked by the scroll bar.": "Attach to the body to prevent it from being blocked by the scroll bar."
      },
      "hoverDemo": {
        "title": "Hover dropdown",
        "description": "Pass trigger Set the trigger mode (click or floating) for the drop-down list.",
        "Menu 1": "Menu 1",
        "Menu 2": "Menu 2",
        "Menu 3": "Menu 3"
      },
      "focusDemo": {
        "title": "Automatically expanded during focus and automatically focused during initialization",
        "description": "Pass toggleOnFocus Sets the tab key to automatically expand when the focus is performed. Pass autoFocus Set the auto focus during initialization. the two may be used in combination or separately.",
        "When you press Tab to navigate to the dropdown Toggle object, the menu is automatically expanded.": "When you press Tab to navigate to the dropdown Toggle object, the menu is automatically expanded.",
        "More Operations": "More Operations",
        "Disable Options": "Disable Options",
        "Newly created": "Newly created",
        "Deleted": "Deleted",
        "Menu 1": "Menu 1",
        "Menu 2": "Menu 2",
        "Menu 3": "Menu 3",
        "Menu 4": "Menu 4",
        "The focus is automatically performed during initialization. It can be automatically expanded with toggleOnFocus or used independently.": "The focus is automatically performed during initialization. It can be automatically expanded with toggleOnFocus or used independently.",
        "Initialization/Destruction": "Initialization/Destruction",
        "Text box": "Text box"
      },
      "closeScopeDemo": {
        "title": "Close Trigger Point Settings",
        "description": "Pass closeScope Set the trigger point for closing the menu. The options are as follows: blank: triggered only when a non-menu area is clicked; all: triggered also in the menu area; none: You can click the drop-down list box to close the area or manually close the area.",
        "The drop-down menu is closed only after you click the menu.": "The drop-down menu is closed only after you click the menu.",
        "Click the drop-down button.": "Click the drop-down button.",
        "Text box": "Text box",
        "Menu 1": "Menu 1",
        "Menu 2": "Menu 2",
        "Menu 3": "Menu 3",
        "Self-closed": "Self-closed",
        "Click the last menu item to close it.": "Click the last menu item to close it.",
        "Menu 1 Disable": "Menu 1 Disable",
        "Close": "Close"
      },
      "appendToBodyDemo": {
        "title": "When appendToBody is used, set the expansion position and change the alignment object.",
        "description": "Pass appendToBodyDirections Set the priority list of the expanded position. Pass alignOrigin Change Default Alignment Object.",
        "Align with regions Use bottom left (right aligned below), top left (right aligned above display)": "Align with regions Use bottom left (right aligned below), top left (right aligned above display)",
        "Align the area.": "Align the area.",
        "Drop-down button": "Drop-down button",
        "Disable Options": "Disable Options",
        "Newly created": "Newly created",
        "Deleted": "Deleted",
        "Using Centered Display": "Using Centered Display",
        "Creating a Content": "Creating a Content",
        "Deleted content": "Deleted content"
      },
      "manuallyDemo": {
        "title": "Manual pull-down control",
        "description": "Sets the manual pull-down control by using the trigger."
      },
      "set-is-openDemo": {
        "title": "Control dropdown meanu with isOpen"
      },
      "addIconDemo": {
        "title": "Adding icons",
        "description": "",
        "Newly created": "Newly created",
        "Delete": "Delete",
        "Menu 1": "Menu 1",
        "Menu 2": "Menu 2",
        "Menu 3": "Menu 3",
        "Menu 4": "Menu 4"
      },
      "multiLevelDemo": {
        "title": "Multi-level drop-down menu",
        "description": "",
        "Click": "Click",
        "More options": "More options",
        "Content 1": "Content 1",
        "Content 1-1": "Content 1-1",
        "Content 1-1-1": "Content 1-1-1",
        "Content 1-1-2": "Content 1-1-2",
        "Content 1-1-3": "Content 1-1-3",
        "Content 1-2": "Content 1-2",
        "Content 1-2-1": "Content 1-2-1",
        "Content 2": "Content 2",
        "hovering": "hovering",
        "Click to expand the menu. The menu is automatically closed when you exit.": "Click to expand the menu. The menu is automatically closed when you exit."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "turn-off-trigger-point-settings": "Close Trigger Point Settings",
        "suspension-drop-down": "Hover dropdown",
        "manually-control": "Manual pull-down control",
        "dropdown-set-is-open": "Control Dropdown Meanu with IsOpen",
        "auto-expand-and-auto-focus": "Auto-expand and auto-focus",
        "when-using-appendtobody": "Set the expansion position processing",
        "add-icon": "Adding icons",
        "multi-level-drop-down-menu": "Multi-level drop-down menu"
      }
    },
    "editable-select": {
      "name": "EditableSelect",
      "type": "Data entry",
      "path": "editable-select",
      "description": "You can enter or select a value from the drop-down list box.",
      "tmw": "You can use it easily when you want to search existed data.",
      "basicDemo": {
        "title": "Basic usage",
        "description": "Set source to a data source, and use enableSelectedValueList to control whether to display all options when a value is selected."
      },
      "ObjectDemo": {
        "title": "Set an array of objects as the source",
        "description": "Reads the label attribute by default when source is the object array. Use valueParser and formatter methods to customize the display value and format."
      },
      "disableDataDemo": {
        "title": "Set disable options",
        "description": "Disabling specified data."
      },
      "searchFunctionDemo": {
        "title": "Customized data matching method",
        "description": "Use searchFn to customize the data matching method."
      },
      "async-data-function": {
        "title": "Asynchronously obtaining the data source and setting the matching method",
        "description": "Data sources and matching methods can be set asynchronously."
      },
      "lazyLoadDemo": {
        "title": "Enable lazy load",
        "description": "Data lazy loading."
      },
      "customAreaDemo": {
        "title": "Custom Area",
        "description": "Using template to custom dropdown area"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic usage",
        "object-source": "Set an array of objects as the source",
        "disable-data-with-source": "Set disable options",
        "with-search-function": "Customized data matching method",
        "async-data-with-function": "Asynchronously obtaining the data source and setting the matching method",
        "lazy-load": "Enable lazy load",
        "custom-area-usage": "Custom Area"
      }
    },
    "editorx": {
      "name": "EditorX",
      "type": "Data entry",
      "path": "editorx",
      "description": "Rich Text Editor.",
      "tmw": "You can use it easily when you need to edit rich text.",
      "defaultDemo": {
        "title": "Default Example",
        "description": "Displaying the default functions of EditorX."
      },
      "customToolbarDemo": {
        "title": "Custom Toolbar",
        "description": "Custom toolbar Icons + Custom toolbar grouping + Collapse of tools that are not commonly used."
      },
      "readOnlyModeDemo": {
        "title": "Read-only Mode",
        "description": "Read-only mode, no toolbar, no word count. You can press the Save button or Ctrl+S to change the mode to read-only. You can press the Edit button to change the mode to edit."
      },
      "expandToolbarDemo": {
        "title": "Expand Toolbar",
        "description": "Adding a toolbar, custom triggering event, and operating an editor object."
      },
      "initWithObjDemo": {
        "title": "Init With Obj",
        "description": "Use the object format object to initialize the editor (instead of the default HTML format). The object format is more suitable for persistent storage and is recommended for storage in the background."
      },
      "uploadDemo": {
        "title": "Image And File Upload",
        "description": "To upload images and files to the server, you need to replace the upload interface in the example with the actual background interface."
      },
      "charStatisticsDemo": {
        "title": "Character Statistics",
        "description": "Collects statistics on the number of characters, words, and HTML characters that are currently entered, and customizes the display template."
      },
      "customFullScreenDemo": {
        "title": "Customizing The Full-Screen Mode",
        "description": "The default value is immersive full-screen. You can set the value to common full-screen and customize the full-screen hierarchy."
      },
      "globalHrefDemo": {
        "title": "Global Links",
        "description": "Global Links."
      },
      "richTextInDrawerDemo": {
        "title": "Rich Text in Drawer",
        "description": "Using the Rich Text Editor in the Drawer. "
      },
      "xssDemo": {
        "title": "XSS",
        "description": "XSS."
      },
      "anchorLinkValues": {
        "default-example": "Default Example",
        "custom-toolbar": "Custom Toolbar",
        "read-only-mode": "Read-only Mode",
        "expand-toolbar": "Expand Toolbar",
        "init-with-obj": "Init With Obj",
        "upload": "Image And File Upload",
        "char-statistics": "Character Statistics",
        "custom-full-screen": "Customizing The Full-Screen Mode",
        "global-href": "Global Links",
        "rich-text-in-drawer": "Rich Text in Drawer",
        "xss": "XSS"
      }
    },
    "loading": {
      "name": "Loading",
      "type": "Feedback",
      "path": "loading",
      "description": "Tell user that some command is now being executed.",
      "tmw": "When the command execution takes a long time (more than several seconds), use loading to tell user.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "The basic scenario where table data is loaded.",
        "click me!": "click me!",
        "FirstName": "FirstName",
        "LastName": "LastName",
        "UserName": "UserName"
      },
      "customDemo": {
        "title": "Custom Style",
        "description": "Customize the loading style using templateRef.",
        "Loading Style 2": "Loading Style 2",
        "Loading Style 3": "Loading Style 3",
        "Text loading": "Text loading"
      },
      "promiseDemo": {
        "title": "Multipromise",
        "description": "Multiple promises are supported.",
        "click": "click"
      },
      "subscriptionDemo": {
        "title": "Using The Subscription Mode",
        "description": "Using subscription to control the display of loading information.",
        "click": "click"
      },
      "showLoadingDemo": {
        "title": "Using ShowLoading",
        "description": "Use true or false of showLoading to control the display of loading.",
        "click me!": "click me!",
        "FirstName": "FirstName",
        "LastName": "LastName",
        "UserName": "UserName"
      },
      "fullScreenDemo": {
        "title": "Service function",
        "description": "Load the loading component in full screen mode or on a specified host using services."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "custom-style": "Custom Style",
        "multi-promise": "Multipromise",
        "use-subscription-mode": "Using The Subscription Mode",
        "show-loading": "Using ShowLoading",
        "full-screen": "Service function"
      }
    },
    "modal": {
      "name": "Modal",
      "type": "Feedback",
      "path": "modal",
      "description": "Modal.",
      "tmw": "<div>1. If you want to process a transaction but do not want to jump to another page to interrupt the workflow, you can use modal to open a floating layer in the middle of the current page to carry the corresponding operation. </div> <div> 2. The pop-up window is used to interact with users. Users can enter information, read prompts, and set options in the dialog box. </div>",
      "basicDemo": {
        "title": "Standard Dialog Box",
        "description": "Standard dialog boxes that can be dragged using the dialogService."
      },
      "maximizeDemo":{
        "title":"Maximize Dialog Box",
        "description":"You can use the showMaximizeBtn api to set visibility of maximize button."
      },
      "customizeDemo": {
        "title": "Custom Dialog Box",
        "description": "You can use modalService to customize all the contents in the dialog box."
      },
      "hideDemo": {
        "title": "Blocking dialog box closed",
        "description": "Set the blocking method for closing a dialog box by using the beforeHidden parameter."
      },
      "tipsDemo": {
        "title": "Information",
        "description": "Information dialog box of various types."
      },
      "warningDemo": {
        "title": "Warning Dialog Box",
        "description": "Standard warning dialog box."
      },
      "basicUpdateDemo": {
        "title": "Update the button status in the pop-up dialog box",
        "description": "Update the button configuration in the dialog configuration using the update method."
      },
      "autofocusDemo": {
        "title": "Configure button to automatically get focus",
        "description": "Configure the autofocus attribute in buttons of the DialogService service to enable the button to obtain the focus automatically. You can press Enter to trigger the button to be clicked."
      },
      "templateDemo": {
        "title": "Customizing a pop-up box content template",
        "description": "The contentTemplate attribute can be transferred to configure the dialog box content template."
      },
      "templateFixedDemo": {
        "title": "The outer layer is fixed to solve the jitter and scrolling problem.",
        "description": "The outer fixed value is used to avoid scrolling and jitter. In this mode, the position of all fixed elements on the page needs to be specified. If the default value is used, the position offset occurs."
      },
      "casesDemo": {
        "title": "Cases",
        "description": "Simulate a real scene."
      },
      "anchorLinkValues": {
        "standard-dialog": "Standard Dialog Box",
        "maximize-dialog":"Maximize Dialog Box",
        "custom-dialog": "Custom Dialog Box",
        "intercept-dialog-closed": "Blocking dialog box closed",
        "message-hint": "Information",
        "update-button-options": "Update the button status in the pop-up dialog box",
        "configure-button-to-get-focus-automatically": "Configure button to automatically get focus",
        "template-content": "Customizing a pop-up box content template",
        "template-fixed": "The outer layer is fixed to solve the jitter and scrolling problem",
        "cases": "Cases"
      }
    },
    "pagination": {
      "name": "Pagination",
      "type": "Navigation",
      "path": "pagination",
      "description": "Pagination.",
      "tmw": "When loading/rendering all the data takes a long time, you can use pagination to split the data.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "",
        "Standard Size": "Standard Size",
        "Medium size": "Medium size",
        "Large size": "Large size",
        "Custom Style": "Custom Style",
        "Set total to 0.": "Set total to 0.",
        "Go to": "Go to"
      },
      "liteDemo": {
        "title": "Simplified Mode",
        "description": "Simplified mode applies to pages with a large amount of information, which simplifies page complexity.",
        "Common Simplified Mode": "Common Simplified Mode",
        "Total number of records": "Total number of records",
        "Set total to 0.": "Set total to 0.",
        "Set total to 20.": "Set total to 20.",
        "Set total to 30000.": "Set total to 30000.",
        "Set total to 100000.": "Set total to 100000.",
        "Set index to 2.": "Set index to 2.",
        "Set index to 3.": "Set index to 3.",
        "Ultra-simplified mode": "Ultra-simplified mode",
        "Setting drop-down menu with extensible settings": "Setting drop-down menu with extensible settings",
        "Display Field": "Display Field",
        "Click Settings.": "Click Settings.",
        "Display Mode": "Display Mode"
      },
      "widgetsDemo": {
        "title": "Multiple Configurations",
        "description": "Set the input jump and display jump buttons. Sets functions such as pageSize."
      },
      "additionalDemo": {
        "title": "Special Circumstances",
        "description": "Pager display in special scenarios.",
        "Set total to 0.": "Set total to 0.",
        "Set total to 5.": "Set total to 5.",
        "Set total to 15.": "Set total to 15."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "minimalist-model": "Simplified Mode",
        "multiple-configurations": "Multiple Configurations",
        "exceptional-case": "Special Circumstances"
      }
    },
    "panel": {
      "name": "Panel",
      "type": "General",
      "path": "panel",
      "description": "Content panel, which is used to group content.",
      "tmw": "This parameter is used when the page content needs to be displayed in groups. Generally, this parameter contains the header, content area, and bottom part.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "typeDemo": {
        "title": "Multiple types",
        "description": "There are six panels like default, primary, success, danger, warning, and info."
      },
      "conditionChangeDemo": {
        "title": "Prevent Collapse Based on Conditions",
        "description": "When a panel is expanded, if you click folding block button, the panel cannot be collapsed. When the panel is folded, operations are not affected.",
        "Prevent Folding": "Prevent Folding"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "multiple-types": "Multiple types",
        "condition-change": "Prevent Collapse Based on Conditions"
      }
    },
    "popover": {
      "name": "Popover",
      "type": "Feedback",
      "path": "popover",
      "description": "Simple text prompt box.",
      "tmw": "Used to notify users of non-critical problems or to indicate that a control is in a special situation.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "manualDemo": {
        "title": "Manual Control Display",
        "description": "Displaying the pop-up dialog box through the visible interface to verify the form. To use the visible control function, set controlled to the default value false.",
        "nameErrMsg": "The value must contain at least four characters."
      },
      "customizeDemo": {
        "title": "Basic Usage",
        "description": "The HTMLElement or TemplateRef type can be transferred.",
        "customizeTip": "Custom Tips",
        "isCustomizeTip": "This is a custom tip.",
        "customizeTipLink": "Custom Tips with Links",
        "learnMore": "Learn More"
      },
      "scrollElementDemo": {
        "title": "Parent Container Settings",
        "description": "ScrollElement configuration. The default value is window. This parameter is optional by default. It is required only when the page scrolling is not in the window."
      },
      "hoverDelayTimeDemo": {
        "title": "Delay Trigger",
        "description": "Only when the trigger type is hover. This event is triggered only when the mouse pointer is moved in for more than [mouseEnterDelay] milliseconds. The default value is 150 ms to prevent flashing caused by unintentional strokes. The toolTip component is hidden only after [mouseLeaveDelay] milliseconds after the cursor is moved out. The default value is 100 milliseconds."
      },
      "positionDemo": {
        "title": "Position",
        "description": "A total of 12 pop-up positions are supported."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "manual-control-display": "Manual Control Display",
        "custom-prompt-content": "Custom Tips",
        "parent-container-settings": "Parent Container Settings",
        "hover-delay-time": "Delay Trigger",
        "position": "Position"
      }
    },
    "progress": {
      "name": "Progress",
      "type": "Data display",
      "path": "progress",
      "description": "Progress bar.",
      "tmw": "<div>1. When the operation takes a long time. </div> <div> 2. When an operation takes a long time to interrupt the current interface or background operation. </div> <div>3. To display the percentage of completed operations or the number of completed steps/total steps.</div>",
      "basicDemo": {
        "title": "Linear Progress Bar",
        "description": "You can configure text and custom templates to be displayed in the middle, right, or as you progress."
      },
      "circleDemo": {
        "title": "Circular progress bar",
        "description": "You can configure to display text  in the center or customize a template."
      },
      "multipleDemo": {
        "title": "Custom multi-color progress bar",
        "description": "You can configure multiple segments of different color values or gradient colors."
      },
      "anchorLinkValues": {
        "basic-usage": "Linear Progress Bar",
        "circle-usage": "Circular progress bar",
        "multiple-usage": "Custom multi-color progress bar"
      }
    },
    "quadrant-diagram": {
      "name": "Quadrant Diagram",
      "type": "Evolving",
      "path": "quadrant-diagram",
      "description": "Quadrant.",
      "tmw": "To manage the priority of transactions.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "customizeDemo": {
        "title": "Customize",
        "description": "Separately set the placement area. Set dropScope to 'devui-quadrant-diagram'."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "custom-quadrant": "Customize"
      }
    },
    "radio": {
      "name": "Radio",
      "type": "Data entry",
      "path": "radio",
      "description": "Radio button.",
      "tmw": "The user selects a single option from a dataset and can view all options.",
      "basicDemo": {
        "title": "Independent Radios"
      },
      "conditionChangeDemo": {
        "title": "Switch with Condition",
        "description": "The second item cannot be redirected based on the condition."
      },
      "conditionRadioGroupDemo": {
        "title": "Switch With Condition in A Radio Group",
        "description": "The second radio group is not allowed to jump."
      },
      "disabledDemo": {
        "title": "Disabled Radio"
      },
      "horizontalDemo": {
        "title": "Horizontal Arrangement"
      },
      "verticalDemo": {
        "title": "Vertical Arrangement"
      },
      "customDemo": {
        "title": "Custom Radios",
        "description": "The array source can be a common array or an object array."
      },
      "anchorLinkValues": {
        "basic-usage": "Independent Radios",
        "condition-change": "Switch with Condition",
        "condition-radio-group": "Switch With Condition in A Radio Group",
        "disabled": "Disabled Radio",
        "horizontal": "Horizontal Arrangement",
        "vertical": "Vertical Arrangement",
        "custom": "Custom Radios"
      }
    },
    "rate": {
      "name": "Rate",
      "type": "Data display",
      "path": "rate",
      "description": "Rate.",
      "tmw": "When you expect users to rate a product.",
      "basicDemo": {
        "title": "Dynamic Mode",
        "currentStar": "Currently 2 stars"
      },
      "onlyReadDemo": {
        "title": "Read-only Mode"
      },
      "customizeDemo": {
        "title": "Dynamic Mode-Custom"
      },
      "halfDemo": {
        "title": "Half Star Mode"
      },
      "clearDemo": {
        "title": "Clear Star Mode"
      },
      "typeDemo": {
        "title": "Set Color"
      },
      "templateDemo": {
        "title": "Custom Template"
      },
      "anchorLinkValues": {
        "read-only-mode": "Read-only Mode",
        "dynamic-mode": "Dynamic Mode",
        "dynamic-mode-Custom": "Dynamic Mode-Custom",
        "half-demo": "Half Star Mode",
        "clear-demo": "Clear Star Mode",
        "using-the-type-parameter": "Set Color",
        "template": "Custom Template"
      }
    },
    "search": {
      "name": "Search",
      "type": "General",
      "path": "search",
      "description": "Search box.",
      "tmw": "When you need to search for required data in a dataset, you can enter the content (or part) of the required data to return the search results of all the matching content.",
      "basicDemo": {
        "title": "Basic Usage",
        "small": "Small size",
        "middle": "Standard Size",
        "large": "Large size",
        "disable": "Disabled",
        "searchLeft": "Search icon left",
        "autoFoucs": "autofocus",
        "insertKey": "Enter a keyword."
      },
      "ngModelDemo": {
        "title": "NgModel"
      },
      "leftIconDemo": {
        "title": "Left Search Icon"
      },
      "autoFocusDemo": {
        "title": "Auto Focus"
      },
      "no-borderDemo": {
        "title": "No Border"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "bidirectional-binding": "NgModel",
        "icon-left": "Left Search Icon",
        "auto-focus": "Auto Focus",
        "search-no-border": "No Border"
      }
    },
    "select": {
      "name": "Select",
      "type": "Data entry",
      "path": "select",
      "description": "Drop-down list box.",
      "tmw": "The user can select one or more options from multiple options. Only options provided by the system can be selected and searched from the drop-down list box.",
      "SelectBasicDemo": {
        "title": "Basic Usage",
        "description": "Pass options Configure the data source by configuring the overview and size styles by configuring the direction by configuring the direction.",
        "Large size": "Large size",
        "Standard Size": "Standard Size",
        "Small size": "Small size",
        "Option": "Option",
        "New Option": "New Option",
        "Asynchronous option 1": "Asynchronous option 1"
      },
      "CustomSearchDemo": {
        "title": "Custom Search",
        "description": "Over the search function is enabled and the search method is customized for isSearch and searchFn. The searchPlaceholder parameter specifies the text displayed in the search box to enable the multi-selection function.",
        "Single-choice custom search method": "Single-choice custom search method",
        "Search My Options": "Search My Options",
        "Multi-choice self-defined search method": "Multi-choice self-defined search method",
        "Select at least three options.": "Select at least three options.",
        "Option": "Option"
      },
      "SelectAllDemo": {
        "title": "Select All",
        "description": "Select multiple options from the drop-down list box. isSelectAll Enable Select All.",
        "Current Select": "Current Select",
        "Option": "Option"
      },
      "SelectTemplateDemo": {
        "title": "Customized template",
        "description": "Configure the drop-down list and selected options using the template.",
        "Single choice": "Single choice",
        "Use templates only for lists": "Use templates only for lists",
        "Use the same template in the list and selected items": "Use the same template in the list and selected items",
        "Use different templates in lists and selected items": "Use different templates in lists and selected items",
        "Multiple Choices": "Multiple Choices",
        "Use different templates for the list and selected items. Use built-in templates in some cases.": "Use different templates for the list and selected items. Use built-in templates in some cases."
      },
      "AllowClearValueDemo": {
        "title": "Allow clearing values",
        "description": "Clear the selected value by modifying the ngModel variable.",
        "test": "Option"
      },
      "CustomAreaDemo": {
        "title": "Custom Area",
        "description": "Use customViewTemplate Defining a Custom Area.",
        "Custom Area": "Custom Area",
        "Selected xx items": "Selected xx items",
        "Option": "Option"
      },
      "CustomAreaDirectionDemo": {
        "title": "Customizing Area Orientation and Selecting",
        "description": "",
        "Customizing Area Orientation and Selecting": "Customizing Area Orientation and Selecting",
        "Customize the region and change the width alignment by appendToBody.": "Customize the region and change the width alignment by appendToBody.",
        "Recent Selections": "Recent Selections",
        "Option": "Option"
      },
      "AppendToBodyDemo": {
        "title": "Attach to the body.",
        "description": "Use appendToBody The container is attached to the body and is not blocked by the scroll bar.",
        "Select from the drop-down list box": "Select from the drop-down list box",
        "Option": "Option"
      },
      "DisabledDemo": {
        "title": "Disabled",
        "description": "Pass disabled Disable the drop-down list box. The $disabled option of the option object is disabled, and the $immutable option of the option object is disabled.",
        "Disable All": "Disable All",
        "Disable an item": "Disable an item",
        "Disable an item, Tags cannot be operated independently. You can select or deselect all tags.": "Disable an item, Tags cannot be operated independently. You can select or deselect all tags.",
        "Disable an item, Use immutable to disable changes. Select all and deselect all.": "Disable an item, Use immutable to disable changes. Select all and deselect all.",
        " The immutable parameter cannot be changed and is not displayed as disabled. To disable the immutable parameter, use the disabled parameter.": " The immutable parameter cannot be changed and is not displayed as disabled. To disable the immutable parameter, use the disabled parameter.",
        "Option": "Option"
      },
      "LabelizationDemo": {
        "title": "Labeling",
        "description": "Pass extraConfig.labelization Tag-based configuration: 1. If enable is set to true, the tag is enabled. 2. Overlong overflow configuration style. For details, see the API.",
        "Extra-long line feed": "Extra-long line feed",
        "Change default": "Change default",
        "Current Select": "Current Select",
        "Overlong single line, vertical scroll bar": "Overlong single line, vertical scroll bar",
        "Maximum width of a tag in an ultra-long row.": "Maximum width of a tag in an ultra-long row.",
        "This is an extra long option.": "This is an extra long option.",
        "Option": "Option"
      },
      "ObjectFilterDemo": {
        "title": "Use object",
        "description": "Using an array of objects, through filterKey Configuration Object Display Field.",
        "Current Select": "Current Select",
        "Option": "Option",
        "Search": "Search"
      },
      "LazyLoadVirtualScrollDemo": {
        "title": "Virtual Scroll Or lazy loading",
        "description": "Use virtualScroll Virtual scrolling is used in the case of a large amount of data. Run the enableLazyLoad command to load a large amount of data.",
        "Virtual scrolling": "Virtual scrolling",
        "Scroll to the bottom lazy loading data": "Scroll to the bottom lazy loading data",
        "Scroll to the bottom to lazy load data using a custom loading template": "Scroll to the bottom to lazy load data using a custom loading template",
        "Option": "Option",
        "Asynchronous Options": "Asynchronous Options",
        "Test": "Test"
      },
      "LoadingDemo": {
        "title": "Asynchronous loading: loading",
        "description": "",
        "Lazy loading: Change the options mode.": "Lazy loading: Change the options mode.",
        "Lazy loading: The searchFn mode is used.": "Lazy loading: The searchFn mode is used.",
        "Option": "Option"
      },
      "UserLimitSelectedNumberDemo": {
        "title": "User scenario: The number of selected users is limited.",
        "description": "",
        "maxselectnumber:2,disabled:1": "max select number:2, disabled:1",
        "Option": "Option"
      },
      "MultiKeepOrderDemo": {
        "title": "Sets the selected order source array order or selection order.",
        "description": "Pass keepMultipleOrder When multiple options are selected, the original array sequence is retained. The options are sorted by origin and sorted by user-select.",
        "Current Selec": "Current Selec",
        "Option": "Option"
      },
      "UserSearchNLazyLoadDemo": {
        "title": "User scenario: lazy loading of custom search",
        "description": "",
        "Search and lazy loading are used together.": "Search and lazy loading are used together.",
        "Current Select": "Current Select",
        "This is a longer option for testing.": "This is a longer option for testing.",
        "Option": "Option",
        "New Option": "New Option"
      },
      "UserMailSearchDemo": {
        "title": "User scenario: Combine customized search and template Email search",
        "description": "",
        "Search by name or email address": "Search by name or email address",
        "Name:": "Name:",
        "E-mail address:": "E-mail address:",
        "Option": "Option"
      },
      "ModelValueDemo": {
        "title": "ngModel Value Processing",
        "description": "",
        "Current Select": "Current Select",
        "Option": "Option"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "object-filter": "Use object",
        "custom-search": "Custom Search",
        "select-all": "Select All",
        "select-template": "Customized template",
        "labelization": "Labeling",
        "disabled": "Disabled",
        "allow-clear-value": "Allow clearing values",
        "append-to-body": "Attach to the body.",
        "lazy-load-virtual-scroll": "Virtual scrolling or lazy loading",
        "async-loading": "Asynchronous loading: loading",
        "custom-area": "Custom Area",
        "custom-area-direction": "Customizing Area Orientation and Selecting",
        "multi-keep-order": "Sets the selected order source array order or selection order.",
        "user-limit-selected-number": "User scenario: The number of selected users is limited.",
        "user-search-n-lazyload": "User scenario: lazy loading of custom search",
        "user-mail-search": "User Scenario: Combination of Custom Search and Template - Email Search",
        "model-value": "ngModel Value Processing"
      }
    },
    "cascader": {
      "name": "Cascader",
      "type": "Evolving",
      "path": "cascader",
      "description": "Cascading menu.",
      "tmw": "<div>1. When you want to select data from a set of associated data, such as province/city, company level, and transaction classification.</div> <div>2. When select data from a large data set, you can separate the data by multi-level classification.</div>",
      "basicDemo": {
        "hoverMode": "Hover expansion mode",
        "select": "Please select",
        "clickMode": "Click expansion mode",
        "empty": "The data is empty.",
        "title": "Basic Usage",
        "disableMode": "Disabled mode"
      },
      "lazyloadDemo": {
        "loadChildren": "Click the load submenu.",
        "title": "Click the load submenu.",
        "select": "Please select"
      },
      "multipleDemo": {
        "title": "Multi-choice mode",
        "multiple": "Multi-choice mode",
        "select": "Please select"
      },
      "parentSelectDemo": {
        "title": "Parent can be selected.",
        "description": "In this mode, you can click to select a non-leaf node. In multi-choice mode, you can click checkboxRelation to select the parent-child status association mode of the checkbox.",
        "single": "Single choice",
        "dependence": "Multiple selections (parent-child independent)",
        "select": "Please select",
        "relationDownward": "Multi-choice sub-item association",
        "relationUpward": "Multi-choice association to parent item"
      },
      "searchDemo": {
        "title": "Search Mode",
        "singleSearch": "Single-choice search",
        "multipleSearch": "Multi-choice search",
        "select": "Please select"
      },
      "templateDemo": {
        "title": "Template Type",
        "templateMode": "Template Type",
        "select": "Please select",
        "custom": "Custom"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "multiple-cascader": "Multi-choice type",
        "search-cascader": "Search Type",
        "parent-cascader": "Parent Optional",
        "template-cascader": "Template Type",
        "lazyload-cascader": "Click to load."
      }
    },
    "status": {
      "name": "Status",
      "type": "General",
      "path": "status",
      "description": "Pass interaction results.",
      "tmw": "Indicates the execution result of a task.",
      "basicDemo": {
        "title": "Basic Usage",
        "Succeeded": "Succeeded",
        "erroneous": "erroneous",
        "warnings": "warnings",
        "Initialize": "Initialize",
        "Waiting": "Waiting",
        "running": "running",
        "Invalid": "Invalid"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage"
      }
    },
    "sticky": {
      "name": "Sticky",
      "type": "General",
      "path": "sticky",
      "description": "Sticky.",
      "tmw": "When the user scrolls the screen, the content of an area is visible in the paragraph or the viewable area of the browser.",
      "basicDemo": {
        "title": "Basic Usage",
        "Global Text": "Global text. Change the container to the container where the scroll bar is located. When displayed, you can always touch the top of the screen.",
        "Global Button": "Global Button",
        "base-info": "Basic Information",
        "issue-list": "Requirement List",
        "case-list": "Test Case List",
        "quarlity-result": "Quality evaluation",
        "The basic information is displayed.": "The basic information is displayed.",
        "The requirement list is displayed.": "The requirement list is displayed.",
        "The test case list is displayed.": "The test case list is displayed.",
        "The quality assessment is displayed here.": "The quality assessment is displayed here.",
        "Tips": "Tips",
        "page-roll": "Sticky scrolls as you scroll.",
        "para-roll": "When the paragraph rolls up, sticky will follow.",
        "view": "View can adjust the top and bottom of the window. For example, if the top is covered by a fixed navigation block, set the value of top to the navigation height.",
        "container": "The container command can be used to switch the containers that determine the scrolling status."
      },
      "scrollTargetDemo": {
        "title": "Replace Rolling Container",
        "description": "You can change the scrolling container by setting scrollTarget.",
        "Global Text": "Global text. Change the container to the container where the scroll bar is located. When displayed, you can always touch the top of the screen.",
        "Global Button": "Global Button",
        "base-info": "Basic Information",
        "issue-list": "Requirement List",
        "case-list": "Test Case List",
        "quarlity-result": "Quality evaluation",
        "The basic information is displayed.": "The basic information is displayed.",
        "The requirement list is displayed.": "The requirement list is displayed.",
        "The test case list is displayed.": "The test case list is displayed.",
        "The quality assessment is displayed here.": "The quality assessment is displayed here.",
        "Tips": "Tips",
        "page-roll": "Sticky scrolls as you scroll.",
        "para-roll": "When the paragraph rolls up, sticky will follow.",
        "view": "View can adjust the top and bottom of the window. For example, if the top is covered by a fixed navigation block, set the value of top to the navigation height.",
        "container": "The container command can be used to switch the containers that determine the scrolling status."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "scroll-target": "Replace Rolling Container"
      }
    },
    "nav-sprite": {
      "name": "NavSprite",
      "type": "Navigation",
      "path": "nav-sprite",
      "description": "Nav spritee",
      "tmw": "Generate a reading directory for a reading area to improve reading efficiency",
      "basicDemo": {
        "title": "Basic Usage",
        "description": ""
      },
      "spriteDemo": {
        "title": "Sprite Usage",
        "description": ""
      },
      "scrollDemo": {
        "title": "Scroll Usage",
        "description": "Specifying the Rolling Container."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "sprite-usage": "Sprite Usage",
        "scroll-usage": "Scroll Usage"
      }
    },
    "tabs": {
      "name": "Tabs",
      "type": "Navigation",
      "path": "tabs",
      "description": "Tabs switch.",
      "tmw": "When users want to collect and display large pieces of content in areas at the same level to keep the GUI neat.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": ""
      },
      "withoutContentDemo": {
        "title": "No Content",
        "description": "",
        "activeID": "activeID"
      },
      "customDemo": {
        "title": "Customizing a Template",
        "description": ""
      },
      "typePillsDemo": {
        "title": "Type Pills",
        "description": ""
      },
      "typeOptionsDemo": {
        "title": "Type Options",
        "description": ""
      },
      "typeSliderDemo": {
        "title": "Type Slider",
        "description": ""
      },
      "typeWrappedDemo": {
        "title": "Type Wrapped",
        "description": ""
      },
      "sizeDemo": {
        "title": "Size",
        "description": "Tabs are available in four sizes. You can select a proper size based on your business scenario."
      },
      "beforeChangeDemo": {
        "title": "Intercept Tab Switching",
        "description": "Using beforeChange to intercept tab switchover."
      },
      "addDeleteDemo": {
        "title": "Add / Remove",
        "description": "Add and Remove Tabs"
      },
      "bigDataDemo": {
        "title": "Big data display",
        "description": "You can select the direct on mode and automatic judgment mode."
      },
      "configurableTabsDemo": {
        "title": "Customizing Tabs Display and Arrange",
        "description": "The transfer component is introduced to implement customized tabs display."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "no-set-content": "No Content",
        "custom-template": "Customizing a Template",
        "type-pills": "Type Pills",
        "type-options": "Type Options",
        "type-slider": "Type Slider",
        "type-wrapped": "Type Wrapped",
        "size": "Size",
        "intercept-tab-switch": "Intercept Tab Switching",
        "add-delete": "Add / Remove",
        "big-data": "Big data display",
        "custom-tabs-display-and-arrangement": "Customizing Tabs Display and Arrange"
      }
    },
    "tags": {
      "name": "Tags",
      "type": "Data display",
      "path": "tags",
      "description": "Tags.",
      "tmw": "When multiple tags need to be displayed,",
      "customDemo": {
        "title": "Single Tag",
        "description": "Defines the label style by using the labelStyle attribute."
      },
      "basicDemo": {
        "title": "Tag Group",
        "description": "The tag group can be a string array or an object array. In the object array, you can use displayProperty and titleProperty to set the label display value and title display value, and use labelStyle to set the label style."
      },
      "hideDemo": {
        "title": "Multi-Label Exceed Hide",
        "description": "When the total width of the tag group exceeds the fixed width and hideBeyondTags is set to true, unnecessary tags are hidden. After +x is clicked, the remaining tags are displayed."
      },
      "anchorLinkValues": {
        "single-tag": "Single Tag",
        "tags-group": "Tag Group",
        "hide-tags": "Multi-Label Exceed Hide"
      }
    },
    "tags-input": {
      "name": "TagsInput",
      "type": "Data entry",
      "path": "tags-input",
      "description": "Enter multiple tags.",
      "tmw": "When you need to enter multiple tags.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "asyncDemo": {
        "title": "Asynchronous data source"
      },
      "customizeDemo": {
        "title": "Customize",
        "description": "The tag can be entered only when it contains 'item'."
      },
      "virtualScrollDemo": {
        "title": "Virtual scrolling"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "customize": "Customize",
        "async-input": "Asynchronous data source",
        "virtual-scroll": "Virtual scrolling"
      }
    },
    "time-axis": {
      "name": "TimeAxis",
      "type": "Data display",
      "path": "time-axis",
      "description": "Display timeline.",
      "tmw": "When you want to show what shoud be done in what time point.",
      "allStatesDemo": {
        "timeLeft": "The time point is on the left.",
        "timeBottom": "The time point is at the bottom.",
        "title": "Basic Usage",
        "description": "Define time parameter position only when direction is vertical."
      },
      "directionDemo": {
        "title": "Setting direction parameters",
        "description": "Use direction to configure the direction of the time line."
      },
      "templateDemo": {
        "description": "Description.",
        "title": "Customizing Content Using a Template"
      },
      "alternativeModeDemo": {
        "title": "Customizing the Content Direction of a Time Node",
        "description": "Customizing the Content Direction of a Time Node"
      },
      "seperateWayDemo": {
        "title": "The time node is used independently",
        "description": "Each time node can be defined independently."
      },
      "htmlContentDemo": {
        "title": "Content Use HTML"
      },
      "customDotDemo": {
        "title": "Time Point Customization"
      },
      "singleDemo": {
        "title": "Unilateral Mode",
        "description": "Set mode to top|bottom|left|right to set the time axis to the one-sided mode for displaying content in a specified position."
      },
      "anchorLinkValues": {
        "basic-usage": "Setting Time Position",
        "direction": "Setting Direction Parameters",
        "custom-dot": "Time Point Customization",
        "content-with-html": "Content Use HTML",
        "content-with-template": "Customizing Content Using a Template",
        "content-with-alternative-mode": "Customizing the Content Direction of a Time Node",
        "seperate-way": "The time node is used independently",
        "single": "Unilateral Mode"
      }
    },
    "toast": {
      "name": "Toast",
      "type": "Feedback",
      "path": "toast",
      "description": "Information notification.",
      "tmw": "This is used to display a prompt information to users and will disappear after several seconds.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "The icon is not displayed in common mode."
      },
      "styleDemo": {
        "title": "Custom Style"
      },
      "lifeDemo": {
        "title": "Timeout interval",
        "description": "If the timeout interval is set and no title is set, the title and close button are not displayed."
      },
      "singleDemo": {
        "title": "Each message uses a separate timeout interval",
        "description": "When the timeout mode is set to single, each message uses its own lifetime as the timeout interval. If the timeout interval is not set, the system determines the timeout interval based on severity. If the timeout interval is not set, the default timeout interval is 5000 ms."
      },
      "serviceDemo": {
        "title": "Service Function",
        "description": "Create a toast global notification using services."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "life": "Timeout interval",
        "style": "Custom Style",
        "toast-service": "Service Function",
        "single": "Each message uses a separate timeout interval"
      }
    },
    "tooltip": {
      "name": "Tooltip",
      "type": "Feedback",
      "path": "tooltip",
      "description": "Text notification.",
      "tmw": "When users move the cursor to a text, they can see what should do next.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "delayDemo": {
        "title": "Delay Trigger",
        "description": "This event is triggered only when the mouse pointer is moved in for more than [mouseEnterDelay] milliseconds. The default value is 150 ms to prevent flashing caused by unintentional strokes. The toolTip component is hidden only after [mouseLeaveDelay] milliseconds after the cursor is moved out. The default value is 100 milliseconds."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "delay-trigger": "Delay Trigger"
      }
    },
    "read-tip": {
      "name": "ReadTip reading tips",
      "type": "Feedback",
      "path": "read-tip",
      "description": "Reading notification component.",
      "tmw": "When you need to prompt for specific content in the html document.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Set selector to select the element to be displayed in the readtip, and transfer title and content to set the content to be displayed."
      },
      "multiDemo": {
        "title": "Include Multiple Readtip",
        "description": "Set the readtip display mode for different elements when multiple rules are transferred."
      },
      "templateDemo": {
        "title": "Display Content with Template",
        "description": "You can specify the content to be displayed by importing template. When importing template, you do not need to specify title and content."
      },
      "asyncDemo": {
        "title": "Get Data Asynchronous"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "multi-usage": "Include Multiple Readtip",
        "template-usage": "Display Content with Template",
        "async-usage": "Get Data Asynchronous"
      }
    },
    "mention": {
      "name": "Mention",
      "type": "Feedback",
      "path": "mention",
      "description": "mention component",
      "tmw": "When need to mention someone or something.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Associate a piece of information in the specified information list."
      },
      "asyncDemo": {
        "title": "Async",
        "description": "Associate asynchronous data."
      },
      "prefixDemo": {
        "title": "Custom Prefix",
        "description": "Customize one or more prefixes."
      },
      "customDemo": {
        "title": "Custom Template",
        "description": "Customize a template for displaying a single record in the list."
      },
      "toggleDemo": {
        "title": "Use Separators",
        "description": "To avoid confusion with other content, only the prefix + keyword can be preceded by a separator to trigger and end the component. The default separator is a space."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "async-usage": "Async Usage",
        "custom-prefix": "Custom Prefix",
        "custom-template": "Custom Template",
        "use-separator": "Use Separators"
      }
    },
    "toggle": {
      "name": "Toggle",
      "type": "Data entry",
      "path": "toggle",
      "description": "Toggle.",
      "tmw": "When there are two states need to be switched, for example, enabled/disabled.",
      "basicDemo": {
        "title": "Basic Usage",
        "basic": "Basic Style",
        "disable": "Disabled",
        "small": "Bidirectional binding (small size)",
        "middle": "Callback Event (Standard)",
        "large": "Custom Style (Large Size)",
        "sure": "ok",
        "cancel": "cancels"
      },
      "twoBindingDemo": {
        "title": "NgModel"
      },
      "customDemo": {
        "title": "Custom Style"
      },
      "callbackDemo": {
        "title": "Callback Event"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "two-binding": "NgModel",
        "callback": "Callback Event",
        "custom": "Custom Style"
      }
    },
    "tree": {
      "name": "Tree",
      "type": "Data display",
      "path": "tree",
      "description": "A kind of structure.",
      "tmw": "Folders, organizational structures, taxonomy, countries, regions, and so on, most of the structures in the world are tree-shaped. The tree can display the hierarchical relationship completely and provide interactive functions such as expanding, folding, and selecting.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "The basic usage of tree component.",
        "Parent node": "Parent node",
        "unfold": "unfold",
        "Leaf node": "Leaf node",
        "No child node": "No child node",
        "Dynamic loading": "Dynamic loading",
        "folding": "folding"
      },
      "checkControlDemo": {
        "title": "Checkable Tree",
        "description": "The usage of checkableRelation controls the performance of parent and child nodes during check.",
        "Parent node": "Parent node",
        "unfold": "unfold",
        "Leaf node": "Leaf node",
        "No child node": "No child node",
        "Dynamic loading": "Dynamic loading",
        "folding": "folding"
      },
      "treeFactoryDemo": {
        "title": "Common treeFactory functions",
        "description": ""
      },
      "customKeyDemo": {
        "title": "Custom Key",
        "description": "Custom key of tree node",
        "Subnode": "Subnode",
        "Parent node": "Parent node"
      },
      "customLoadingDemo": {
        "title": "Node Lazyload",
        "Leaf node": "Leaf node",
        "No child node": "No child node",
        "Dynamic loading": "Dynamic loading",
        "Parent node": "Parent node",
        "unfold": "unfold",
        "folding": "folding"
      },
      "customizeDemo": {
        "title": "Custom Icon",
        "description": "Customizing operation buttons and node icons.",
        "Parent node": "Parent node",
        "Subnode": "Subnode",
        "Status": "Status"
      },
      "draggableDemo": {
        "title": "Dragable tree",
        "description": "The dragglable attribute of operableTree is used to configure the drag function of nodes and allow external elements to be dragged into the tree.",
        "Parent node": "Parent node",
        "Subnode": "Subnode",
        "external dragable element": "external dragable element"
      },
      "mergeNodeDemo": {
        "title": "Merging Nodes",
        "description": "When a node has only one subnode, the node is merged.",
        "Parent node": "Parent node",
        "Leaf node": "Leaf node"
      },
      "operateBtnDemo": {
        "title": "Operation button",
        "description": "External operation buttons and virtual floating buttons can be defined.",
        "Parent node": "Parent node",
        "Subnode": "Subnode"
      },
      "searchFilterDemo": {
        "title": "Search Filtering",
        "description": "You can use the searchTree method in treeFactory to search for or filter nodes.",
        "Parent node": "Parent node",
        "Subnode": "Subnode"
      },
      "virtualScrollDemo": {
        "title": "Operable tree in the case of a large amount of data",
        "description": "Use virtual scrolling to handle the loading problem of a large amount of data, and handle the problem that the operation of a large amount of data takes a long time and freezes.",
        "Parent node": "Parent node",
        "Try dynamic lazy loading": "Try dynamic lazy loading",
        "Subnode": "Subnode",
        "Parent node with 1000 child nodes": "Parent node with 1000 child nodes",
        "Node loading": "Node loading",
        "Subnode loading": "Subnode loading",
        "I'm an extra data ID.": "I'm an extra data ID.",
        "I'm an extra data name.": "I'm an extra data name.",
        "New node": "New node",
        "Add a node.": "Add a node.",
        "Leaf node": "Leaf node",
        "unfold": "unfold"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "merge-node": "Merging Nodes",
        "lazy-loading": "Node Lazyload ",
        "custom-key": "Custom Key",
        "check-control-tree": "Checkable Tree",
        "checkable-tree": "Checkable Tree",
        "operation-button": "Operation button",
        "search-filtering": "Search Filtering",
        "custom-icon": "Custom Icon",
        "drag-and-drop-tree": "Dragable tree",
        "tree-factory": "Common treeFactory functions",
        "virtual-scroll": "Operation tree of large data volume"
      }
    },
    "typography": {
      "name": "Typography",
      "type": "Evolving",
      "path": "typography",
      "description": "Text formatting.",
      "tmw": "When you want to format the title, paragraph, help or anything else.",
      "titleDemo": {
        "title": "Title Usage",
        "description": "Defining the title style through the d-title tag."
      },
      "textDemo": {
        "title": "Text Usage",
        "description": "Defining a Text Style Through the d-text Tag."
      },
      "customizeDemo": {
        "title": "Customize",
        "description": "Customizing the Display Template for Editing."
      },
      "editableDemo": {
        "title": "Editable Usage",
        "description": "You can customize the initial template, edit the template, and set the content character string and content projection. Allows users to directly click the edit and operation icons to edit and copy."
      },
      "textOverflowDemo": {
        "title": "Text Overflow",
        "description": "Single-line and multi-line scenarios are supported. The style mode is preferred.",
        "singleLineContent": "DevUI components are derived from a lots of years of precipitation of Huawei's internal businesses. Only components that support flexible configuration can meet different demands.",
        "multiRowContent": "DevUI is an open-source front-end solution oriented to mid and back-end products of enterprises. The design values are based on the concepts which are \"simple\", \"immersive\", and \"flexible\". It aims to provide a standard design system for designers and front-end developers. It is also an enterprise-class out-of-the-box product that meets various application scenarios.",
        "singleLineTitle": "Single line Text Using Style",
        "multiRowIsWebkitTitle": "Multiline Text if the browser supports webkit",
        "multiRowNotWebkitTitle": "Multiline Text by calculation",
        "multiRowExpandTitle": "Multiline Text Using collapse"
      },
      "adaptiveInputDemo": {
        "title": "Adaptive Input",
        "description": "During editing, expands the input to textarea, then restored. This feature enables users to easily input and read a large amount of text when using input."
      },
      "anchorLinkValues": {
        "title-usage": "Title Usage",
        "text-usage": "Text Usage",
        "editable-usage": "Editable Usage",
        "text-overflow": "Text Overflow",
        "adaptive-input": "Adaptive Input"
      }
    },
    "upload": {
      "name": "Upload",
      "type": "Data entry",
      "path": "upload",
      "description": "File upload.",
      "tmw": "When you want to upload files to a backend server.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Single file upload, drag file upload, ngModel and disabled.",
        "singleText": "Single file",
        "clickToUpload": "Click Upload.",
        "dragable": "Dragging a single file to upload",
        "dragToUpload": "Drag the file to upload.",
        "auto": "Automatic upload",
        "disabled": "Upload forbidden"
      },
      "multiDemo": {
        "title": "Upload Multiple Files",
        "description": "Multiple files upload, drag file upload, customize and disabled.",
        "multiText": "Uploading multiple files",
        "dragable": "Multiple files can be dragged and uploaded.",
        "multiList": "Displaying multiple files in a list",
        "disabled": "Multi-file upload is prohibited."
      },
      "autoDemo": {
        "title": "Automatic Upload",
        "description": "Set automatic upload through autoUpload."
      },
      "customizeDemo": {
        "title": "Customize",
        "description": "Click to customize the upload button.  Use preloadFilesRef to set selectedFilesList Template, and use uploadedFilesRef to  Set the template of the uploadedFilesList."
      },
      "dynamicDemo": {
        "title": "Dynamic Upload Parameters",
        "description": "Users can use beforeUpload to dynamically modify upload parameters.",
        "text": "Dynamically Modifying Upload Parameters Before Uploading"
      },
      "areaDemo": {
        "title": "Customize Area to Upload",
        "description": "Users can use the dUpload command to upload files in any area."
      },
      "sliceDemo": {
        "title": "Uploading Slice",
        "description": "You can set the size of a segment to upload."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "multi-files": "Upload Multiple Files",
        "auto-upload": "Automatic Upload",
        "custom": "Customize",
        "dynamic-upload-options": "Dynamic Upload Parameters",
        "customize-area-upload": "Customize Area to Upload",
        "upload-slice": "Uploading Slice"
      }
    },
    "user-guide": {
      "name": "UserGuide",
      "type": "Navigation",
      "path": "user-guide",
      "description": "A user guide that can remotely orchestrate steps. Multiple sets of guides can be orchestrated and interact with users in addition to basic visual instructions.",
      "basicDemo": {
        "title": "Component Mode",
        "description": "This component is introduced on the page to be used. The user guide floating entrance is displayed in the lower left corner of the page. Click this component and select the tutorial you want to experience to start the guide."
      },
      "serviceWayDemo": {
        "title": "Service Mode",
        "description": "Use the user-guide as a service. The interface is exposed to users. The entrance to a tutorial can be customized. In this mode, UserGuideService needs to be introduced to the component that uses the user-guide."
      },
      "anchorLinkValues": {
        "user-guide-basic": "Component Mode",
        "user-guide-service-way": "Service Mode"
      }
    },
    "input-number": {
      "name": "InputNumber",
      "type": "Data entry",
      "path": "input-number",
      "description": "Enter a number.",
      "tmw": "Used to obtain the standard value.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Transfer the value of size. The value can be customized."
      },
      "disabledDemo": {
        "title": "Disabled",
        "description": "When disabled is set to true, user input is not allowed."
      },
      "emptyDemo": {
        "title": "Allow Null",
        "description": "When allowEmpty is set to true, the value of the input box can be empty. If the value is empty, null is returned. The input data can be undefined or null."
      },
      "placeholderAndMaxLengthDemo": {
        "title": "Set Placeholder and Maxlength",
        "description": "The placeholder prompt can be transferred or maxLength can be used to limit the maximum input length."
      },
      "regDemo": {
        "title": "Using Regular Expression",
        "description": "Regular or regular character strings are allowed to be input. The input regular character string is matched first. If no regular character string is input, the input regular character string is not restricted."
      },
      "decimalLimitDemo": {
        "title": "Avoid Decimal",
        "Limit Decimal": "Limit Decimal"
      },
      "anchorLinkValues": {
        "number-basic": "Basic Usage",
        "number-disabled": "Disabled",
        "number-empty": "Allow Null",
        "number-placeholder-maxlength": "Set Placeholder and Maxlength",
        "number-reg": "Using Regular Expression",
        "decimal-limit": "Avoid Decimal"
      }
    },
    "tree-select": {
      "name": "TreeSelect",
      "type": "Data entry",
      "path": "tree-select",
      "description": "Tree-shaped selection box.",
      "tmw": "Folders, organizational structures, taxonomy, countries, regions, and so on, most of the structures of everything in the world are tree-shaped. The tree control can display the hierarchical relationship completely and provide interactive functions such as expanding, folding, and selecting.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "",
        "Standard: Single Select": "Standard: Single Select",
        "Standard: Multiple Select": "Standard: Multiple Select",
        "Custom Width: Single Select": "Custom Width: Single Select",
        "Disabled: Single Select": "Disabled: Single Select"
      },
      "labelizationDemo": {
        "title": "Tag-based configuration",
        "description": "",
        "Standard: Single Select": "Standard: Single Select",
        "Standard: Multiple Select": "Standard: Multiple Select",
        "AllowClear:SingleSelect(allowUnselectparametermustbetrueandenablelabelizationDemomustbefalse, whichisthedefaultvalue)": "AllowClear:SingleSelect(allowUnselectparametermustbetrueandenablelabelizationDemomustbefalse, whichisthedefaultvalue)",
        "Standard: Multiple Select(Disabled)": "Standard: Multiple Select(Disabled)"
      },
      "leafOnlyDemo": {
        "title": "Only leaf nodes can be selected.",
        "description": "",
        "Leaf Only: Single Select": "Leaf Only: Single Select",
        "Leaf Only: Multiple Select": "Leaf Only: Multiple Select"
      },
      "hooksDemo": {
        "title": "Hook called upon completion of initialization",
        "description": "",
        "Open on init: Single Select": "Open on init: Single Select"
      },
      "searchableDemo": {
        "title": "Easy search tree",
        "description": "",
        "Standard: Single Select": "Standard: Single Select",
        "Standard: Multiple Select": "Standard: Multiple Select"
      },
      "appendToDemo": {
        "title": "Append To Element Capability",
        "description": "",
        "Standard: Single Select Append To Body": "Standard: Single Select Append To Body",
        "Standard: Multiple Select Append To Body": "Standard: Multiple Select Append To Body",
        "Custom Width: Single Select Append To Body": "Custom Width: Single Select Append To Body",
        "click me!": "click me!"
      },
      "customIconDemo": {
        "title": "Customizing icons and selected nodes",
        "description": "",
        "Standard: iconTemplatePosition": "Standard: iconTemplatePosition",
        "Standard: iconTemplateInput": "Standard: itemTemplateInput + iconTemplateInput"
      },
      "customTemplateDemo": {
        "title": "Custom Area",
        "description": "Use customViewTemplate Defining a Custom Area."
      },
      "keysDemo": {
        "title": "Custom key",
        "description": "",
        "Standard: treeNodeIdKey": "Standard: treeNodeIdKey",
        "Standard: treeNodeChildrenKey": "Standard: treeNodeChildrenKey",
        "Standard: treeNodeTitleKey": "Standard: treeNodeTitleKey"
      },
      "iconParentDemo": {
        "title": "Customizing the node expansion and closing icon",
        "description": "",
        "Standard: iconParent": "Standard: iconParent"
      },
      "virtualScrollDemo": {
        "title": "Virtual scroll"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "labelization": "Tag-based configuration",
        "leaf-only": "Only leaf nodes can be selected.",
        "init-hooks": "Hook called upon completion of initialization",
        "simple-search": "Easy search tree",
        "append-to-element": "Append To Element Capability",
        "custom-icon": "Customizing icons and selected nodes",
        "keys": "Custom key",
        "custom-template": "Custom Area",
        "icon-parent": "Expand and close the icon.",
        "virtual-scroll": "Virtual scroll"
      }
    },
    "slider": {
      "name": "Slider",
      "type": "Data entry",
      "path": "slider",
      "description": "Slider.",
      "tmw": "Used when you need to select a value from a specific range.",
      "basicDemo": {
        "title": "Basic Usage",
        "ngModel": "Bidirectional binding",
        "stepLimit": "Limit step"
      },
      "disabledDemo": {
        "title": "Input forbidden state",
        "description": "When disabled is set to true, user input is not allowed."
      },
      "customDemo": {
        "title": "Customized popover content displayed",
        "description": "Use the tipsRenderer parameter to transfer the function to customize the content displayed in the POPU."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "slider-disabled": "Input forbidden state",
        "slider-custom": "Customized popover content displayed"
      }
    },
    "splitter": {
      "name": "Splitter",
      "type": "layouts",
      "path": "splitter",
      "description": "Split page.",
      "tmw": "When you want to dynamically adjust the size of different page layout areas.",
      "basicDemo": {
        "title": "Basic Usage",
        "leftPane": "Left panel",
        "leftPaneContent": "Content area on the left. The width is 30% and the minimum width is 20%.",
        "rightPane": "Right panel",
        "rightPaneContent": "Content area on the right"
      },
      "verticalDemo": {
        "title": "Vertical Layout Usage",
        "topPane": "Upper panel",
        "topPaneContent": "Height 200px",
        "midPane": "Middle panel",
        "midPaneContent": "Height adaptation",
        "bottomPane": "lower plate",
        "bottomPaneContent": "Height: 100 px, non-adjustable"
      },
      "combineDemo": {
        "title": "Combination Layout Usage",
        "leftPane": "Left panel",
        "leftPaneContent": "Content area on the left. The width is 30% and the minimum width is 20%.",
        "topPane": "Top panel",
        "topPaneContent": "Height 50%",
        "bottomPane": "Bottom panel",
        "bottomPaneContent": "Height adaptation",
        "bottomPane2": "Bottom panel",
        "bottomPaneContent2": "Height adaptation"
      },
      "directionDemo": {
        "title": "Specifies the folding direction",
        "leftPane": "Left panel",
        "leftPaneContent": "Content area on the left. The width is 30% and the minimum width is 20%.",
        "midPane": "Middle panel",
        "midPaneContent": "Middle content area, specifying the folding direction to fold forward",
        "rightPane": "Right panel",
        "rightPaneContent": "Content area on the right"
      },
      "shrinkDemo": {
        "title": "Collapse and collapse menu",
        "rightPane": "Right panel",
        "rightPaneContent": "Content area on the right",
        "content1": "Content 1",
        "childContent1": "Subcontent 1",
        "childContent2": "Subcontent 2",
        "childContent3": "Subcontent 3",
        "content2": "Content 2",
        "content3": "Content 3",
        "content4": "Content 4",
        "content5": "Content 5"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "vertical-layout": "Vertical Layout Usage",
        "combine-layout": "Combination Layout Usage",
        "certain-unfold-direction": "Specifies the folding direction.",
        "shrink-show-menu": "Collapse and collapse menu"
      }
    },
    "layout": {
      "name": "Layout",
      "type": "layout",
      "path": "layout",
      "description": "Page Layout, including Responsive Grid, Flex, Spacing, Responsive Class, Responsive Style, and Typical Layout Container.",
      "tmw": "When the user needs to use Flex layouts, spacing settings, responsive layouts, typical layouts, etc.",
      "basicDemo": {
        "title": "Grid Basic Usage",
        "description": "Responsive breakpoints correspond to (px): ss > 0, ms >= 360, mm >= 768, ml >= 1024, xs >= 1280, sm >= 1440, md >= 1600, lg >= 1760, xl >= 1920. When combining settings, ss breakpoints represent common settings."
      },
      "gutterDemo": {
        "title": "Grid Gutter",
        "description": "The interval is implemented by padding in a grid."
      },
      "spaceDemo": {
        "title": "Grid Space",
        "description": "The interval is implemented by using the block margin in the grid."
      },
      "offsetDemo": {
        "title": "Column Offset"
      },
      "alignJustifyDemo": {
        "title": "Alignment"
      },
      "orderDemo": {
        "title": "Order",
        "description": "Order: 0, 1, 2, ..., 24."
      },
      "flexDemo": {
        "title": "Flex",
        "description": "[dFlex] is generic and you can use it elsewhere."
      },
      "spaceGutterDemo": {
        "title": "Gutter And Space(Universal)",
        "description": "[dGutter] is common to [dSpace] and you can use it elsewhere."
      },
      "classDemo": {
        "title": "Responsive Class",
        "description": "Responsive Class setting support. Classes set within multiple breakpoint ranges can be combined."
      },
      "styleDemo": {
        "title": "Responsive Style",
        "description": "Responsive Style setting support. Styles set within multiple breakpoint ranges can be combined."
      },
      "layoutContainerDemo": {
        "title": "Layout Container",
        "description": "Grid Basic Usage"
      },
      "layoutContainerDemo1": {
        "title": "Layout Container Scenario 1",
        "description": "Common top, middle, and bottom layout."
      },
      "layoutContainerDemo2": {
        "title": "Layout Container Scenario 2",
        "description": "Common top, middle, and bottom layouts and sidebar layouts."
      },
      "anchorLinkValues": {
        "basic-usage": "Grid Basic Usage",
        "gutter": "Grid Gutter",
        "space": "Grid Space",
        "offset": "Column Offset",
        "align-justify": "Alignment",
        "order": "Order",
        "flex": "Flex",
        "space-gutter": "Gutter And Space(Universal)",
        "class": "Responsive Class",
        "style": "Responsive Style",
        "layout-container": "Layout Container",
        "layout-container-scenario1": "Layout Container Scenario 1",
        "layout-container-scenario2": "Layout Container Scenario 2"
      }
    },
    "gantt": {
      "name": "Gantt",
      "type": "Evolving",
      "path": "gantt",
      "description": "Gantt.",
      "tmw": "When user want to use a bar-shaped chart to display the internal relationship of project, progress, and other time-related system progress over time.",
      "basicDemo": {
        "title": "Basic Usage",
        "description1": "The d-gantt-scale container functions as the location parent element of the time axis. The position or table, td, th, and body elements must be set.",
        "description2": "The widths of the d-gantt-scale and d-gantt-bar containers must be calculated based on the start time and end time using the method provided by GanttService. After initialization, the ganttScaleConfigChange dynamic settings must be subscribed.",
        "description3": "The time bar move and resize events change the start and end time of the time bar and the start and end time of the time axis. The time bar resize, move, and ganttScaleConfigChange events are subscribed to to to record the change.",
        "description4": "Respond to the move and resize events of the time bar to adjust the scrolling of the outermost container for better experience."
      },
      "withDataDemo": {
        "title": "Combined With Datatable"
      },
      "anchorLinkValues": {
        "gantt-basic": "Basic Usage",
        "gantt-in-datatable": "Combined With Datatable"
      }
    },
    "text-input": {
      "name": "Text-input",
      "type": "Data entry",
      "path": "text-input",
      "description": "Text input box.",
      "tmw": "When you want to manually enter text.",
      "basicDemo": {
        "title": "Basic Usage",
        "placeholder": "Please enter the content."
      },
      "sizeDemo": {
        "title": "Size"
      },
      "passwordVisibleDemo": {
        "title": "Password Input"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "size": "Size",
        "password-input": "Password Input"
      }
    },
    "textarea": {
      "name": "Textarea",
      "type": "Data entry",
      "path": "textarea",
      "description": "A text area.",
      "tmw": "It is used when a large number of text need to be entered.",
      "basicDemo": {
        "title": "Basic Usage",
        "placeholder": "Please enter the content."
      },
      "resizeDemo": {
        "title": "Resizable",
        "placeholder": "Please enter the content."
      },
      "countDemo": {
        "title": "Listening input and maximum number of words"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "resize": "Resizable",
        "count": "Listening input and maximum number of words"
      }
    },
    "steps-guide": {
      "name": "StepsGuide",
      "type": "Navigation",
      "path": "steps-guide",
      "description": "Guide user to understand logic.",
      "tmw": "When there are some new features and is required to tell user how to use it.",
      "basicDemo": {
        "title": "Basic Usage",
        "description": "Sets the sequence of displaying a group of operation instructions.",
        "Current Step": "Current Step",
        "Operation Output": "Operation Output"
      },
      "positionDemo": {
        "title": "Position",
        "description": "A total of 8 pop-up positions are supported."
      },
      "customDemo": {
        "title": "Custom",
        "description": "Customizing the Position and Elements of the Operation Guide."
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "position": "Position",
        "custom": "Custom"
      }
    },
    "polyfill": {
      "name": "Polyfills",
      "type": "Extended service",
      "path": "polyfill",
      "description": "Polyfill.",
      "tmw": "To solve the method that is not supported by the browser of an earlier version.",
      "basicDemo": {
        "title": "Usage",
        "description": "Currently, there are few implementation methods and are mainly used by the rich text component. Therefore, the putty script file is stored in the rich text module. You can insert the following information into src/polyfills.ts: import' ng-devui/add-ons/editorx/polyfill '; The putty script is only a piece of JS code that is independently executed. You can also insert a static resource into the page for use.",
        "name": "Polyfills",
        "license": "License",
        "size": "Size",
        "browser": "Browser",
        "des": "Description",
        "remove": "Removes an object from the DOM tree to which it belongs",
        "matches": "Check whether the specified selector string is matched. Browsers of earlier versions implement the MatchesSelector method with their own prefix. For example, msMatchesSelector",
        "closest": "The ancestor element that matches a particular selector and is closest to the current element(or the current element itself)",
        "event": "Events that occur in the DOM",
        "forEach": "Method of sequentially traversing the collection of nodes"
      },
      "anchorLinkValues": {
        "basic-usage": "Usage"
      }
    },
    "time-picker": {
      "name": "TimePicker",
      "type": "Evolving",
      "path": "time-picker",
      "description": "Enter or select a time.",
      "tmw": "If you need to enter a time, click the standard input box and select a time from the displayed panel.",
      "basicDemo": {
        "basic": "Basic Usage",
        "defaultValue": "Sets the initial value. This function is enabled by default.",
        "setDisable": "Disabled",
        "title": "Basic Usage"
      },
      "customDemo": {
        "template": "Importing a template",
        "chooseNow": "Select Now",
        "chooseTime": "Select 22 points",
        "title": "Importing a template"
      },
      "formatDemo": {
        "setting": "Set the format, maximum value, and minimum value.",
        "title": "Format, Max, and Min"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "format": "formatting",
        "custom": "Importing a template"
      }
    },
    "number-trans": {
      "name": "NumberTranslate",
      "type": "Data display",
      "path": "number-trans",
      "description": "Digital Format Conversion",
      "tmw": "This command is used when the number format needs to be converted.",
      "basicDemo": {
        "beforeTrans": "Before Conversion",
        "afterTrans": "After Conversion",
        "title": "Conversion Instance"
      }
    },
    "relative-time": {
      "name": "RelativeTime",
      "type": "Data display",
      "path": "relative-time",
      "description": "Show relative time.",
      "tmw": "When you want to display the relative time based on the current time.",
      "basicDemo": {
        "beforeTrans": "Before Conversion",
        "afterTrans": "After Conversion",
        "title": "Conversion Example",
        "description": "Introduce the RelativeTimeModule and use the dRelativeTime pipe to convert the date."
      },
      "customDemo": {
        "title": "customizing comparison time demo",
        "description": "Do not compare the current time with the current time. Customize the comparison time. For example, compare the comparison time with 2015-05-20 12:00:00."
      }
    },
    "category-search": {
      "name": "CategorySearch",
      "type": "Data entry",
      "path": "category-search",
      "description": "Searching for a listing by field.",
      "tmw": "Select multiple options, such as single-choice, multiple-choice, date selection, and tree selection, to help you filter required data easily and accurately",
      "basicDemo": {
        "title": "Basic Usage",
        "description": ""
      },
      "customDemo": {
        "title": "Customize drop-down list box",
        "description": "Use a template to customize the drop-down list box"
      },
      "autoScrollDemo": {
        "title": "Large-scale data display optimization",
        "description": ""
      },
      "extendDemo": {
        "title": "Customize extend buttons",
        "description": "Add options to disable the save button by entering, then use the customize button reset them"
      },
      "anchorLinkValues": {
        "basicDemo": "Basic Usage",
        "customDemo": "Customize drop-down list box",
        "extendDemo": "Customize extend buttons",
        "autoScrollDemo": "Large-scale data display optimization"
      }
    },
    "datepicker-pro": {
      "name": "DatepickerPro",
      "type": "Experimental",
      "path": "datepicker-pro",
      "description": "Component for entering or selecting a date.",
      "tmw": "The user needs to enter a date. When you need to click the standard input box, the date panel is displayed for you to select.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "markedTypeDemo": {
        "title": "Date Mark"
      },
      "showTimeDemo": {
        "title": "Show Time"
      },
      "templateDemo": {
        "title": "Customizing an Extended Area"
      },
      "monthYearDemo": {
        "title": "Month and Year picekr"
      },
      "rangePickerDemo": {
        "title": "Range Picker"
      },
      "hostTemplateDemo": {
        "title": "Custom Host"
      },
      "rangeTemplateDemo": {
        "title": "Template Usage for Range Mode"
      },
      "static-panelDemo": {
        "title": "Calender Panel Mode",
        "ensure": "Ensure"
      },
      "select-type": {
        "title": "Service scenario: date selector of the select type",
        "changeStart": "Change Side"
      },
      "tab-typeDemo": {
        "title": "Service scenario: Tab switching between multiple selection types",
        "ensure": "Ensure"
      },
      "anchorLinkValues": {
        "basic-usage": "Basic Usage",
        "mark-type": "Date Marked",
        "show-time": "Show Time",
        "template": "Customizing an Extended Area",
        "monthYear": "Month & Year picker",
        "rangePicker": "Range Picker",
        "host-template": "Custom Host",
        "rangeTemplate": "Template Usage for Range Mode",
        "datepicker-pro-static-panel": "Calender Panel Mode",
        "select-type": "Service scenario: date selector of the select type",
        "tab-typeDemo": "Service scenario: date selector of the select type"
      }
    },
    "trend": {
      "name": "Trend",
      "type": "Data Enter",
      "path": "trend",
      "description": "Digital display with trends",
      "tmw": "Displays individual data and its trend.",
      "basicDemo": {
        "title": "Basic Usage"
      },
      "trend-icon-template": {
        "title": "Custom Icon Template"
      },
      "showTrendDemo": {
        "title": "Control Trend Showing"
      },
      "trendPositionDemo": {
        "title": "Trend Showing Position"
      },
      "customTrendStyleDemo": {
        "title": "Custom Trend Style"
      },
      "withSubtextDemo": {
        "title": "Trend With SubText",
        "description": "If the actual use requires a percent sign, you can customize the style when the fraction is 95%, 222/250"
      },
      "anchorLinkValues": {
        "basicDemo": "Basic Usage",
        "trend-icon-template": "Custom Icon Template",
        "show-trend-usage": "Control Trend Showing",
        "trend-position-usage": "Trend Showing Position",
        "custom-trend-style-usage": "Custom Trend Style",
        "with-subtext-usage": "Trend With SubText"
      }
    },
    "line-chart": {
      "name": "Line Chart",
      "type": "Chart Template",
      "path": "line-chart",
      "description": "line chart for basic data",
      "tmw": "show basic data linear change",
      "line-chartDemo": {
        "title": "basic line chart",
        "threshold": "threshold line chart"
      },
      "threshold-chartDemo": {
        "title": "threshold line chart"
      },
      "compare-chartDemo": {
        "title": "compare line chart"
      },
      "anchorLinkValues": {
        "echarts-temp-line-chart": "basic line chart",
        "threshold-temp-line-chart": "threshold line chart"
      }
    },
    "hex-bin-chart": {
      "name": "Hex Bin Chart",
      "type": "Chart Template",
      "path": "hex-bin-chart",
      "description": "Discrete data comparison",
      "tmw": "Display data comparison of discrete data",
      "auto-chartDemo": {
        "title": "Auto-layout binning diagram"
      },
      "anchorLinkValues": {
        "auto-chartDemo": "Auto-layout binning diagram"
      }
    },
    "map-chart": {
      "name": "Map Chart",
      "type": "Chart Template",
      "path": "map-chart",
      "description": "show region data",
      "tmw": "show basic data in region",
      "china-province": {
        "title": "China Province Data Map"
      },
      "china-city-province": {
        "title": "China City Map"
      },
      "anchorLinkValues": {
        "china-province": "China Province Data Map",
        "china-city-province": "China City Map "
      }
    },
    "bar-chart": {
      "name": "Bar Chart",
      "type": "Template Chart",
      "path": "bar-chart",
      "description": "Line chart of basic data",
      "tmw": "Displays basic linear data changes.",
      "echarts-bar-chart": {
        "title": "Basic Histogram"
      },
      "echarts-bar-stacked": {
        "title": "Stacked bar chart"
      },
      "echarts-bar-two": {
        "title": "Bidirectional Histogram"
      },
      "echarts-bar-line": {
        "title": "Line Column Template"
      },
      "anchorLinkValues": {
        "echarts-bar-chart": "Basic bar chart",
        "echarts-bar-stacked": "Stacked bar chart",
        "echarts-bar-two": "Bidirectional bar chart",
        "echarts-bar-line": "Polyline Column Template"
      }
    },
    "radar-chart": {
      "name": "Radar Chart",
      "type": "Template Chart",
      "path": "radar-chart",
      "description": "Radar",
      "tmw": "Displays the proportion of associated data.",
      "radar-chartDemo": {
        "title": "basic radar"
      },
      "anchorLinkValues": {
        "radar-chartDemo": "basic radar"
      }
    },
    "scatter-chart": {
      "name": "Scatter Chart",
      "type": "Template Chart",
      "path": "scatter-chart",
      "description": "Scatter",
      "tmw": "Display discrete data in coordinate systems",
      "basic-scatter-chartDemo": {
        "title": "Scatter Chart"
      },
      "anchorLinkValues": {
        "basic-scatter-chartDemo": "Scatter Chart"
      }
    },
    "pie-chart": {
      "name": "Pie Chart Pie Chart",
      "type": "Template Chart",
      "path": "pie-chart",
      "description": "Pie Chart",
      "tmw": "Display percentage data in the coordinate system.",
      "basic-pie-chartDemo": {
        "title": "Basic Pie Chart"
      },
      "rose-pie-chartDemo": {
        "title": "Rose Pie Chart"
      },
      "anchorLinkValues": {
        "basic-pie-chartDemo": "Pie chart",
        "rose-pie-chartDemo": "Pie chart"
      }
    },
    "chart-card": {
      "name": "Chart Card",
      "type": "Template Chart",
      "path": "chart-card",
      "description": "Chart Card",
      "tmw": "Display charts with fixed layout cards",
      "basic-card": {
        "title": "Basic Card"
      },
      "anchorLinkValues": {
        "basic-card": "Basic Card"
      }
    },
    "funnel-chart": {
      "name": "Funnel Chart",
      "type": "Template Chart",
      "path": "funnel-chart",
      "description": "funnel chart",
      "tmw": "Displaying Sorting Relationship Data in a Funnel Chart",
      "basic-chart": {
        "title": "funnel chart"
      },
      "anchorLinkValues": {
        "basic-chart": "funnel chart"
      }
    },
    "chart-marker": {
      "name": "Chart Marker",
      "type": "Template Chart",
      "path": "chart-marker",
      "description": "Chart Marker",
      "tmw": "Used to mark the 2D coordinate system and record information.",
      "basic-marker": {
        "title": "Basic Chart Marker"
      }
    },
    "chart-toolbox": {
      "name": "Chart Toolbox",
      "type": "Template Chart",
      "path": "chart-toolbox",
      "description": "Chart Toolbox",
      "tmw": "Provides some chart interaction tools.",
      "basic-marker": {
        "title": "Chart Toolbox"
      }
    },
    "echart-temp-basic": {
      "shared-card": "Shared Card",
      "shared-link-image": "Shared Link and Image",
      "download-image": "Download Chart Image"
    },
    "chart-form": {
      "name": "Chart Form Builder",
      "type": "Template Chart",
      "path": "chart-form",
      "description": "Chart Form",
      "tmw": "Quickly generate configuration forms for charts",
      "basic-form": {
        "title": "Chart Form Builder"
      }
    },
    "config-provider": {
      "name": "Customized Config Container",
      "type": "Experimental",
      "path": "config-provider",
      "description": "Customize the Config container. You can use the container to perform partial thematic configuration.",
      "tmw": "Configuration items of local containers need to be customized.",
      "themeDemo": {
        "title": "Partial Theme",
        "description": "Use themeId (initialized) or directly use theme to customize the theme."
      },
      "anchorLinkValues": {
        "custom-theme": "Partial Theme"
      }
    }
  },
  "footer": {
    "desc": "Find Us",
    "github": "Github",
    "team": "DevUI Team",
    "design": "DevUI Design",
    "group": "Wechat Group",
    "tabDesign": "Design"
  }
}