83 lines
2.6 KiB
SCSS
83 lines
2.6 KiB
SCSS
|
/*!markdown
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
title: Display
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
布局相关样式。
|
|||
|
|
|
|||
|
|
|
|||
|
|
| Class | Properties |
|
|||
|
|
| ------------------ | ---------------------------- |
|
|||
|
|
| block | display: block; |
|
|||
|
|
| inline-block | display: inline-block; |
|
|||
|
|
| inline | display: inline; |
|
|||
|
|
| flex | display: flex; |
|
|||
|
|
| inline-flex | display: inline-flex; |
|
|||
|
|
| table | display: table; |
|
|||
|
|
| table-cell | display: table-cell; |
|
|||
|
|
| table-column | display: table-column; |
|
|||
|
|
| table-column-group | display: table-column-group; |
|
|||
|
|
| table-footer-group | display: table-footer-group; |
|
|||
|
|
| table-header-group | display: table-header-group; |
|
|||
|
|
| table-row-group | display: table-row-group; |
|
|||
|
|
| table-row | display: table-row; |
|
|||
|
|
| flow-root | display: flow-root; |
|
|||
|
|
| grid | display: grid; |
|
|||
|
|
| inline-grid | display: inline-grid; |
|
|||
|
|
| contents | display: contents; |
|
|||
|
|
| hidden | display: none; |
|
|||
|
|
|
|||
|
|
## 用法
|
|||
|
|
css 相关的知识点就不介绍了，请参考：
|
|||
|
|
|
|||
|
|
https://www.w3school.com.cn/cssref/pr_class_display.asp
|
|||
|
|
https://tailwindcss.com/docs/display
|
|||
|
|
|
|||
|
|
# 响应式设计
|
|||
|
|
|
|||
|
|
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
|
|||
|
|
|
|||
|
|
## 状态前缀
|
|||
|
|
|
|||
|
|
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
@mixin make-display($prefix: '.') {
|
|||
|
|
@each $name,
|
|||
|
|
$value
|
|||
|
|
in (
|
|||
|
|
'block': block,
|
|||
|
|
'inline-block': inline-block,
|
|||
|
|
'inline': inline,
|
|||
|
|
'flex': flex,
|
|||
|
|
'inline-flex': inline-flex,
|
|||
|
|
'table': table,
|
|||
|
|
'table-caption': table-caption,
|
|||
|
|
'table-cell': table-cell,
|
|||
|
|
'table-column': table-column,
|
|||
|
|
'table-column-group': table-column-group,
|
|||
|
|
'table-footer-group': table-footer-group,
|
|||
|
|
'table-header-group': table-header-group,
|
|||
|
|
'table-row-group': table-row-group,
|
|||
|
|
'table-row': table-row,
|
|||
|
|
'flow-root': flow-root,
|
|||
|
|
'grid': grid,
|
|||
|
|
'inline-grid': inline-grid,
|
|||
|
|
'contents': contents,
|
|||
|
|
'hidden': none
|
|||
|
|
)
|
|||
|
|
{
|
|||
|
|
#{$prefix + $name} {
|
|||
|
|
display: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@include make-display();
|
|||
|
|
@each $deivce in map-keys($devices) {
|
|||
|
|
@include media-device($deivce) {
|
|||
|
|
@include make-display('.' + selector-escape($deivce + ':'));
|
|||
|
|
}
|
|||
|
|
}
|