분류 Reactjs

golden-layout : 웹앱을 위한 다중 화면 레이아웃 관리자

컨텐츠 정보

  • 조회 312 (작성일 )

본문

http://golden-layout.com/


GoldenLayout이 작동하려면 jQuery가 필요합니다. 스크립트 태그를 사용하여 직접 포함 시키십시오.


<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>


또는 RequireJs를 사용하는 경우 jQuery를 경로로 사용할 수 있도록 합니다 (예 : 이것을 요구 구성에 추가하여


paths: {
    'jquery':  '../bower_components/jquery/dist/jquery.min'
}


다음으로 GoldenLayout의 기본 JS 및 CSS 파일을 추가합니다.


<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" />


goldenlayout-base.css에는 순전히 구조적 비트가 포함되어 있으므로 테마도 필요합니다. 사용 가능한 것 중 하나를 선택하고 CSS 파일을 포함하십시오.


<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />


다음으로 초기 레이아웃을 구성해야 합니다 (사용자가 나중에 물건을 이동할 수 있음). 이 예에서는 다음과 같이 화면 왼쪽에 큰 구성 요소를 만들고 오른쪽에 두 개의 작은 구성 요소를 만듭니다.


tutorial_1_image_1.png 


모든 GoldenLayout 구조는 행, 열 및 스택의 세 가지 구성 요소로 만들어집니다. 행은 항목을 왼쪽에서 오른쪽으로, 열은 위에서 아래로, 스택은 앞에서 뒤로 (탭 스트립으로) 정렬합니다. 이들은 중첩 될 수 있습니다.


앱이 구성되는 실제 부분 (양식, 차트, 표 등)을 "구성 요소"라고 합니다. 구성 요소는 이러한 빌딩 블록 중 하나에 넣을 수 있습니다.


이 예에서는 행으로 시작합니다. 이 행의 첫 번째 항목은 왼쪽 (A)에 놓으려는 큰 구성 요소입니다. 오른쪽에는 두 개의 구성 요소 (B와 C)가 서로 겹쳐서 필요하므로 열에 넣어야 합니다.


tutorial_1_image_2.png 


또는 GoldenLayout 구성으로


var config = {
    content: [{
        type: 'row',
        content:[{
            type: 'component',
            componentName: 'testComponent',
            componentState: { label: 'A' }
        },{
            type: 'column',
            content:[{
                type: 'component',
                componentName: 'testComponent',
                componentState: { label: 'B' }
            },{
                type: 'component',
                componentName: 'testComponent',
                componentState: { label: 'C' }
            }]
        }]
    }]
};