사이냅 에디터 문서
Space shortcuts
Page tree

Versions Compared

Old Version 10

changes.mady.by.user editor

Saved on

compared with

New Version 11

changes.mady.by.user editor

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
title기본 표 템플릿 스타일



StyleKeyConfig
1

Basic


Code Block
languagejs
'Basic': {
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black',
            }
        }
    }
}


2

Dashed


Code Block
languagejs
'Dashed': {
    defaultStyle: {
        borders: {
            top: {
                type: 'dashed',
                width: 1,
                color: 'black'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


3

GrayScale


Code Block
languagejs
'GrayScale': {
    row: {
        highlight: {
            index: 1,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        backgroundColor: 'lightgray',
            borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            }
        }
    }
}


4

Zebra


Code Block
languagejs
'Zebra': {
    row: {
        highlight: {
            index: 1,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


5

Sideless


Code Block
languagejs
'Sideless': {
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            },
            left: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


6

Sideless Zebra


Code Block
languagejs
'Sideless Zebra': {
    row: {
        highlight: {
            index: 0,
            style: {
                backgroundColor: 'lightgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    },
                    left: {
                        type: 'none',
                        width: 0,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            },
            left: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


7

Sideless GrayScale


Code Block
languagejs
'Sideless GrayScale': {
    row: {
        highlight: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'none',
                        width: 0,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        backgroundColor: 'lightgray',
        borders: {
            top: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    }
}


8

Sideless Black


Code Block
languagejs
'Sideless Black': {
    defaultStyle: {
        color: 'white',
        backgroundColor: 'black',
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            },
            left: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    }
}


9

Gray Column Header


Code Block
languagejs
'Gray Column Header': {
    col: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


10

Dashed Gray Column Header


Code Block
languagejs
'Gray Column Header': {
    col: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


11

Dual Header


Code Block
languagejs
'Dual Header': {
    row: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    col: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'lightgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


12

Dashed Dual Header


Code Block
languagejs
'Dashed Dual Header': {
    row: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    col: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'lightgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'dashed',
                width: 1,
                color: 'black'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


13

Gray Row Header


Code Block
languagejs
'Gray Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


14

Dashed Gray Row Header


Code Block
languagejs
'Dashed Gray Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                    type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'dashed',
                width: 1,
                color: 'black'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


15

Sideless Black Row


Code Block
languagejs
'Sideless Black Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                color: 'white',
                backgroundColor: 'black',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    },
                    left: {
                        type: 'none',
                        width: 0,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            },
            left: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


16

Striped Black Row Header


Code Block
languagejs
'Striped Black Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                color: 'white',
                backgroundColor: 'black',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        },
        highlight: {
            index: 1,
            style: {
                backgroundColor: 'darkgray',
                    borders: {
                        top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        backgroundColor: 'lightgray',
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            }
        }
    }
}




적용 예시


Code Block
languagejs
var synapEditorConfig = {
    'editor.table.template.styles': {
 
 
 
 
 'Dark Mode': {
 
 
 
 
 
 
 defaultStyle: {
               

                color: 'rgb(220, 220, 220)',
               
                backgroundColor: 'rgb(30, 30, 30)',
               

                borders: {
                   

                    top: {
 
 
 
 
 
 
 
 
 
 
 
  
             type: 'solid',
                       

                        width: 1,
                       

                        color: 'rgb(60, 60, 60)'
 
 
 
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
 
 }
 
 
 
 
 
 
}
 
 
 
 
}
 
 
 }
,
 
  'editor.table.template.list': {         popup: [             ['Basic', 'Dark Mode']         ],         dialog: [             ['Basic', 'Dark Mode']         ]     } } Image RemovedImage Removed
          }
        },
        'Rainbow': {
            row: {
                head: {
                    index: 0,
                    style: {
                        backgroundColor: 'red',
                        borders: {
                            top: {
                                type: 'solid',
                                width: 1,
                                color: 'black'
                            }
                        }
                    }
                },
                highlight: {
                    index: 1,
                    style: {
                        backgroundColor: 'yellow',
                        borders: {
                            top: {
                                type: 'solid',
                                width: 1,
                                color: 'black'
                            }
                        }
                    }
                }
            },
            defaultStyle: {
                color: 'white',
                backgroundColor: 'blue',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    'editor.table.template.list': {
        popup: [
            ['Basic'],
            ['Dark Mode', 'Rainbow'],
            ['Sideless', 'Sideless Zebra', 'Sideless GrayScale', 'Sideless Black']
        ],
        dialog: [
            ['Basic', 'Dashed', 'GrayScale', 'Zebra'],
            ['Striped Black Row Header'],
            ['Sideless', 'Sideless Zebra', 'Sideless GrayScale', 'Sideless Black'],
            ['Sideless Black Row Header'],
            ['Gray Column Header', 'Dashed Gray Column Header'],
            ['Gray Row Header', 'Dashed Gray Row Header'],
            ['Dual Header', 'Dashed Dual Header'],
            ['Dark Mode', 'Rainbow']
        ]
    }
}


표 생성 팝업표 속성 다이얼로그 - [스타일 & 제목 셀] 탭

Image Added

Image Added