控件组 Fieldset

basic

默认效果

The Evil Rabbit Jumped over the Fence

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-fieldset-basic' })
</script>

<template>
  <g-fieldset footer="The Evil Rabbit Jumped over the Fence">
    <h1>The Evil Rabbit Jumped over the Fence</h1>
    <p>The Evil Rabbit Jumped over the Fence</p>
  </g-fieldset>
</template>

custom

与其他组件共同使用。

The Evil Rabbit Jumped over the Fence

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-fieldset-custom' })
</script>

<template>
  <g-fieldset>
    <h1>The Evil Rabbit Jumped over the Fence</h1>
    <p>The Evil Rabbit Jumped over the Fence</p>

    <template #footer>
      <p>The Evil Rabbit Jumped over the Fence</p>
      <g-button size="mini" type="primary" auto>action</g-button>
    </template>
  </g-fieldset>
</template>

disabled

添加 disabled 属性会影响所有子组件。

The Evil Rabbit Jumped over the Fence

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-fieldset-disabled' })
</script>

<template>
  <g-fieldset disabled>
    <h1>The Evil Rabbit Jumped over the Fence</h1>
    <p>The Evil Rabbit Jumped over the Fence</p>

    <template #footer>
      <p>The Evil Rabbit Jumped over the Fence</p>
      <g-button size="mini" type="primary" auto disabled>action</g-button>
    </template>
  </g-fieldset>
</template>

Attributes

属性	描述	类型	推荐值	默认
footer	组件的底部内容	`string`	-	-
disabled	是否禁用	`boolean`	`true` / `false`	`false`

控件组 Fieldset ​

basic

The Evil Rabbit Jumped over the Fence

custom

The Evil Rabbit Jumped over the Fence

disabled

The Evil Rabbit Jumped over the Fence

Attributes

控件组 Fieldset