精华内容
下载资源
问答
  • vue复选框组件 Vue材料复选框 (Vue material checkbox) Material design checkbox component for Vue. Vue的材料设计复选框组件。 View demo 查看演示 Download Source 下载源 用 (Use) 与npm (With npm) ...

    vue复选框组件

    Vue材料复选框 (Vue material checkbox)

    Material design checkbox component for Vue.

    Vue的材料设计复选框组件。

    (Use)

    与npm (With npm)

    • install plugin

      安装插件

    npm install vue-material-checkbox --save
    • import to the app and add to the Vue

      导入到应用程序并添加到Vue

    import checkbox from 'vue-material-checkbox'
    Vue.use(checkbox)
    • Use it as component:

      用作组件:

    <checkbox id="mycheck1" v-model="someVar">My Checkbox</checkbox>

    零件 (Component)

    There is autogenerated id for label and checkbox, but you can specify it yourself.

    标签和复选框有自动生成的ID,但您可以自己指定。

    You can specify label for checkbox inside checkbox tag:

    您可以在复选框标签内为复选框指定标签:

    <checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </checkbox>

    You can set custom color for background of checkbox:

    您可以为复选框的背景设置自定义颜色:

    <checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </checkbox>

    道具完整表 (Complete props table)

    Prop Type Default What For
    id String undefined Recommended. input id associated with label
    value String undefined Value for input, without it checkbox works as true/false
    color String undefined Pass the color string to change bg-color of checkbox
    checked Boolean false is checked by default?
    name String undefined Name for input
    required Boolean false HTML required attr
    disabled Boolean false HTML disabled attr
    Struts 类型 默认 做什么的
    id String undefined 推荐 。 与标签关联的输入ID
    value String undefined 输入值(不带输入)复选框为true/false
    color String undefined 传递颜色字符串以更改复选框的bg-color
    checked Boolean false 默认情况下被选中?
    name String undefined 输入名称
    required Boolean false HTML必需的属性
    disabled Boolean false 禁用HTML的attr

    去做 (todo)

    • ripple effect

      连锁React

    翻译自: https://vuejsexamples.com/lightweight-material-design-checkbox-component-for-vue/

    vue复选框组件

    展开全文
  • 复选框组件

    2018-06-09 17:28:17
    CheckBox,复选框。JCheckBox 常用构造方法:// 无文本,默认未选中 JCheckBox() // 有文本,默认未选中 JCheckBox(String text) // 有文本,并指定是否选中 JCheckBox(String text, boolean selected) JCheckBox ...
    CheckBox,复选框。

    JCheckBox 常用构造方法:

    // 无文本,默认未选中
    JCheckBox()
    
    // 有文本,默认未选中
    JCheckBox(String text)
    
    // 有文本,并指定是否选中
    JCheckBox(String text, boolean selected)
    

    JCheckBox 常用方法:

    // 设置复选框的 文本、字体 和 字体颜色
    void setText(String text)
    void setFont(Font font)
    void setForeground(Color fg)
    
    /* 以下方法定义在 javax.swing.AbstractButton 基类中 */
    
    // 设置复选框是否选中状态
    void setSelected(boolean b)
    
    // 判断复选框是否选中
    boolean isSelected()
    
    // 设置复选框是否可用
    void setEnabled(boolean enable)
    
    // 设置图片和文本的间距
    void setIconTextGap(int iconTextGap)
    

    JCheckBox 常用监听器:

    // 添加状态改变监听器
    void addChangeListener(ChangeListener l)

    2. 代码实例

    package com.xiets.swing;
    
    import javax.swing.*;
    import javax.swing.event.ChangeEvent;
    import javax.swing.event.ChangeListener;
    
    public class Main {
    
        public static void main(String[] args) {
            JFrame jf = new JFrame("测试窗口");
            jf.setSize(250, 250);
            jf.setLocationRelativeTo(null);
            jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    
            JPanel panel = new JPanel();
    
            // 创建复选框
            JCheckBox checkBox01 = new JCheckBox("菠萝");
            JCheckBox checkBox02 = new JCheckBox("香蕉");
            JCheckBox checkBox03 = new JCheckBox("雪梨");
            JCheckBox checkBox04 = new JCheckBox("荔枝");
            JCheckBox checkBox05 = new JCheckBox("橘子");
            JCheckBox checkBox06 = new JCheckBox("苹果");
    
            // 添加第一个复选框的状态被改变的监听(其他复选框如果需要监听状态改变,则可按此方法添加监听)
            checkBox01.addChangeListener(new ChangeListener() {
                @Override
                public void stateChanged(ChangeEvent e) {
                    // 获取事件源(即复选框本身)
                    JCheckBox checkBox = (JCheckBox) e.getSource();
                    System.out.println(checkBox.getText() + " 是否选中: " + checkBox.isSelected());
                }
            });
    
            // 设置默认第一个复选框选中
            checkBox01.setSelected(true);
    
            panel.add(checkBox01);
            panel.add(checkBox02);
            panel.add(checkBox03);
            panel.add(checkBox04);
            panel.add(checkBox05);
            panel.add(checkBox06);
    
            jf.setContentPane(panel);
            jf.setVisible(true);
        }
    
    }
    

    结果展示:

    result.gif


    展开全文
  • vue复选框组件 漂亮的复选框 (pretty-checkbox-vue) Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js. 快速将漂亮的复选框组件(复选框,开关,单选按钮)与Vue.js集成...

    vue复选框组件

    漂亮的复选框 (pretty-checkbox-vue)

    Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js.

    快速将漂亮的复选框组件(复选框,开关,单选按钮)与Vue.js集成在一起。

    pretty-checkbox-vuex

    安装 (Installation)

    npm i --save-dev pretty-checkbox-vue

    浏览器 (Browser)

    Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:

    包括脚本文件,然后使用Vue.use(PrettyCheckbox);安装组件Vue.use(PrettyCheckbox); 例如:

    <script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
    <script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
    <script type="text/javascript">
      Vue.use(PrettyCheckbox);
    </script>

    模组 (Module)

    import PrettyCheckbox from 'pretty-checkbox-vue';
    
    Vue.use(PrettyCheckbox);

    Or

    要么

    import PrettyInput from 'pretty-checkbox-vue/input';
    import PrettyCheck from 'pretty-checkbox-vue/check';
    import PrettyRadio from 'pretty-checkbox-vue/radio';
    
    Vue.component('p-input', PrettyInput);
    Vue.component('p-check', PrettyCheck);
    Vue.component('p-radio', PrettyRadio);

    用法 (Usage)

    Once installed, it can be used in a template as simply as:

    安装后,可以在模板中简单地使用它,如下所示:

    <p-check name="check" color="success" v-model="check">check</p-check>
    <p-radio name="radio" color="info" v-model="radio">radio</p-radio>
    
    <!-- Or it can be used just like input -->
    
    <p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
    <p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>

    物产 (Properties)

    Property Type Default Value
    type String checkbox (checkbox & input) or radio (radio)
    name String
    value Any
    class String p-default (checkbox & input) or p-default p-round (radio)
    true-value Boolean or String true
    false-value Boolean or String false
    checked Boolean false
    disabled Boolean false
    required Boolean false
    indeterminate Boolean false
    color String
    off-color String
    hover-color String
    indeterminate-color String
    toggle Boolean false
    hover Boolean false
    focus Boolean false
    属性 类型 默认值
    类型 复选框(复选框和输入)或单选(广播)
    名称
    任何
    p-default (复选框和输入)或p-default p-round (无线电)
    真值 布尔值或字符串 真正
    虚假价值 布尔值或字符串
    已检查 布尔型
    残障人士 布尔型
    需要 布尔型
    不定 布尔型
    颜色
    变色的
    悬停颜色
    不确定的颜色
    拨动 布尔型
    徘徊 布尔型
    焦点 布尔型

    插槽 (Slots)

    Name Purpose
    default (no name) include label in default mode or for "on" state in toggle mode
    extra include icon or svg or image in default mode or for "on" state in toggle mode
    off-label include label for "off" state in toggle mode
    off-extra include icon or svg or image for "off" state in toggle mode
    hover-label include label in hover state
    hover-extra include icon or svg or image in hover state
    indeterminate-label include label in indeterminate state
    indeterminate-extra include icon or svg or image in indeterminate state
    名称 目的
    默认(无名称) 默认模式下包含标签 ,或在切换模式下包含“ on”状态
    额外 默认模式下包含图标svg图像 ,在切换模式下包含“开启”状态
    关闭标签 切换模式下包含“关闭”状态的标签
    异地 切换模式下包含“关闭”状态的图标svg图像
    悬停标签 包括处于悬停状态的标签
    悬停 包括处于悬停状态的图标svg图像
    不确定标签 包括不确定状态的标签
    不确定的额外 包括处于不确定状态的图标svg图像

    翻译自: https://vuejsexamples.com/quickly-integrate-pretty-checkbox-components-with-vue-js/

    vue复选框组件

    展开全文
  • jquery 复选框组件

    2011-10-11 15:27:52
    jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件
  • py脚本复选框选中Utilizing ... 使用复选框组件很容易。 1. Open the components panel by hitting ctrl+f7. 1.点击ctrl + f7,打开组件面板。 2. Drag the checkbox component onto the stage, and select the ...

    py脚本复选框选中

    Utilizing the checkbox component is easy.

    使用复选框组件很容易。

    1. Open the components panel by hitting ctrl+f7.

    1.点击ctrl + f7,打开组件面板。

    2. Drag the checkbox component onto the stage, and select the checkbox component in Frame 1. The component’s parameters will be displayed in the Property inspector.

    2.将复选框组件拖到舞台上,然后在第1帧中选择复选框组件。该组件的参数将显示在“属性”检查器中。

    3. Type "cbox" into the Property inspector Instance Name text box, to name the component.

    3.在 “属性检查器实例名称”文本框中键入“ cbox”,以命名组件。

    4. Next, we need to specify whether we want the initial state of the CheckBox component to be selected or unselected.

    4.接下来,我们需要指定是否要选择或取消选择CheckBox组件的初始状态。

    To have the checkbox autonatically appear selected, access the Initial Value parameter pop-up menu, and select "True".

    要自动选中该复选框,请访问“初始值”参数弹出菜单,然后选择“真”。

    5. In the Label Placement parameter pop-up menu, check that the default value is set to right alignment. This ensures the label will be displayed to the right of the checkbox.

    5.在“标签放置”参数弹出菜单中,检查默认值是否设置为“右对齐”。 这样可以确保标签将显示在复选框的右侧。

    6. Type "f1" for the Click Handler name. Later, of ocurse, you will write ActionScript to define what the Click Handler should do.

    6.键入“ f1”作为单击处理程序名称。 稍后,您将编写ActionScript来定义Click Handler应该做什么。

    7. Select the first key frame from the existing layer. Press f9 to open the actions box, and insert the following action:

    7.从现有图层中选择第一个关键帧。 按f9打开操作框,然后插入以下操作:

    function f1()
    {
    cbox.setLabel("Checked")  
    }

    8. The above action is simple. When you click on the checkbox, it calls the function f1(). This function sets the label of checkbox to "Checked". It’s that simple!

    8.上面的动作很简单。 当您单击复选框时,它将调用函数f1() 。 此功能将复选框的标签设置为“已检查”。 就这么简单!

    Download the sample files here.

    在此处下载示例文件

    翻译自: https://www.sitepoint.com/script-checkbox-component/

    py脚本复选框选中

    展开全文
  • vue复选框组件 vue-checkbox-radio (vue-checkbox-radio) A Vue component to easily styling checkbox and radio inputs. Vue组件,可轻松设置复选框和广播输入的样式。 Checkbox and radio component for Vue.js...
  • “ 做好本身就好了呀 ”题目前段时间接到一个使命,须要做一个自定义的单选和多选按钮,然则之前都是用现成的UI框架...兼容性因为在写组件时使用了flex规划,so 低版本浏览器不支持的哈,详细有关flex的学问能够进修...
  • Java Swing JCheckBox:复选框组件

    千次阅读 2019-03-05 23:07:28
    JCheckBox(复选框组件) 一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框。 1.1 构造函数 JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也...
  • 一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框,该类的常用构造方法如下。JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也未指定图像,...
  • vue封装复选框组件

    千次阅读 2019-05-16 23:55:20
    前言 ...checkbox复选框组件,使checkbox有三种状态: checked:ture (选中) / false (未选中) , indeterminate (部分选中) 1.利用slot插槽 2.在同一文件中用到父子通信 $emit $on 本文章的 gith...
  • CheckBoxTreeView for Delphi7 树状视图复选框组件。 该组件是一个树状视图组件。 每一个树图节点有核查框(复选框)。 该组件适合开发用户分组程序。 该组件是自编组件。编制单位:重庆千科文化传播有限责任公司。
  • 该插件是一个树状复选框组件,解决需要划分多级功能的需求,如权限分配、商品划分等功能。
  • a.push(i) } } console.log('num') console.log(checkedNodes.halfCheckedKeys) console.log(num) console.log('a') console.log(a)//如果都是半状态 if ( num === 0) {//将全是半的模式设置为1 this.flag = 1 ...
  • 该插件是一个n级下拉复选框组件,解决需要划分多级功能的需求,如权限分配、商品划分等功能。 实现方式请查看laravel-admin官方文档有关Form表单的自定义组件。
  • JCheckBox:复选框组件

    2020-06-13 00:59:26
    一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing中使用 JCheckBox 类实现复选框,该类的常用构造方法如下。 JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也未指定图像,...
  • dhtml--复选框组件

    2017-05-15 17:30:35
    dhtml--复选框组件 function getSum(){ var sum = 0; var collItemNodes= document.getElementsByName("item"); for(var i=0;i if(collItemNodes[i].checked){ sum+=parseInt(collItemNodes[i].value)...
  • Element UI实战教程之复选框组件04 checkbox组件 1.创建checkbox组件 <el-checkbox v-model="checked">上海</el-checkbox> <el-checkbox v-model="checked">天津</el-checkbox> 2....
  • javascript技术文章开发Angular/Vue多复选框勾选问题 此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变。功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要...
  • 基于vue2.x实现单选框与复选框组件

    千次阅读 2018-05-27 15:58:58
    基于vue2.x实现单选框与复选框组件 w-single-input(单选框) w-checkbox(多选框) 不是很会录屏,就放几组演示照片吧 话不多说,我们现在就开始实现这两个组件,首先你得搭好一个架子,架子具体实现请...
  • 一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框, JCheckBox类的常用构造方法如下。 JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也未...
  • 复选框的本机组件 Android示例 iOS示例 Windows示例 支持 RN版本 复选框版本 > 0.60&<0> = 0.3(从0.4开始支持IOS) <0> = 0.62以在Windows上运行 0.5 入门 yarn add @react-native-community/checkbox 要么 npm...
  • package damo; import javax.swing.ButtonGroup; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.... JFrame jf = new JFrame("单选框组件");//创建窗口对象,并设置窗口的标题
  • 一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框,该类的常用构造方法如下。 JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也未指定图像,...
  • 最近有个需求要用到Swing的下拉多选框组件,但是Swing是没有这种组件的 百度了一下看到有一个文章写了一个下拉多选组件,但是代码太多了,而且监听事件有些问题。 参考文章地址:...
  • checkboxgroup复选框组件容器,当时用属性 allowBlank:false 必须至少选择一项,否则给出提示 blankText ,出现如下问题: 如果一个没有选择的时候,给出提示,但是布局会变化Ext.onReady(function(){  Ext....
  • 快速开始 提供几个快速入门选项: ... 使用 npm install bootstrap-checkbox : npm install bootstrap-checkbox 安装: yarn add bootstrap-checkbox 包含什么 bootstrap-checkbox/ └── js/ ├── i18n/ ...
  • .div-checked label {cursor: pointer;position: relative;display: inline-block;width: 150px;height: 38px;border: 1px solid grey;}/*** 按钮透明* @type {String}*/input[type="checkbox"] {opacity: 0;...
  • 复选框组件例13.12程序运行默认不显示内容问题解决方法 package com.txw; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class CheckBoxTest extends JFrame { ...
  • React Native Check Box,这是一款方便易用的Check Box组件,支持 Android 和 iOS。安装:npm i react-native-check-box --save import CheckBox from 'react-native-check-box'运行效果:基本用法:    ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,972
精华内容 788
关键字:

复选框组件