ACF css

来自 Alpine Linux
此材料正在进行中...

这只是我想写下一些关于 Alpine 的 css 问题的笔记的地方。在标题另有说明之前/如果标题另有说明,请不要将此视为 Alpine 文档。
(最后编辑者:Sertonix,于 2023 年 9 月 25 日。)

设计/编码问题

感觉需要一些通用于所有(或大多数)acf-模块的骨干标签页。
这使得用户“识别”每个 acf-模块上的布局和信息。
这样,用户可以轻松找到他正在寻找的内容,并感觉他没有意外更改他不想更改的内容。

视图文件

状态标签页

按此顺序显示信息
(H1)(此程序主要功能的描述)(/H1)
(H2)系统信息(/H2)

  • 当前程序/进程的状态
  • 程序版本(如果适用)

(H3)程序特定(/H3)

  • (一些程序特定的信息)
  • (一些程序特定的信息)

配置标签页

(H1)(此程序主要功能的描述)(/H1)
以上信息对于每个标签页(expert、status、config 等)都是相同的。
(H2)配置(/H2) (H3)常规设置(/H3)

  • 启用/禁用此进程 [ ]启用 [x]禁用
  • (一些常规设置)
  • (一些常规设置)

(H3)(一些其他类别的设置)(/H3)

  • (一些特定设置)
  • (一些特定设置)

(H3)(一些其他类别的设置)(/H3)

  • (一些特定设置)
  • (一些特定设置)

(H2)应用更改(/H2)

  • 应用以上更改 [应用]

专家标签页

以纯文本形式显示配置文件,并让“专家”根据自己的意愿修改它们(并希望“专家”知道自己在做什么)

CSS

BR

我认为 BR 的使用量不大。
相反,你可以这样做...

(P) your text (/P) (P) some other text (/P)

H1,H2,H3

这些标题(与大多数其他事物一样)由 css 定义。
通过使用这些标题,你可以将页面划分为处理不同部分的功能或数据的 sections。

  • H1 (“main”标题下的主要数据)
    • H2 (与“main”标题相关的数据,但被划分为子标题)
      • H3 (上一个标题的子标题)

PRE

PRE 用于显示“从系统输出”的数据。
PRE 不会更改换行符和其他内容。

DL,DT,DD

当你想呈现一些数据时,你仅限于 (DIV ID=content)
当使用 P、DL、DD 或其他 html 标签时,下面你应该使用 '<' 和 '>' 而不是 '(' 和 ')'。
通常,你在一行中呈现一些信息,然后在下一行中呈现下一个信息。

  • 如果你想使用 100% 的可用宽度,你可以...
(P) Whatever your text is that you want to present (/P)

在某些情况下,你想指定一些关于你的数据是什么的描述(如标题)。那么你可以...

  • 使用 DT/DD 字段...
(DT)The value is:(/DT) (DD)1235(/DD)

(DL) 的用途仍未定义。
通过使用以上这些类型的数据呈现方式,你可以让样式表 (css) 以一种美观的方式呈现你的输出。
这也使得在需要时添加新的样式表成为可能。
尽量不要在视图文件中指定宽度或其他图形设置。
让 css 为你完成它(如果 css 目前无法处理...那么我们只需修复 css)

DIV

  • ID
    • 此属性为元素分配一个名称。
    • 此名称在一个文档中必须是唯一的
  • CLASS
    • 此属性为元素分配一个类名或一组类名。
    • 任意数量的元素可以被分配相同的类名或名称。
    • 多个类名必须用空格字符分隔。

DIV CLASS=...

leader/tailer(class)

在每个 (DIV ID) 内都使用 leader/tailer 类是否是一个好主意?

  • leader(class)
  • 主要内容
  • tailer(class)

leader/tailer(class) 可以用于显示信息,也可以用于图形更改(使用 CSS)?!?

hide(class)

通过向某个对象添加 class='hide',你可以隐藏它。

mute(class)

mute 类可用于显示“安静”的项目,这些项目并非完全隐藏。 也许更小的字体、灰色等等...“额外信息”。

header(class)

可以用于装饰表格中的标题行(例如,彩色背景和粗体文本)。

selected(class)

这可以标记选定/当前的标签页/菜单。

error(class)

这可以标记文本/背景/任何内容,以便将你的注意力吸引到此处。
可以指示你被迫采取某些操作或更改某些内容。

attention(class)

这可以标记文本/背景/任何内容,以便将你的注意力吸引到此处。

DIV ID=...

header (id)

[Skip to main content]
Alpine Linux (or maybe hostname)

main (id)

nav (id)
Navigation (main)
Where we have been
subnav (id)
Navigation (subnav)
content (id)
Main content of the page.
This is where the interesting information is shown.

footer (id)

Made with care by webconf

图形化呈现

 -------------------
/ header
|  -----------------
| / leader (class)
| \                  [Skip to main content] 
|  -----------------
|                    (H1)Alpine Linux(/H1) (or maybe hostname)
|
|  -----------------
| / trailer (class)
| \
|  -----------------
\
 -------------------
 -------------------
/ main
|  -----------------
| / leader (class)
| \
|  -----------------
|  -----------------
| / nav
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Navigation (main) (and its items)
| |
| |  ---------------
| | / trailer (class)
| | \                Where we have been
| |  ---------------
| \
|  -----------------
|  -----------------
| / subnav
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Navigation (subnav) (and its items)
| |
| |  ---------------
| | / trailer (class)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / content
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Main content of the page.
| |
| |  ---------------
| | / trailer (class)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / footer
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Made with care by webconf
| |
| |  ---------------
| | / trailer (class)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / tailer (class)
| \
|  -----------------
\ 
 -------------------