LIÊN QUAN CỔ ĐÔNG VÀ CỔ PHIẾU CTG:
Ban Thư ký Hội đồng Quản trị và Quan hệ cổ đông
Văn phòng Hội đồng Quản trị
Ngân hàng TMCP Công Thương Việt Nam
EMBEDDED
Embedded alerts are thought to be used inside context as forms. Usually you will only need to use the information one. Its width depends on the container with you use it, always respecting the container margins to the content. The close action is not of mandatory use.
STRIPE
Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert appears usually on "Save" action communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.
Badges help highlight important information such as notifications or new and unread messages. Badges have circular borders and are only used to specify a number.
Buttons communicate an action to happen on user interaction.
TYPES
| TYPE | USAGE |
|---|---|
|
|
Primary: The primary button is always use for the most important actions. There can't be two primary actions together or near by. |
|
|
Secondary: The secondary button is always use for the secondary actions. There can be several secondary actions near by. |
|
|
Borderless: Use in those cases as toolbars where the secondary button would be too heavy for the pattern design. In this way the design gets cleaner. |
|
|
Link: Used for many Cancel actions. |
VARIATIONS
Image Cards
DROPDOWN MENU
A dropdown is a list of options related to the element that triggers it.
CHECKBOX
A checkbox is a component that allows the user selecting something written in its associated text label. A list of consecutive checkboxes would allow the user to select multiple things.
| STATE | DEFINITION |
|---|---|
| On | |
| Off | |
| With custom class and id | |
| With Label | |
| On disabled | |
| Off disabled | |
| Indeterminate |
Demonstrate a checkbox with an indeterminate state in the TreeView component.
RADIO
A radio button is a component that allows the user selecting something written in its associated text label. A list of consecutive radio buttons would allow the user to select just one thing.
| STATE | DEFINITION |
|---|---|
| On | |
| Off | |
| On disabled | |
| Off disabled |
SELECTOR
Selectors are frequently used as a part of forms. This elements are used when we need to select one or more within several options. These options are displayed in the button once selected.
MULTISELECT
Icon is a visual metaphor representing a concept that lies behind the idea and/or action.
Liferay Icon Library
Language Flags
Labels are a mechanism to categorize information providing quick recognition.
LABEL REMOVABLE
LABEL WITH LINK
A link (also known as hyperlink) is a clickable (text or image) element. The link control is used for navigation.
SINGLE LINK
a button linkUsed for stand-alone hyperlinks. Can be a text or an image.
This is some inline text with link text to test for 3:1 color contrast ratio.
Management toolbar is an extension of Toolbar. A combination of different components as filters, orders, search, visualization select and other actions, that allow to manage dataset.
DEFAULT STATE
ACTIVE STATE
WITH RESULTS BAR
Kết quả tìm kiếm
USING DISPLAY CONTEXT
A navigation bar, navbar, is an horizontal bar that provides several access points to different parts of a system.
NAVIGATION BARS USING DISPLAY CONTEXT
A pagination bar provides navigation through datasets.
Default
Without DropDown
Toggle content visibility using Panel.
DEFAULT PANEL
NOT COLLAPSABLE PANEL
CUSTOM COLLAPSABLE CLASS
ALREADY EXPANDED
HIDDEN ICONS
SECONDARY STYLE
NESTED TAG
PANEL GROUP
Progress bar is a progress indicator used to show the completion percentage of a task.
Stickers are a visual way to quickly identify content in a different way than badges and labels.
SQUARE
ROUND
POSITION
Tabs organize similar content together into individual sections in the same page.
DEFAULT TABS
Tab Content 1
Tab Content 2
Tab Content 3
Tab Content 4
BASIC TABS
Tab Content 1
Tab Content 2
Tab Content 3
Tab Content 4
JUSTIFIED TABS
Tab Content 1
Tab Content 2
Tab Content 3
Tab Content 4
Toggle provide users with different selection and activation tools.
DEFAULT TOGGLE
TOGGLE INITIALLY SELECTED
TOGGLE DISABLED
TOGGLE WITH LABEL
TOGGLE WITH SYMBOLS
TOGGLE WITH ON/OFF LABELS
TOGGLE WITH HELP TEXT
TOGGLE SIZING SMALL
Vertical navigation implements a pattern that displays navigation items in a vertical menu.