# project-2

**Repository Path**: wangyaning45/project-2

## Basic Information

- **Project Name**: project-2
- **Description**: No description available
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 17
- **Created**: 2022-04-19
- **Last Updated**: 2022-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

本次实验我分配到的两个组件是checkboxes和radio-buttons。

[https://material.io/components/checkboxes](https://material.io/components/checkboxes)

[https://material.io/components/radio-buttons](https://material.io/components/radio-buttons)

## Checkbox example:

![example](./picture/checkbox_example.PNG)

```python
class Check_box:
	def __init__(self,id,name):
		self.id = id
		self.name = name
	def render(self):
		e = maketag('div', {'class':'mdc-form-field'})
		start = maketag('div', {'class':'mdc-checkbox'})
		e.appendChild(start)
		in_put = maketag('input', {'type':"checkbox",'class':"mdc-checkbox__native-control",'id':self.id})
		start.appendChild(in_put)
		background = maketag('div',{'class':'mdc-checkbox__background'})
		start.appendChild(background)
		svg = maketag('svg',{'class': 'mdc-checkbox__checkmark', 'viewBox': '0 0 24 24'})
		background.appendChild(svg)
		path = maketag('path', {'class': 'mdc-checkbox__checkmark-path',
                                  'fill': "none", 'd': 'M1.73,12.91 8.1,19.28 22.79,4.59'})
		svg.appendChild(path)
		mixedmark = maketag('div', {'class': 'mdc-checkbox__mixedmark'})
		background.appendChild(mixedmark)
		ripple = maketag('div', {'class': 'mdc-checkbox__ripple'})
		start.appendChild(ripple)
		end = javascript.document.createTextNode(self.name)
		e.appendChild(end)
		return e
```



目前实现效果图如下：

![checkbox](./picture/box.PNG)

## Radio button example:

![radio](./picture/radio_example.PNG)
```python
class Radio_button:
	def __init__(self,id,name):
		self.id = id
		self.name = name
	def render(self):
		e = maketag('div', {'class':'mdc-form-field'})
		start = maketag('div', {'class':'mdc-radio'})
		in_put = maketag('input', {'class':'mdc-radio','type':'radio','id':self.id,'name':self.name,'checked':'checked'})
		background = maketag('div',{'class':'mdc-radio__background'})
		outer = maketag('div',{'class':'mdc-radio__outer-circle'})
		inner = maketag('div',{'class':'mdc-radio__inner-circle'})
		background.appendChild(outer)
		background.appendChild(inner)
		
		start.appendChild(in_put)
		#start.appendChild(background)
		e.appendChild(start)
		end = javascript.document.createTextNode(self.name)
		e.appendChild(end)
		return e
```
![radio](./picture/radio.PNG)

可见，目前实现的结果还是非常基础的。两者都是只包含一个items，后续将会继续改进，实现多个items版本。