You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/design/web-part-levels.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ description: Learn about SharePoint web part levels, secondary state toolbars, a
4
4
ms.date: 08/13/2018
5
5
---
6
6
7
-
# SharePoint Web part levels
7
+
# SharePoint web part levels
8
8
9
-
When designing a SharePoint web part, you sometimes need to have a secondary interaction level; for example, an item in a list or a individual photo in a gallery. This article explains how to use secondary state toolbars, default commands, scale, and interactions states to select an individual item.
9
+
When designing a SharePoint web part, you sometimes need to have a secondary interaction level; for example, an item in a list or an individual photo in a gallery. This article explains how to use secondary state toolbars, default commands, scale, and interaction states to select an individual item.
10
10
11
-
Secondary web part configuration and toolbars follow the same patterns as single state web parts, such as image or file viewer. Secondlevel items can have their own toolbars and respective property pane to make it easy for authors to configure the web part with meaningful content and data. Keep in mind that there should be a clear separation between configuration options in web parts that have two levels. We recommend that you keep the Source, Filtering, and Layout configuration, as well as any additional options that affect the web part as a whole, at the first level.
11
+
Secondary web part configurations and toolbars follow the same patterns as single state web parts, such as an image or file viewer. Second-level items can have their own toolbars and respective property pane, to make it easy for authors to configure the web part with meaningful content and data. Keep in mind that there should be a clear separation between configuration options in web parts that have two levels. We recommend that you keep the Source, Filtering, and Layout configuration, as well as any additional options that affect the web part as a whole, at the first level.
12
12
13
-
Some example web parts to use as reference are:
13
+
The following are some web part examples to use as reference:
14
14
15
15
- Image gallery
16
16
- Quick links
@@ -20,17 +20,17 @@ Some example web parts to use as reference are:
20
20
21
21
## Secondary toolbars
22
22
23
-
Secondary toolbar are used on individual items in a web part layout that need to support itemlevel configuration in the property pane and other commands like move, to re-arrange items in a layout, or to remove/delete an item. Custom commands can also be added in this toolbar that fit the needs of your web part..
23
+
Secondary toolbars are used on individual items in a web part layout that need to support item-level configuration in the property pane - and other commands like move - to rearrange items in a layout, or to remove/delete an item. You can also add custom commands in this toolbar that fit the needs of your web part.
24
24
25
25

26
26
27
27
## Selection states
28
28
29
-
There are 3 core commands on 2nd level toolbars within a web part. They are Edit, Move and Remove. It's important to consider the implementation of the selection states when building a web part with a secondary level.
29
+
Second-level toolbars within a web part have three core commands: Edit, Move, and Remove. It's important to consider the implementation of the selection states when building a web part with a secondary level.
30
30
31
-
The 2nd level toolbar should only display when the author selects (clicks/taps) an individual item. Do not show all the 2nd level toolbars for every items at once as this can overwhelm the user. Additionally, do not have the toolbar appear on hover, as this may cause usability issues with devices that support touch.
31
+
The second-level toolbar should only display when the author selects (clicks/taps) an individual item. Do not show all the second-level toolbars for every items at once, as this can overwhelm the user. Additionally, do not have the toolbar appear on hover, as this might cause usability issues with devices that support touch.
32
32
33
-
The bounding box and/or outline of each 2nd level item should change from its default state to the primary color on hover and remain the primary color on selection. It is important that the bounding box and icons keep their active states so the user understands what item is selected when using the property pane or while re-arranging items.
33
+
The bounding box and/or outline of each second-level item should change from its default state to the primary color on hover and remain the primary color on selection. It is important that the bounding box and icons keep their active states so the user understands what item is selected when using the property pane or while re-arranging items.
34
34
35
35
Below is an example from an individual 2nd level item in the Image gallery web part:
0 commit comments