Merge branch 'master' of https://github.com/JDLabOrg/IUManual-EN

basic_middle_toolbar.rst

@@ -12,25 +12,17 @@ Middle Toolbar
 
 .. image:: resource/iu_manual_middle_toolbar.png
 
-Middle Toolbar is placed top of Canvas and contains `Widgets`_ / `Position`_ / `Frame`_ / `Align`_ / `Background-Color`_ area.
+Middle Toolbar is placed top of Canvas and contains `Page Capture`_ / `Position`_ / `Frame`_ / `Background-Color`_ / `Show/Hide Widget Button`_ area.
 
 
 ----------
 
 
 
-Widgets
+Page Capture
 -------
 
-Widget area consists of Widgets ( **Basic , Complex , Programming** ). 
-
-You can add widget to canvas by following steps below :
-
-1. Activate widget by clicking widget icons.
-2. Click & drag on IUEditor's canvas.
-
-
-`Go To Widget Property`_
+Screen capture current page and add custom thumnail in **Prototype Mode**. 
 
 
 ----------
@@ -40,12 +32,15 @@ You can add widget to canvas by following steps below :
 Position
 --------
 
-Position area consists of **input fields & stepper for X & Y position** . 
+Position area consists of **Position & Align & input fields & stepper for X & Y position** . 
 
 
+* ``Position`` : Select position from select - **Absolute, Relative, Fixed** .
+* ``Sub Position`` : Select sub position from select.
+* ``Allign Button`` : Consists of **align vertical center** and **align horizontal center** buttons and **align multiple element** button.
+* ``Position Setting Popup`` : You can change **fixed center position, overflow, z-index** properties.
 * ``X posiition input field & Stepper`` : You can change **X** value by typing value into textfield or clicking stepper. (px or %)
 * ``Y posiition input field & Stepper`` : You can change **Y** value by typing value into textfield or clicking stepper. (px or %)
-* ``Position Setting Popup`` : You can change **position, overflow, z-index** properties.
 
 
 ----------
@@ -64,18 +59,16 @@ Frame area consists of **input fields & stepper for width & height value** .
 ----------
 
 
-Align
------
-
-Align area consists of **align vertical center** and **align horizontal center** buttons.
+Background Color
+----------------
 
-.. note:: **align vertical center** button will apply only **Position : Absolute** widgets.
+Background Color area consists of **set background color button, set gradient popup** . You can change background color or gradient to selected widget.
 
 
 ----------
 
 
-Background Color
+Show/Hide Widget Button
 ----------------
 
-Background Color area consists of **set background color button, set gradient popup** . You can change background color or gradient to selected widget.
+Show and Hide widget list.

basic_widget_panel.rst

@@ -0,0 +1,42 @@
+.. _Go To Widget Property: ./widget_basic.html
+.. _Go To Manage Custom Widgets Panel: ./panel_management_widget.html
+.. _아이유 위젯: #iu-widgets
+.. _커스텀 위젯: #custom-widgets
+.. _위젯 관리 패널: ./panel_management_widget.html 
+
+
+
+위젯 패널 Widget Panel
+==========
+
+위젯 툴바는 화면 오른쪽에 위치하며 중앙 툴바의 오른쪽 끝에 있는 **Show/Hide 위젯 토글 버튼** 으로 보여주고 감출 수 있습니다. `아이유 위젯`_ / `커스텀 위젯`_ 탭으로 구분됩니다.
+
+
+----------
+
+
+아이유 위젯 IU Widgets
+----------------
+
+.. image:: resource/iu_manual_iuwidgets.png
+
+IU WIDGETS 탭에서는 아이유에디터에서 사용 가능한 모든 위젯들이 보여집니다. 기본적으로 **박스 / 텍스트 / 이미지 / 셀 위젯** 을 제공하며, 웹페이지에서 활용할 수 있는 다양한 위젯을 지원합니다. Base, Complex, Programming 그룹으로 구분되어 있습니다. **Show/Hide 버튼** 으로 각 그룹의 위젯 목록을 펼치고 접을 수 있습니다. **오른쪽 클릭** 으로 위젯의 상세정보를 확인할 수 있습니다.
+
+`Go To Widget Property`_
+
+----------
+
+
+커스텀 위젯 Custom Widgets
+----------------
+
+.. image:: resource/iu_manual_customwidgets.png
+
+CUSTOM WIDGETS 탭에서는 **위젯 불러오기** 로 불러온 커스텀 위젯들이 보여집니다. 커스텀 위젯이 속한 그룹명으로 구분되어 있으며 **Show/Hide** 버튼으로 각 그룹의 위젯 목록을 펼치고 접을 수 있습니다. **드래그 앤 드롭** 이나 **더블 클릭** 하여 위젯을 캔버스에 추가 할 수 있습니다. **오른쪽 클릭** 으로 커스텀 위젯의 상세정보를 확인할 수 있습니다. 상세정보는 `위젯 관리 패널`_ 에서 수정할 수 있습니다.
+
+* ``새로고침 버튼 Refresh Button`` : 커스텀 위젯 라이브러리를 최신상태로 업데이트 합니다.
+* ``검색 영역 Search Field`` : 커스텀 위젯을 이름이나 태그로 검색합니다.
+* ``확대/축소 버튼 Zoom in/Zoom out Button`` : 커스텀 위젯의 섬네일을 확대/축소 합니다.
+
+`Go To Manage Custom Widgets Panel`_  커스텀 위젯 불러오기에 대해 알아보기
+

index.rst

@@ -32,6 +32,7 @@ You can download **IUEditor** from website below.
 
    basic_top_toolbar
    basic_middle_toolbar
+   basic_widget_panel
    basic_navigation
    basic_canvas