<view class="container">
  <view class="notice-row">
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      mode="closeable"
    />

    <van-notice-bar left-icon="volume-o" text="衡量代码质量的唯一标准。" />
  </view>

  <view class="button-row">
    <van-button type="default" size="small" round>默认按钮</van-button>
    <van-button round block type="primary" bind:tap="onOpen">块级元素</van-button>

    <van-button round plain block type="primary">朴素按钮</van-button>

    <van-button plain block>朴素按钮</van-button>

    <van-button round block disabled type="primary">禁用状态</van-button>

    <van-button plain round block disabled>禁用状态</van-button>

    <van-button round type="primary" size="large">大号按钮</van-button>
    <van-button round type="primary" size="normal">普通按钮</van-button>
    <van-button round type="primary" size="small">小型按钮</van-button>
    <van-button round type="primary" size="mini">迷你按钮</van-button>
  </view>

  <view class="checkbox-row">
    <van-checkbox value="{{ checked }}">复选框</van-checkbox>
  </view>

  <view class="divider-row">
    <van-divider contentPosition="center" hairline>文本颜色</van-divider>
    <van-divider contentPosition="center" hairline textColor="#1989fa">文本颜色</van-divider>

    <van-divider contentPosition="center" hairline customStyle="color: #1989fa; font-size: 18px;">
      文本
    </van-divider>
  </view>

  <view class="field-row">
    <van-cell-group>
      <van-cell-group>
        <van-field
          value="{{ username }}"
          label="用户名"
          placeholder="请输入用户名"
          clearable
          right-icon="question-o"
          right-icon-class="custom-icon"
          required
          bind:click-icon="onClickIcon"
        />
        <van-field
          value="{{ password }}"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
          border="{{ false }}"
        />
      </van-cell-group>
    </van-cell-group>
  </view>

  <van-tabs active="{{ active }}">
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
  </van-tabs>

  <van-action-sheet
    show="{{ show }}"
    actions="{{ actions }}"
    bind:close="onClose"
    bind:select="onSelect"
  />

  <van-steps
    steps="{{ steps }}"
    active="{{ active2 }}"
    direction="vertical"
    active-color="var(--color-primary)"
  />

  <van-switch checked="{{ checked }}" />

  <van-dialog id="van-dialog" />
</view>
