Popover

彈出式提示或對話框,浮動於畫面上並可隨時更動定位。使用類別為 .popover 並以此作為子元件前綴詞。Popover 預設是不顯示,因此呼叫 Popover 時請加上 .is:on.popover 主要作用為定位與容器,主體內容放置於 .popover_body 當中。

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.

<div class="popover"> <div class="popover_body"> <h6>Hello World</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.</p> </div> </div>

深色主題

.popover 加上 .theme:dark

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.

<div class="popover theme:dark"> <div class="popover_body"> <h6>Hello World</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.</p> </div> </div>

使用範例

右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.