菜单

图片
图片是某物的图形表示

下载

类别

图片 (Image)

单张图片

除非指定大小,否则图片将使用图片的原始尺寸到容器的大小。
你可以使用 img 或者 svg 作为 ui image 的子元素来显示图片。

图片链接 (Image Link)

图片可以被链接到其他内容

状态

隐藏 (Hidden)

图片可以设置为隐藏

禁用 (Disabled)

一个图片可以显示它是禁用的,不能被选中。

变形 (Variations)

头像 (Avatar)

图片可以作为头像和文本显示在同一行

用户名

边框 (Bordered)

图片可以包括边框,以突出白色或透明内容的边缘。

占满 (Fluid)

图片可以占满它整个容器的宽度

圆角 (Rounded)

图片可显示圆角效果

圆形 (Circular)

图片可显示为圆形

垂直对齐 (Vertically Aligned)

图片可以垂直对齐的显示

顶端对齐
中间对齐
底部对齐

居中 (Centered)

图片可以在容器中居中显示

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

间隔 (Spaced)

图片可以指定它需要一个额外的间距来分离它周围的内容

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

浮动 (Floated)

图片可被放置在文本内容左侧或右侧

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

尺寸 (Size)

图片可以显示为不同的尺寸

Semantic 使用默认值来控制最大图片或者最小图片的显示,建议在项目中使用 image.variables 来更新默认的设置。
类名 尺寸
Mini 35px
Tiny 80px
Small 150px
Medium 300px
Large 450px
Big 600px
Huge 800px
Massive 960px

组合

尺寸 (Size)

一组图片可被设置为统一尺寸大小